Theory and Tasks for Students - Spring 2019
Формы HTML

<form> - блочный, основной тег формы, содержащий в себе поля ввода данных, внутри разрешается использовать любые теги для дополнительного форматирования. Некоторые атрибуты:

  • action="http://www.example.com" - указывает действие формы в виде адреса, на который будет происходить переадресация и отправка данных формы;
  • method="get | post" - указывает способ передачи данных формы
    • GET - вид HTTP запроса, передаёт данные в открытом виде, приписывая их в конец адреса запроса, например http://www.example.com/register?fname=John&sname=Doe;
    • POST - передаёт данные в теле запроса, к которому возможно применение шифрования, также позволяет передавать файлы.
  • autocomplete="on | off" - управляет автозаполнением формы браузером клиента;
  • novalidate - сообщает веб-клиенту о том, что проверять правильность ввода данных не требуется;
  • enctype="..." - сообщает веб-клиенту, как стоит упаковывать данные формы, в частности, значение multipart/form-data позволяет отправлять файлы;

<input/> - строчный, универсальный тег поля ввода, использовать можно в любом месте, его поведение определяется значением атрибута type:

  • text - поле ввода строки текста;
  • password - поле ввода строки пароля, введённые символы визуально скрываются;
  • checkbox - переключатель чекбокс, состояние определяется наличием атрибута checked;
  • radio - взаимоисключающий переключатель, состояние определяется наличием атрибута checked, для объединения нескольких элементов в одну группу используется одинаковое значение атрибута name;
  • file - кнопка, вызывающая диалоговое окно выбора файла, без соответствующего значения атрибута enctype формы будет содержать лишь название файла;
  • button - обычная кнопка;
  • reset - кнопка, сбрасывающая введённые данные в форме на значения по умолчанию;
  • submit - кнопка, выполняющая действие формы - переадресацию с отправлением данных;
  • hidden - поле, не отображаемое пользователю, используется для передачи данных, заполняемых скриптами;
  • date, month, week, time, datetime - поля, позволяющие указать дату и/или время;
  • email - поле ввода E-Mail адреса, выполняет проверку строки на корректность(не проверяет существование такого адреса);
  • tel - поле ввода телефонного номера;
  • color, number, range, url - существует множество других видов полей, определённых в спецификации HTML5.

Некоторые другие атрибуты тега <input>:

  • name="..." - имя поля ввода, определяет ключ, с которым необходимо передать значение этого поля, без этого атрибута данные переданы не будут, у каждого поля должно быть уникальное имя(кроме type="radio");
  • value="..." - значение поля ввода по умолчанию или текст кнопок;
  • placeholder="..." - подсказка, отображаемая в пустом поле ввода;
  • required - отмечает поле обязательным для заполнения, данные не будут отправлены, пока все такие поля не будут заполнены, игнорируется при наличии novalidate;
  • readonly - делает невозможным изменять значение поля;
  • disabled - отключает поле ввода/кнопку;
  • pattern="RegExp" - указывает шаблон в виде регулярного выражения, которому должно соответствовать введённое значение поля, игнорируется при наличии novalidate.

Ещё несколько тегов, используемых в формах - к ним также применимы некоторые атрибуты тега <input>:

  • <textarea> - строчный, многострочное поле ввода текста;
  • <select> - строчный, выпадающий список;
    • <option> - содержит один из предлагаемых вариантов выпадающего списка, выбранный вариант определяется наличием атрибута selected.
  • <button> - строчный, атрибутом type="button | reset | submit" определяется тип кнопки, позволяет в качестве содержания использовать другие теги, например <img>;
  • <label> - строчный, позволяет установить подпись к полю ввода, нажатие на этот элемент переводить фокус на связанное с ним поле, связь устанавливается с помощью атрибута for="id", где id - идентификатор поля ввода(не имя).