Веб-разработка, логотип Websash

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

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

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

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

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

input-types

  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 - позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг.

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

input-types-code

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

Оставить заявку

Последние статьи

Популярные разделы