Вход Регистрация
ruen

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

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

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

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

Тег 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, это значительно облегчить решение многих задач и улучшит взаимодействие с пользователем сайта.

Комментарии (0)
Для комментирования войдите или зарегистрируйтесь.
Оставить заявку

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

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

Eqsash (Инструменты)

Приложение для Android - VK LAST USER ID, отучитель от зависимости и т.д.:
Доступно в Google Play

Amessage (Общение)

Вход в веб-версию
Приложение для Android:
Доступно в Google Play

Поделиться

Подписаться

YouTube

Книги

IT-заметки - Простым языком о самом нужном (HTML, CSS, JavaScript, PHP, базы данных, Drupal, Битрикс, SEO, домены, безопасность и другое), PDF, 500 стр.