Формы
<form> - тэг обёртка для формы. Может иметь атрибуты:
action - куда отправлять собранные данные. Абсолютная или относительная ссылка.
autocomplete (on/off) - включает или отключает автодополнение на основе ранее введённых данных.
method (get/post) - указывает каким образом пересылать данные:
GET - передаёт данные в URI. Длина URI ограничена 3000 символов, нужно помнить об этом. Никогда не передавайте таким способом данные, которые нельзя кому-то показывать (пароли). GET следует использовать для получения данных с сервера (поиск, к примеру) либо чтобы дать возможность пользователю создать закладку на запрос (адрес запроса страницы определённого товара).
POST - передаёт данные в теле HTTP-запроса. В строке адреса данные не отображаются. Нет ограничений на длину. Нельзя создать закладку на такие данные. Следует использовать в случае передачи данных для обработки на сервере.
name - имя формы, может быть использовано для доступа к форме.
novalidate - отключает проверку полей формы, например, типа e-mail.
target - где будут отображены результаты работы формы.
Поле ввода
<input> - поле для ввода данных. Имеет множество атрибутов. Самый главный - type.
Возможные значения атрибута type:
button - кнопка, которая активирует JavaScript когда на нее нажимают.
<input type="button" value="Click me" onclick="msg()">
checkbox - “галочки”, позволяют выбрать один или более вариантов из ограниченного количества
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car"> I have a car
Возможет атрибут checked, который позволяет задать выбор по умолчанию.
date - выводит блок для указания даты. Не поддерживается в файрфоксе.
Birthday: <input type="date" name="bday">
email - поле для ввода адреса электронной почты. Автоматически проверяется на правильность ввода.
E-mail: <input type="email" name="usremail">
Поддерживается атрибут multiple для ввода нескольких значений.
file - появляется поле и кнопка для выбора файла для отправки на сервер.
Select a file: <input type="file" name="img">
Поддерживается атрибут multiple для ввода нескольких значений.
hidden - скрытое от пользователя поле. Может хранить значение переданное из предыдущей формы или которое понадобится в будущем.
<input type="hidden" name="country" value="Norway">
image - определяет картинку как кнопку для отправки данных формы.
<input type="image" src="img_submit.gif" alt="Submit">
Атрибут alt идёт только в связке с type="image". Также возможно указать высоту и ширину картинки с помощью атрибутов height и width, соответственно.
month - выводит управляющий элемент для ввода месяца. Не поддерживается в файрфоксе.
Birthday (month and year): <input type="month" name="bdaymonth">
number - управляющий элемент для выбора числа из заданного диапазона. Не поддерживается в файрфоксе.
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" step=”1” value=”2”>
[ Слайд ]
password - поле для ввода пароля. Вводимые символы скрываются.
<input type="password" name="pwd">
radio - позволяют выбрать только одно значение из ограниченного количества вариантов.
<input type="radio" name="gender" value="male"> Male<br> <input type="radio" name="gender" value="female"> Female
Возможет атрибут checked, который позволяет задать выбор по умолчанию.
range - элемент для ввода цифр, значение которых не сильно важно, в виде слайдера.
<input type="range" name="points" min="1" max="10" step=”1” value=”4”>
reset - отображается в виде кнопки при нажатии на которую все введённые данные сбрасываются.
<input type="reset">
submit - отображается в виде кнопки отправляющей введённые данные на сервер.
<input type="submit">
text - определяет поле для ввода текста в одну строку.
First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br>
time - элемент управления для ввода времени. Не поддерживается в файрфоксе.
Select a time: <input type="time" name="usr_time">
url - поле для ввода адреса страницы.
Add your homepage: <input type="url" name="homepage">
week - элемент управления для ввода недели. Не поддерживается в файрфоксе.
Select a week: <input type="week" name="week_year">
Почти никем не поддерживаемые значения параметра type:
color - элемент управления для ввода цвета.
search - поле для ввода поисковых запросов.
tel - поле для указания номера телефона.
Остальные атрибуты тега <input>:
autocomplete - включить/отключить автодополнение. Данные берутся из введённых ранее.
autofocus - элемент должен автоматически получать фокус после загрузки страницы.
disabled - указывает, что поле должно быть выключено.
maxlength - задаёт ограничение на количество символов для ввода.
name - задаёт имя для элемента <input>.
pattern - задаёт регулярное выражение с помощью которого проверяется содержимое поля.
placeholder - кратко описывает ожидаемое содержимое поля.
readonly - указывает, что данное поле “только для чтения”.
required - указывает, что данное поле должно быть заполнено перед отправкой формы.
size - указывает ширину элемента <input> в символах.
value - задаёт значение по умолчанию.