HTML5 формы: урок для новичков

Этот урок посвящен созданию 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-форм и полей ввода. Изучение более продвинутых функций и возможностей форм, а также работы с данными формы на сервере, будет продолжено в следующих уроках.

Что будем искать? Например,программа