Основы HTML: Формы (<form>)

HTML-формы определяются тегом <form>. Внутри этого тега располагаются различные элементы управления формами, такие как текстовые поля, кнопки, выпадающие списки, флажки и радиокнопки, которые позволяют пользователям вводить и выбирать данные.

Основной синтаксис формы

<form action="/submit" method="post">
    </form>

Атрибуты тега <form>

• action: Указывает URL-адрес, на который будут отправлены данные формы после ее отправки.
• method: Определяет HTTP-метод, используемый для отправки данных формы. Наиболее часто используются два метода:
  • get: Данные формы добавляются к URL-адресу в виде параметров (например, ?name=value&anotherName=anotherValue). Используется для небольших объемов данных и не является безопасным для конфиденциальной информации. Данные видны в адресной строке браузера и могут быть сохранены в истории.
  • post: Данные формы отправляются в теле HTTP-запроса. Используется для больших объемов данных и более безопасен для конфиденциальной информации. Данные не видны в адресной строке браузера.
• target: Указывает, где открывать URL-адрес, указанный в атрибуте action, после отправки формы. Возможные значения:
  • _self (по умолчанию): Открывает в текущем окне/вкладке.
  • _blank: Открывает в новом окне/вкладке.
  • _parent: Открывает в родительском фрейме.
  • _top: Открывает во всем окне (отменяет все фреймы).
  • имя_фрейма: Открывает в указанном фрейме.
• enctype: Указывает, как кодировать данные формы перед отправкой на сервер. Используется только с методом post. Возможные значения:
  • application/x-www-form-urlencoded (по умолчанию): Данные кодируются как пары "ключ=значение", разделенные амперсандом (&). Пробелы заменяются на +, специальные символы кодируются.
  • multipart/form-data: Используется для отправки файлов (например, через <input type="file">). Данные не кодируются.
  • text/plain: Данные отправляются как обычный текст без какого-либо кодирования.
• accept-charset: Указывает кодировку символов, которую сервер может обрабатывать для данных формы.
• autocomplete: Указывает, должна ли форма или ее поля иметь включенное автозаполнение браузером. Возможные значения: on (включено), off (выключено).
• novalidate: Булевый атрибут, указывающий, что форма не должна проходить встроенную браузерную валидацию при отправке.

Элементы управления формами (<input>, <textarea>, <select>, <button> и др.)

Внутри тега <form> располагаются различные элементы управления, которые позволяют пользователю вводить и выбирать данные.

Тег <input>

Тег <input> является наиболее универсальным элементом управления формой. Его поведение и внешний вид зависят от значения атрибута type.

Основные атрибуты <input>:

• type: Определяет тип элемента ввода. Наиболее распространенные значения:
  • text: Однострочное текстовое поле (по умолчанию).
  • password: Однострочное текстовое поле для ввода пароля (вводимые символы обычно скрываются).
  • email: Поле для ввода адреса электронной почты (браузер может выполнять базовую валидацию формата).
  • url: Поле для ввода URL-адреса (браузер может выполнять базовую валидацию формата).
  • number: Поле для ввода числа (можно задать атрибуты min, max, step).
  • range: Ползунок для выбора числового значения в заданном диапазоне (min, max, step).
  • date: Поле для выбора даты.
  • time: Поле для выбора времени.
  • datetime-local: Поле для выбора даты и времени без часового пояса.
  • checkbox: Флажок (позволяет выбрать несколько вариантов).
  • radio: Радиокнопка (позволяет выбрать только один вариант из группы с одинаковым атрибутом name).
  • file: Поле для выбора файла для загрузки на сервер.
  • submit: Кнопка для отправки формы.
  • reset: Кнопка для сброса всех полей формы к их значениям по умолчанию.
  • hidden: Скрытое поле (не отображается на странице, но может содержать данные, которые будут отправлены на сервер).
• name: Определяет имя элемента управления, которое используется для идентификации данных при отправке на сервер. Для группы радиокнопок с одним вариантом выбора должно быть одинаковое значение атрибута name.
• value: Определяет значение элемента управления. Для текстовых полей — введенный текст, для флажков и радиокнопок — значение, которое будет отправлено, если элемент выбран, для кнопок — текст на кнопке (или значение, если type="submit" или type="reset").
• id: Уникальный идентификатор элемента в пределах документа. Используется для связывания с тегом <label>.
• class: Определяет классы CSS для стилизации элемента.
• style: Встроенные CSS-стили для элемента (рекомендуется использовать с осторожностью).
• placeholder: Подсказка, отображаемая в поле ввода, когда оно пустое. Исчезает при вводе текста.
• required: Булевый атрибут, указывающий, что поле должно быть заполнено перед отправкой формы.
• disabled: Булевый атрибут, отключающий элемент управления. Отключенные элементы не могут быть выбраны или изменены, и их значения не отправляются на сервер.
• readonly: Булевый атрибут, делающий текстовое поле доступным только для чтения. Значение такого поля отправляется на сервер.
• size: Указывает видимую ширину текстового поля (в символах).
• maxlength: Указывает максимальное количество символов, которое может быть введено в текстовое поле.
• min и max: Используются с типами number и range для задания минимального и максимального допустимых значений.
• step: Используется с типами number и range для задания шага изменения значения.
• checked: Булевый атрибут, указывающий, что флажок или радиокнопка выбраны по умолчанию.
• multiple: Булевый атрибут, позволяющий пользователю выбирать несколько файлов в поле type="file" или несколько опций в элементе <select>.
• pattern: Регулярное выражение, которому должно соответствовать значение поля ввода (браузер может выполнять валидацию).
• autocomplete: Указывает, должно ли поле иметь автозаполнение браузером (on или off).
• list: Связывает поле ввода с элементом <datalist>, предоставляющим список предустановленных вариантов.

