Формы на веб-страницах — сложный элемент интерфейса, используемый для сбора информации от пользователя для последующей обработки на сервере. В этом уроке мы создадим различные элементы форм и разберем их работу. В конце вас ждет домашнее задание для закрепления материала.
Создание формы
Для создания формы используется тег <form>, являющийся контейнером для элементов формы. Без содержимого внутри <form> страница останется пустой.
Элементы форм
Поле ввода: <input>
Основной элемент формы — это <input>, определяющий поле для ввода информации. Внешний вид <input> определяется атрибутом type.
- type="text": Обычное текстовое поле.
- type="button": Кнопка. Текст на кнопке задается атрибутом value (например, value="Нажми меня"). Атрибут name задает имя элемента.
- type="checkbox": Флажок (два состояния: включен/выключен). Для подписи используется тег <label>.
- type="radio": Радиокнопка (переключатель).
- type="reset": Кнопка сброса формы.
- type="submit": Кнопка отправки формы.
- type="date": Поле для ввода даты с календарем.
- type="search": Поле для поиска.
- <button>: Альтернативный способ создания кнопки. Текст внутри тега <button> отображается на кнопке.
- type="file": Поле для выбора файла.
- type="password": Поле для ввода пароля (введенные символы скрыты).
Многострочное текстовое поле: <textarea>
Для создания многострочного текстового поля используется тег <textarea>. Атрибуты cols и rows задают количество столбцов и строк соответственно.
Выпадающий список: <select> и <option>
Выпадающий список создается с помощью тега <select>. Каждый пункт списка определяется тегом <option>. Атрибут multiple разрешает множественный выбор, а size — количество одновременно видимых пунктов.
Группировка элементов: <fieldset> и <legend>
Для группировки элементов формы используются теги <fieldset> и <legend>. <legend> — заголовок группы.
Атрибуты элементов форм
Атрибуты <input>
- name: Имя элемента формы (необходимо для передачи данных на сервер).
- value: Значение элемента (для кнопок — текст, для текстовых полей — значение по умолчанию).
- placeholder: Подсказка внутри поля ввода (исчезает при вводе текста).
Атрибуты <form>
- action: URL, куда отправляются данные формы. Если не указан, данные отправляются на текущую страницу.
- method: Метод HTTP для отправки данных (GET или POST). GET используется по умолчанию и подходит для неконфиденциальных данных. POST используется для конфиденциальных данных.
Домашнее задание
В закрепленном комментарии и описании к видео находится домашнее задание.
В этом уроке мы рассмотрели основные элементы и атрибуты для создания форм в HTML. Обработка данных на стороне сервера будет рассмотрена в последующих уроках.