Как сделать простую форму на HTML5, тег form и новые типы данных input

12.07.18 ИТ / HTML 5184

Формы широко используются на любом сайте. Благодаря такому инструменту, стало возможным осуществить отправку различных данных от пользователя на сервер, где можно обрабатывать полученные данные как угодно. Формы создаются достаточно просто, но обычно требуется сделать проверку вводимых значений на стороне клиента и реализовать некоторый специфический функционал. Если раньше для этого приходилось прибегать к различным трюкам, то сегодня высоко функциональную форму можно создать на HTML5.

Для создания форм служит тег form, у него есть различные атрибуты. Рассмотрим основные из них:

• action – адрес, куда будут отправлены данные,
• autocomplete – управление автозаполнением полей формы,
• enctype – указывает способ кодирования данных формы,
• method - метод протокола HTTP, обычно GET или POST. По умолчанию GET, если не задать другой метод,
• name – устанавливает имя формы.

Тег form – это лишь контейнер для полей формы. Обычно в форме могут использоваться выпадающий список – тег select, тестовые области - тег textarea и поля ввода - тег input.

Основной интерес представляют тег input, именно он позволяет создать различные типы полей на HTML5. Рассмотрим какие типы полей можно создать при помощи него и его атрибута type. Варианты атрибута type:

1. button - создает кнопку,
2. checkbox - создает флажок,
3. color - поле для ввода цвета, генерирует палитры цветов,
4. date - позволяет вводить дату в формате дд.мм.гггг,
5. datetime-local - позволяет вводить дату и время,
6. email - поле для ввода почтового адреса,
7. file - позволяет загружать файлы с компьютера пользователя,
8. hidden - скрывает элемент управления,
9. image - создает кнопку, на кнопке можно вставить изображение,
10. month - позволяет ввести месяц и год,
11. number - предназначено для ввода целочисленных значений. Атрибуты min, max и step задают верхний, нижний пределы и шаг между значениями,
12. password - поле для ввода пароля,
13. radio - создает переключатель, который можно включить или выключить,
14. range - создает ползунок, min и max позволят установить диапазон,
15. reset - кнопка для очистки формы,
16. search - обозначает поле поиска,
17. submit - кнопка для отправки данных формы на сервер,
18. tel - поле для ввода номера телефона,
19. text - поле для ввода текста,
20. time - позволяет вводить время по шаблону чч:мм,
21. url - поле предназначено для указания URL-адресов,
22. week - позволяет пользователю выбрать одну неделю в году.

Ниже приводится примерный исходный код формы, показанной на рисунке выше:

Таким образом, благодаря появлению HTML5 стало возможным создавать богатые функциональные формы легко и просто. При разработке проектов стоит использовать новые типы полей из HTML5, это значительно облегчить решение многих задач и улучшит взаимодействие с пользователем сайта.