Этот урок посвящен созданию HTML-форм и полей ввода с помощью HTML-тегов. Рассмотрим основные теги и атрибуты, необходимые для работы с формами.
Тег <form> и его атрибуты
Все теги, отвечающие за функциональность формы, должны быть заключены внутри тега <form>. Сам по себе этот тег не отображает ничего на странице, но служит контейнером для элементов формы.
Тег <form> имеет несколько атрибутов, два из которых важны:
- action: Указывает URL страницы, которая будет обрабатывать данные формы после отправки. В данном уроке мы не будем создавать такую страницу, так как это относится к серверной части веб-разработки. При изучении серверных языков программирования (например, PHP) вы вернетесь к этому атрибуту. Если атрибут action не указан, данные отправляются на ту же страницу, где находится форма.
- method: Указывает метод передачи данных формы. Существует два метода: GET и POST. Обычно используется метод POST. Подробное рассмотрение методов передачи данных выходит за рамки данного урока и будет изучаться при освоении серверных языков программирования.
Создание полей ввода с помощью <label> и <input>
Для создания подписи к полю ввода используется тег <label>. Для самого поля ввода – тег <input>, который является одиночным (не требует закрывающего тега).
Пример:
<label>Введите имя:</label>
<input type="text">
В этом примере <label> создает подпись «Введите имя:», а <input type=»text»> – текстовое поле для ввода. Использование <label> позволяет выравнивать подпись и поле ввода в одну строку.
Атрибуты тега <input>
Тег <input> обладает множеством атрибутов. Рассмотрим наиболее важные:
- type: Определяет тип поля ввода (например, text, password, email, url, color, date, time, datetime-local, checkbox, radio, file, submit, button, reset).
- placeholder: Создает подсказку внутри поля ввода, которая исчезает при вводе данных.
- value: Устанавливает начальное значение поля ввода.
- maxlength: Ограничивает максимальное количество символов, которые можно ввести в поле.
- hidden: Скрывает поле ввода.
- disabled: Делает поле ввода неактивным (отображается, но в него нельзя ввести данные).
- readonly: Позволяет только читать значение поля, но не изменять его.
- name: Указывает имя поля, используемое для передачи данных на сервер (необходимо для работы с серверными языками программирования).
- id: Уникальный идентификатор поля, используемый для стилизации с помощью CSS и работы с JavaScript. id не должен повторяться на одной странице.
- for (атрибут <label>): Связывает <label> с конкретным полем <input> с помощью атрибута id поля. При клике на <label> фокус переключается на связанное поле <input>.
Пример использования некоторых атрибутов:
<label for="userName">Имя:</label>
<input type="text" id="userName" name="userName" placeholder="Введите ваше имя" maxlength="50">
Типы полей ввода
Помимо text, существуют и другие типы полей ввода: password, email, url, color, date, time, datetime-local, checkbox, radio, file.
- password: Поле для ввода пароля (символы маскируются).
- email: Поле для ввода адреса электронной почты (часто включает в себя валидацию).
- url: Поле для ввода URL-адреса.
- color: Поле для выбора цвета (поддержка может отличаться в разных браузерах).
- date, time, datetime-local: Поля для выбора даты, времени и даты/времени соответственно (поддержка может отличаться в разных браузерах).
- checkbox: Флажок (галочка).
- radio: Переключатель (радио-кнопка). Для создания группы переключателей, из которой можно выбрать только один вариант, необходимо у всех элементов группы указать одинаковое значение атрибута name.
- file: Поле для выбора файла.
Кнопки в форме
Для добавления кнопок в форму используется тег <input> с атрибутом type:
- submit: Кнопка отправки формы (перезагружает страницу и отправляет данные на сервер).
- button: Простая кнопка (не отправляет данные).
- reset: Кнопка сброса формы (очищает все поля формы).
Пример:
<input type="submit" value="Отправить">
<input type="reset" value="Очистить">
В этом уроке мы рассмотрели основные теги и атрибуты для создания HTML-форм и полей ввода. Изучение более продвинутых функций и возможностей форм, а также работы с данными формы на сервере, будет продолжено в следующих уроках.