В этой статье показаны примеры управления формой JS для вашей ссылки. Конкретный контент заключается в следующем
Пример 1: Итерация через все элементы управления формой
<script type = "text/javascript"> // transf функция формы getValues () {var f = document.forms [0]; // Получить форму dom var elements = f.elements; // Получить все управляющие массив var str = ''; // Разделитель строки // петлевой проход для (var i = 0; i <elements.length; i ++) {var e = elements [i]; // текущий контроль str += e.value; // разделение управляющего значения str += '/n'; // Сплит сепаратор} alert (str); // Покажите результат с помощью окна подсказки} </script> <FORD> Текстовое поле: <input Type = "text" name = "myText"/> <br/> Радиоам-поле: <input type = "radio" name = "myradio" value = "1"/> 1 <input type = "radio" name = "myradio" value = "2"/> 2 <br/> droploun Выберите == </option> <vitue value = "1"> 1 </option> <vition value = "2"> 2 </option> </select> <br/> <input type = "кнопка" value = "getValues ()"/> </form>Пример 2: Доступ к конкретному управлению через имя управления
<script type = "text/javascript"> // Доступ к конкретному управлению через функцию управления getFormDom () {var f = document.forms [0]; // Получить форму dom var mytext = f.mytext; // Получить управление DOM по имени // Запрашивать имя управления и оповещение значения (mytext.name + ":" + mytext.value); } </script> <form> текстовое поле: <input type = "text" name = "myText"/> <br/> <input type = "cutting" value = "getControl" onclick = "getFormDom ()"/> </form>Пример 3: Получите количество текстовых поксов в форме
<script type = "text/javascript"> // Получение количества текстовых покл в функции формы getInputCount () {var f = document.forms [0]; // Получить форму dom var elements = f.elements; // Получить все управляющие массивы var count = 0; // Стат Общее число // Переход цикла для (var i = 0; i <elements.length; i ++) {// текущий элемент управления var e = elements [i]; // это текстовое поле if (e.tagname == 'input' && e.type == 'text') {count ++; // Общее число добавляется сама по себе}} // Использовать поле для просьбы для отображения оповещения результата («Всего текстовое поле имеет общее количество:" + count + "s"); } </script>Пример 4: Метод отправки для изменения формы
Атрибут метода указывает метод HTTP (GET или POST), используемый при отправке формы. При использовании GET данные формы видны в адресной строке страницы, а публикация более безопасна, поскольку данные, представленные в адресной строке страницы, невидимы.
<script type = "text/javascript"> // изменение функции метода подчинения формы modifymethod () {var f = document.forms [0]; // Получить форму dom var method = f.mymethod.value; // Выбранный метод f.method = method; // Изменить метод выбранного представления // Использовать поле «Запрос» для отображения оповещения результата («Метод текущего представления формы:« + метод); } </script> <form method = "post"> выберите метод отправки: <select name = "mymethod"> <vitue value = ""> == Пожалуйста, выберите == </option> <option value = "get"> get </option> <option value = "post"> post </option> </select> <br/> <input = "value =" modify modify moderify on -clod -onclicl ") </form>Пример 5: Динамически укажите атрибуты действия формы
Атрибут действия определяет действие, выполняемое при отправке формы.
Обычная практика отправлять формы на сервер для использования кнопки отправки.
Как правило, формы отправляются на веб -страницы на веб -сервере.
Если атрибут действия опущен, действие будет установлено на текущую страницу.
<script type = "text/javaScript"> // Динамично укажите атрибут действия функции формы edifyAction () {var f = document.forms [0]; // Получить форму dom var newurl = f.newurl.value; // Выбранный метод f.action = newurl; // Измените адрес действия отправленной формы // Использовать поле «Приглашение» для отображения оповещения результата («Текущее действие формы:» + f.action); } </script> <form method = "post"> Пожалуйста, выберите метод отправки: <input type = "text" name = "newurl"/> <br/> <input type = "value =" modify отправить действие "Onclick =" ModifyAction () "/> </form>Пример 6: Динамический селективный контроль фокуса
<script type = "text/javaScript"> // Первый радиоафук - это функция фокусировки focusit () {var f = document.forms [0]; // Получить форму dom var myradio = f.myradio; // Получить радио коробок myradio [0] .focus (); //The first radio box gets focus}</script><form> Text box: <input type="text" name="myText"/> <br/> Radio box: <input type="radio" name="myRadio" value="1"/> <input type="radio" name="myRadio" value="2"/> <br/> Drop-down list: <select name="mySelect"> <option value="">==Please select == </option> <option value = "1"> 1 </option> <option value = "2"> 2 </option> </select> <br/> <input type = "кнопка" value = "Первый радиосвязь - фокус" onclick = "focusit ()"/> </form>Пример 7: Инициализировать значения всех элементов управления в форме в начальное состояние
<script type = "text/javascript"> // инициализировать значения всех элементов управления в форме в функцию начального состояния init () {var f = document.forms [0]; // Получить форму dom f.reset (); // Использовать функцию сброса ()} </script>Пример 8: партия добавить объяснение ко всем элементам управления формой
<script type = "text/javaScript"> // Партия описания для всех элементов управления формой batchcomment () {var f = document.forms [0]; // Получить форму dom var kids = f.childnodes; // Получить все детские элементы формы var newarr = []; // Определите массив новых элементов var j = 0; // Определите подписание для новой массивы элементов // Цикл через детские элементы для (var i = 0; i <kids.length; i ++) {var e = дети [i]; // текущий дочерний элемент newarr [j ++] = e; // Добавить в новый массив // Определите, является ли это элементом управления if (e.tagname == 'input' || e.tagname == 'select') {// добавить узел с текстом описание var text = document.creatextnode («Этот элемент требуется»); newarr [j ++] = текст; // Добавить узлы для нового массива}} // Очистить существующее содержание формы f.innerhtml = ''; // Описание партии для (var i = 0; i <newarr.length; i ++) {// Добавить старые элементы и узлы описания в форму f.appendchild (newarr [i]); }}} </script>Пример 9: Используйте скрытые элементы управления для добавления параметров в форму
<script type = "text/javascript"> // функция функции showparams () {// Установить значение скрытой переменной. Это значение также может быть указано через значение значения Tag Document.forms [0] .myhidden.value = 'Я скрыт'; // Определите переменную сплайсинга символа var str = 'Параметры, представленные формой, включают:'; // Параметр разделения года str + = '/n Год:' + document.forms [0] .myear.value; // Распределение имени параметр str + = '/n name:' + document.forms [0] .myname.value; // разделить скрытый параметр str + = '/nhide переменная:' + document.forms [0] .myhidden.value; предупреждение (str); //Display the value of the character} </script> <form> <input type="hidden" name="myhidden"/> Year: <select name="myyear"> <option value="2012">2012</option> <option value="2013">2013</option> <option value="2014">2014</option> </select> <br/><br/> Name: <input type="text" name = "myname"/> <br/> <br/> <input type = "ald value =" Onclick = "showParams ();"/> </form>Пример 10: Проверьте все флажки
<script type = "text/javascript"> // проверить все функции функции Fectionall (c) {// Получить все флажки var arr = document.getelementsbyname ('myname'); if (c) {// Выберите все флажки для (var i = 0; i <arr.length; i ++) {arr [i] .checked = true; // select}} else {// в противном случае не выбирайте все // все флажки для (var i = 0; i <arr.length; i ++) {arr]. <form> Your interests: <br> <input type="checkbox" name="myall" onclick="checkAll(this.checked)"/>Select all<br> <input type="checkbox" name="myname" />Select all<input type="checkbox" name="myname" />Select all<input type="checkbox" name="myname" />Select all</form>Пример 11: Установите привлекательные стили для управления фокусом формы
<script type = "text/javascript"> function init () {var f = document.forms [0]; // Получить форму dom var elements = f.elements; // Получить все управляющие массивы var str = ''; // Разделительные строки // Переход цикла для (var i = 0; i <elements.length; i ++) {var e = elements [i]; // текущий элемент управления e.onfocus = function () {// Определить обратный вызов стиля для фокуса // Модифицировать границу для красного } e.onblur = function () {// вызов фокусировки this.style.border = ''; // восстановить оригинальный стиль границы}}}} </script>Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.