Этот урок посвящен созданию полей ввода для получения данных от пользователя (например, имя, фамилия, дата рождения, пол и т.д.), а также тегам, используемым для создания формы отправки информации.
Создание формы с помощью тега <form>
Для создания формы используется тег <form>. В этом уроке не рассматриваются функции отправки данных, поскольку это требует использования других языков программирования (например, PHP). Тег <form> лишь создает форму, а отправка данных осуществляется другими технологиями.
Тег <form> имеет несколько атрибутов:
- name: указывает имя формы (например, test). Используется для обращения к форме.
- action: указывает, куда отправляются данные формы. Поскольку данные не обрабатываются, это поле пустое. Пустое значение означает обработку данных на той же странице.
- method: определяет метод отправки данных (GET или POST). Используется метод POST. Подробное объяснение методов GET и POST будет в последующих уроках.
<form name="test" action="" method="post">
<!-- Здесь будут поля ввода -->
</form>Поля ввода с помощью тега <input>
Поля ввода создаются с помощью одиночного тега <input>. По умолчанию, без атрибутов, <input> создает текстовое поле.
<input>Для изменения типа поля ввода используется атрибут type. Существует множество его значений.
Атрибуты value и placeholder
value задает начальное значение поля ввода.
<input type="text" value="Поле для ввода">placeholder задает подсказывающий текст, исчезающий при вводе данных пользователем.
<input type="text" placeholder="Поиск">Использование value и placeholder одновременно: value перекрывает placeholder.
Атрибут name
name присваивает полю ввода имя, необходимое для получения значения после отправки формы.
<input type="text" name="имя_пользователя">Атрибут title
title создает всплывающую подсказку при наведении курсора мыши на поле ввода.
<input type="text" title="Подсказка">Атрибут maxlength
maxlength ограничивает максимальную длину вводимого текста.
<input type="text" maxlength="3">Тег <label>
Для создания подписи к полю ввода используется тег <label>. Атрибут for связывает <label> с полем ввода по его атрибуту id. При клике на <label> фокус переходит на связанное поле ввода.
<label for="имя_пользователя">Введите ваше имя:</label>
<input type="text" id="имя_пользователя" name="имя_пользователя">Типы полей ввода
Типы полей ввода:
- date: календарь для выбора даты.
- time: выбор времени.
- datetime-local: выбор даты и времени.
- week: выбор недели.
- url: поле для ввода URL-адреса. Браузер проверяет корректность ввода.
- tel: поле для ввода номера телефона. Браузер проверяет корректность ввода.
- search: поле для поиска, аналогично text.
- number: поле для ввода чисел. Позволяет использовать стрелки для увеличения/уменьшения значения.
- range: ползунок для выбора значения в заданном диапазоне.
- color: палитра для выбора цвета.
- email: поле для ввода адреса электронной почты. Браузер проверяет корректность ввода.
- password: поле для ввода пароля. Вводимые символы маскируются.
- file: выбор файла. Требует дополнительных действий для загрузки файла на сервер.
- radio: радиокнопки. Разрешается выбрать только один вариант. Для группировки используется одинаковое значение атрибута name.
- checkbox: флажки. Разрешается выбрать несколько вариантов.
Кнопки отправки и сброса
- submit: кнопка отправки формы. Вызывает перезагрузку страницы.
- button: кнопка без перезагрузки страницы. Обычно используется для взаимодействия с JavaScript.
- reset: кнопка сброса формы. Очищает все поля формы без перезагрузки страницы.
Рассмотрены основные типы полей ввода в HTML5 и способы их использования для создания форм. Для обработки данных и отправки на сервер потребуется изучение других технологий, таких как PHP или JavaScript.