HTML5. Работа с веб - формами

<input>

Как уже упоминалось, элемент <form> является своего рода контейнером для других элементов управления.

Чаще всего для определения элементов управления используется тег <input>.

<input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент <input> не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.

Атрибуты тега <input>:

• accept– устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов;
• accesskey – задает комбинацию клавиш, позволяющую перейти к элементу;
• align –определяет выравнивание изображения;
• alt – альтернативный текст для кнопки с изображением;
• autocomplete –включает или отключает автозаполнение, соответственно принимает значения on и off;
• border – задает толщину рамки вокруг изображения.;
• checked – предварительно активированный переключатель или флажок;
• disabled – блокирует доступ и изменение элемента;
• form – связывает поле с формой по её идентификатору;
• formaction – определяет адрес обработчика формы;
• formenctype – устанавливает способ кодирования данных формы при их отправке на сервер;
• formmethod – сообщает браузеру каким методом следует передавать данные формы на сервер (GET или POST);
• formnovalidate – отменяет встроенную проверку данных на корректность введенных значений;
• formtarget – определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы;
• list – указывает на список вариантов, которые можно выбирать при вводе текста;
• max– максимально допустимое значение для ввода числа или даты;
• maxlength –максимально допустимое количество символов разрешенных в тексте;
• min - минимально допустимое значение для ввода числа или даты;
• multiple –позволяет загрузить несколько файлов одновременно;
• name – задает имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать;
• pattern – устанавливает шаблон ввода;
• placeholder –выводит подсказывающий текст;
• readonly –устанавливает, что поле не может изменяться пользователем;
• required – отмечает, что поле является обязательным для заполнения;
• size –задает ширину текстового поля;
• src – определяет адрес графического файла для поля с изображением;
• step – задает шаг приращения для числовых полей;
• tabindex – определяет порядок перехода между элементами с помощью клавиши Tab;
• type – сообщает браузеру, к какому типу относится элемент формы.
• value –определяет значение элемента.

Основной атрибут тега <input>, определяющий вид элемента — type. В таблице 17.1 перечислены значения, которые может принимать этот атрибут.

Работа с формами в JavaScript

Вся интерактивность при работе с формами, фактически, определяется логикой веб - сценариев. Рассмотрим основные моменты работы с формами.

Идентификация элементов управления

Существенным моментом программирования форм является идентификация их элементов. Рассмотрите еще раз иерархическую схему объектов раздела "Объектная модель документа DOM". Массив форм forms[] вложен в объект document; элементы форм являются вложенными объектами самой формы; элементы списка являются вложенными объектами объекта select.

Допустим, что задана следующая форма:

<form name="form">
   ФИО:<br>
  <input type="text" name="Name">
   Ваш пол:<br>
  <input type="radio" name="gender" value="male">мужской<br>
  <input type="radio" name="gender" value="female">женский<p>
    Город:<br>
  <select name="town">
   <option value="msk">Москва</option>
   <option value="spb">Санкт-Петербург</option>
   <option value="tmsk">Томск</option>
   <option value="other">другой</option>
  </select>
  </form>

Во всех случаях при идентификации элементов форм используются имена (значения атрибута name) заданных элементов HTML. По имени идентифицируется и сама форма; для нашей формы это обращение вида document.form.

К примеру, к элементу управления Name можно обратиться следующим образом:

• document.form.Name;
• document.form['Name'] .

К группе элементов с одинаковым именем можно обратиться так:

• document.form. gender [i];
• document.form[' gender '][i].

Элементы списка можно идентифицировать таким способом:

• document.form.options[i];
• document.form['options'][i] .

Также все элементы формы представлены массивом elements[], в котором содержатся в порядке их объявления в документе HTML.