Для создания форм необходимо ввести дескриптор form, который требует и открытия и закрытия. Дескриптор form является блочным, то есть занимает 100% доступной ширины
Может иметь такие атрибуты как:
action - в нем указывается адрес документа который будет обрабатывать даные отправленые формой, когда форма отпралена будет происходить перенаправление на страницу указаную в action;
method - указывает метод отпраки даных. Может принимать два значения "POST" и "GET". Подробнее автор обещал разъяснить позже.
novalidate - при отправке форма не будет проверяться на правильность заполнения. Этот атрибут не требует присваиания значения.
autocomplete - может иметь значения "on" или "off". Сработает автозаполнение если форма была отправлена.
enctype - указывает тип кодирования, работает если у атрибута method установлено значение "POST". Принимает три значения:
В target можно записать iframe в который будут выводиться результат
Для создания интерактивных элементов форм используют дескриптор input. Input может быть как текстовым полем, так и специальным полем, кнопкой, ползунком и многим другим, это определяется атрибутом type. Ниже будет таблица типов интерактивных элементов.
| Текстовые поля | ||
|---|---|---|
| input type | Применение | Внешний вид |
| text | Применяется для ввода простого текста | |
| password | Применяется для ввода паролей, текст закрывается звездочками | |
| Применяется для ввода email. Имеется проверка правильности заполнения | ||
| url | Применяется для ввода url. Имеется проверка правильности заполнения | |
| search | Применяется для ввода поисковых запросов. Имеется кнопка для очистки поля | |
| tel | Применяется для ввода телефонного номера. | |
| Атрибуты для текстовых полей | ||
| Атрибут | Описание | Пример применения |
| autocomlete | Разрешает автозаполнение ячеек. Может иметь значения "on" и "off" | |
| maxlength | Устанавливает максимальное количество символов, которые можно ввести в поле, например 5 | |
| placeholder | Дополнительный текст, как подсказка в поле. Например: "Ваше имя" | |
| required | Делает поле обязательным для заполнения. Отправка формы с пустым обязательным полем невозможна | |
| readonly | Делает поле доступным только для чтения. Значения не требует | |
| size | В этом атрибуте указывается ширина поля, например "10" | |
| spellcheck | Только для простого текстового поля и для поля поиска. Включает проверку орфографии. Имеет значения "true" - включено, "false" - отключено, "default" - в зависимости он настроек браузера | |
| name | Обязательный атрибут для всех (не только текстовых) инпутов. В этом параметре присваивается уникальное имя-идентификатор элемента | |
| pattern | Используется для создания шаблонов ввода текста. Подробнее автор обещал рассказать в javascript регулярные выражения | |
| Инпуты которые не содержат текста | ||
| input type | Применение | Внешний вид |
| checkbox | Для установки галочек. | |
| radio | Если собран в группу то активен может быть лишь один. Для этого атрибут name у них должен быть одинаков | |
| Атрибуты чекбокса и радиокнопки | ||
| Атрибут | Описание | Пример применения |
| checked | Активирует элемент (ставит галочку или точку). Не требует ввода значения | |
| required | Делает установку галочки или точки обязательной. Отправка формы без галочки или точки невозможна | |
| value | Атрибут в параметр которого записано значение которое будет передано при отправке формы | |
| input type | Применение | Внешний вид |
| color | Применяется для выбора цвета | |
| file | Применяется для выбора файлов | |
| hidden | Не отображается при выводе | |
| number | Применяется для ввода числа | |
| date | Применяется для ввода даты без времени | |
| datetime | Применяется для ввода даты со временем | |
| range | Бегунок для выбора в диапазоне | |
| Атрибуты бегунка | ||
| Атрибут | Описание | Пример применения |
| min и max | Минимальное и максимальное значение диапазона в котором перемещается бегунок | |
| step | Шаг с которым перемещается бегунок в элементе. Например, min="1" max="10" step="3" | |
| input type | Применение | Внешний вид |
| datetime-local | Контроль ввода даты | |
| month | Ввод месяца | |
| time | Ввод времени | |
| week | Ввод недели | |
| Кнопки | ||
| input type | Применение | Внешний вид |
| button | Просто кнопка | |
| image | Графическая кнопка (изображение) | |
| Атрибуты графической кнопки | Описание | Пример применения |
| input type | Применение | Внешний вид |
| reset | Кнопка для очистки формы | |
| submit | Кнопка для отправки формы |