Тег <textarea>

Тег <textarea> используется для создания многострочного текстового поля.

Основные атрибуты <textarea>:

• name: Имя элемента управления.
• id: Уникальный идентификатор.
• class: Классы CSS.
• style: Встроенные стили.
• rows: Указывает видимое количество строк текста.
• cols: Указывает видимую ширину текста (в символах).
• placeholder: Подсказка.
• required: Обязательное поле.
• disabled: Отключенное поле.
• readonly: Поле только для чтения.
• autocomplete: Автозаполнение.
• Содержимое тега: Текст, который будет отображаться в поле по умолчанию.

<textarea name="message" rows="5" cols="30">Введите ваше сообщение здесь...</textarea>

Тег <select>

Тег <select> используется для создания выпадающего списка (или списка с множественным выбором, если используется атрибут multiple). Внутри <select> располагаются теги <option>, определяющие элементы списка.

Основные атрибуты <select>:

• name: Имя элемента управления.
• id: Уникальный идентификатор.
• class: Классы CSS.
• style: Встроенные стили.
• size: Указывает количество видимых элементов списка (если больше 1, отображается как список прокрутки).
• multiple: Булевый атрибут, позволяющий выбирать несколько опций (обычно отображается как список).
• required: Обязательное поле.
• disabled: Отключенный список.
• autocomplete: Автозаполнение.

Тег <option>

Тег <option> определяет элемент в выпадающем списке (<select>).

Основные атрибуты <option>:

• value: Значение, которое будет отправлено на сервер, если этот вариант выбран.
• selected: Булевый атрибут, указывающий, что этот вариант выбран по умолчанию.
• disabled: Булевый атрибут, отключающий этот вариант.
• Содержимое тега: Текст, который будет отображаться пользователю в списке.

<select name="city">
    <option value="kyiv">Киев</option>
    <option value="lviv" selected>Львов</option>
    <option value="odessa">Одесса</option>
</select>

Тег <button>

Тег <button> используется для создания кликабельной кнопки.

Основные атрибуты <button>:

• type: Определяет тип кнопки:
  • submit (по умолчанию): Отправляет форму.
  • reset: Сбрасывает форму.
  • button: Обычная кнопка (обычно используется с JavaScript).
• name: Имя кнопки (может быть отправлено на сервер).
• value: Значение кнопки (может быть отправлено на сервер).
• id: Уникальный идентификатор.
• class: Классы CSS.
• style: Встроенные стили.
• disabled: Отключенная кнопка.
• Содержимое тега: Текст или HTML, отображаемый на кнопке.

<button type="submit">Отправить</button>
<button type="reset">Сбросить</button>
<button type="button" onclick="alert('Клик!')">Нажми меня</button>

Тег <label>

Тег <label> используется для создания метки для элемента управления формы. Связывание метки с элементом управления улучшает доступность (например, клик по метке фокусирует связанный элемент).

Атрибуты тега <label>:

• for: Связывает метку с определенным элементом управления по его id.

<div>
    <label for="username">Имя пользователя:</label>
    <input type="text" id="username" name="username">
</div>
<div>
    <input type="checkbox" id="remember" name="remember">
    <label for="remember">Запомнить меня</label>
</div>

Теги <fieldset> и <legend>

Тег <fieldset> используется для группировки связанных элементов формы, а тег <legend> определяет заголовок для этой группы.

<fieldset>
    <legend>Личная информация</legend>
    <div>
        <label for="name">Имя:</label>
        <input type="text" id="name" name="name">
    </div>
    <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
    </div>
</fieldset>

Отправка данных формы

Когда пользователь заполняет форму и нажимает кнопку отправки (обычно <input type="submit"> или <button type="submit">), браузер собирает данные из всех элементов управления формы (с атрибутом name) и отправляет их на URL-адрес, указанный в атрибуте action тега <form>, используя HTTP-метод, указанный в атрибуте method.

На сервере эти данные могут быть обработаны с использованием различных языков программирования (например, PHP, Python, Node.js).

Понимание HTML-форм и различных элементов управления является essential для создания интерактивных веб-страниц, позволяющих взаимодействовать с пользователями и собирать необходимую информацию.