1. Введение в форму
Form <Form> является одной из самых интерактивных форм на веб -страницах. Он получает пользовательские данные через различные формы, в том числе раскрывающиеся списки, радиопроизводительные кнопки, флажки и текстовые поля. Эта статья в основном вводит обычно используемые свойства и методы в формах.
JavaScript может быть очень удобным для управления формами, такими как получение данных формы для эффективной проверки, автоматическое назначение значений для формирования полей, событий формы обработки и т. Д.
В настоящее время каждая форма анализируется в объект, то есть формировать объекты. Эти объекты могут быть направлены на сбору Document.forms. Например, можно использовать форму с атрибутом NAMA Form1
Скопируйте код следующим образом: document.forms ["form1"]
Мало того, вы также можете ссылаться на объекты формы через индекс формы в документе. Например
Скопируйте код следующим образом: Document.forms [1]
Представляет второй объект формы в справочном документе
Ниже приведен элемент формы, который содержит несколько элементов формы, каждый элемент имеет метку метки, связанную с элементом, так что, нажав на текст, вы можете установить его и выбрать его в таблицу, улучшив пользовательский опыт.
Кода -копия выглядит следующим образом:
<form method = "post" name = "myform1" action = "addinfo.aspx">
<p> <Метка для = "Имя"> Введите свое имя: </label> <br> <input type = "text" name = "name" id = "name"> </p>
<p> <label for = "passwd"> Пожалуйста, введите свой пароль: </label> <br> <input type = "password" name = "passwd" id = "passwd"> </p>
<p> <метка для = "color"> выберите свой любимый цвет: </label> <br>
<select name = "color" id = "color">
<option value = "red"> Red </option>
<option value = "green"> green </option>
<option value = "blue"> Blue </option>
<vitue value = "желтый"> желтый </option>
<option value = "cyan"> qing </option>
<option value = "Purple"> Purple </option>
</select> </p>
<p> Выберите свой пол: <br>
<input type = "radio" name = "sex" id = "male" value = "male"> <метка для = "мужчина"> мужчина </label> <br>
<input type = "radio" name = "sex" id = "nable" value = "fome"> <метка для = "Женский"> Женский </label> </p>
<p> Что тебе нравится делать: <br>
<input type = "fackbox" name = "hobby" id = "book" value = "book"> <метка для = "book"> чтение </label>
<input type = "fackbox" name = "hobby" id = "net" value = "net"> <метка для = "net"> в Интернете </label>
<input type = "fackbox" name = "hobby" id = "sleep" value = "sleep"> <метка для = "Sleep"> Sleep </label> </p>
<p> <Метка для = "Комментарии"> Я хочу оставить сообщение: </label> <br> <textarea name = "comments" id = "Комментарии" cols = "30" rows = "4"> </textarea> </p>
<p> <input type = "Отправить" name = "btnsubmit" id = "btnsubmit" value = "prope">
<input type = "сбросить" name = "btnreset" id = "btnreset" value = "сброс"> </p>
</form>
Обычно каждый элемент формы должен иметь атрибуты имени и идентификатора, имя используется для передачи серверу, а ID используется для привязки и фильтрации функций.
2. Доступ к элементам в форме
Элементы в форме, будь то текстовые поля, радиопроизводительные кнопки, раскрывающиеся кнопки, раскрывающиеся списки или другой контент, включены в коллекцию элементов формы. Вы можете использовать положение элемента в коллекции или атрибут имени элемента, чтобы получить ссылку на элемент.
Кода -копия выглядит следующим образом:
varoform = document.forms ["form1"] // Получить форму
var Etextform = Oform.Elements [0]; // Получить первый элемент
var EtextPasswd = Oform.elements ["passwd"] // Получить элемент с атрибутом имени Passwd
Цитируйте наиболее эффективный и интуитивно понятный метод:
Скопируйте код следующим образом: var ethtcomments = Oform.elements.comments; // Получить элемент с комментариями атрибута имени
3. Общественные свойства и методы
Все элементы в форме (кроме скрытых элементов) имеют некоторые общие свойства и методы. Вот некоторые часто используемые списки
Кода -копия выглядит следующим образом:
var Oform = document.forms ["form1"]; // Получить форму
var ImageStcomments = Oform.elements.comments; // Получить элемент с комментариями атрибута имени
предупреждение (Oform.Type); // Просмотр типа элемента
var EtextPasswd = Oform.Elements ["passwd"]; // Получить элемент с атрибутом имени Passwd
foxtpasswd.focus (); // сосредоточиться на конкретных элементах
4. Представление форм
Представление в форме заполняется через кнопки или изображения с функциями кнопок
Кода -копия выглядит следующим образом:
<input type = "Отправить" name = "btnsubmit" id = "btnsubmit" value = "prope">
<input type = "image" name = "picsubmit" id = "picssubmit" src = "отправить.jpg">
Когда пользователь нажимает Enter или нажимает одну из кнопок, форма может быть отправлена без дополнительного кода. Вы можете использовать атрибут действия в форме, чтобы обнаружить, отправить ли.
Скопируйте код кода следующим образом: <form method = "post" name = "form1" action = "javaScript: alert ('particited')"> </form>
Пользователи могут неоднократно нажимать кнопку отправки во время процесса отправки, потому что скорость сети слишком медленная. Это огромное бремя на сервере и может быть запрещено с помощью атрибута отключений. Например:
Скопируйте код следующим образом: <input type = "button" value = "Отправить" />