Элементы HTML-формы

1. Множественный выбор и списки

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

В HTML формы предоставляют несколько способов для создания элементов с возможностью выбора из списка. Наиболее распространенными элементами для этих целей являются <select> и <option>, а также чекбоксы и радио-кнопки.

Выпадающий список: <select> и <option>

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

Одиночный выбор: По умолчанию <select> позволяет выбрать только один вариант.

<label for="country">Выберите страну:</label>
<select id="country" name="country">
  <option value="ru">Россия</option>
  <option value="us">США</option>
  <option value="de">Германия</option>
</select>

<label for="country">Выберите страну:</label>
<select id="country" name="country">
<option value="ru">Россия</option>
<option value="us">США</option>
<option value="de">Германия</option>
</select>

Множественный выбор: Если добавить атрибут multiple, пользователь сможет выбрать сразу несколько вариантов, удерживая клавишу Ctrl (на Windows) или Cmd (на Mac) при клике.

<label for="languages">Выберите языки:</label>
<select id="languages" name="languages" multiple>
  <option value="ru">Русский</option>
  <option value="en">Английский</option>
  <option value="de">Немецкий</option>
</select>

<label for="languages">Выберите языки:</label>
<select id="languages" name="languages" multiple>
<option value="ru">Русский</option>
<option value="en">Английский</option>
<option value="de">Немецкий</option>
</select>

В этом случае данные из нескольких выбранных элементов отправляются на сервер в виде массива значений.

Чекбоксы: <input type="checkbox">

Чекбоксы — это элементы, которые позволяют пользователю выбрать один или несколько вариантов из предложенного списка. Каждый чекбокс создается с помощью тега <input type="checkbox">.

<label><input type="checkbox" name="interests" value="sports"> Спорт</label>
<label><input type="checkbox" name="interests" value="music"> Музыка</label>
<label><input type="checkbox" name="interests" value="travel"> Путешествия</label>

<label><input type="checkbox" name="interests" value="sports"> Спорт</label>
<label><input type="checkbox" name="interests" value="music"> Музыка</label>
<label><input type="checkbox" name="interests" value="travel"> Путешествия</label>

Если у всех чекбоксов одинаковый атрибут name, то при отправке формы данные из каждого отмеченного чекбокса будут отправлены в виде массива.

Радио-кнопки: <input type="radio">

Радио-кнопки позволяют пользователю выбрать только один вариант из группы. Радио-кнопки с одинаковым значением атрибута name объединяются в группу, и пользователь может выбрать только один вариант в этой группе.

<p>Выберите пол:</p>
<label><input type="radio" name="gender" value="male"> Мужской</label>
<label><input type="radio" name="gender" value="female"> Женский</label>

<p>Выберите пол:</p>
<label><input type="radio" name="gender" value="male"> Мужской</label>
<label><input type="radio" name="gender" value="female"> Женский</label>

Радио-кнопки удобны для выбора одного из нескольких фиксированных вариантов, таких как «Да» или «Нет», пол, возрастная группа и т.д.

2. Элементы форм разных типов

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

Телефон (type="tel")

Поле ввода телефонного номера. Этот тип позволяет вводить номера телефонов и, в зависимости от устройства, может вызвать экранную клавиатуру с цифрами на мобильных устройствах.

<label for="phone">Телефон:</label>
<input type="tel" id="phone" name="phone" placeholder="+7 (123) 456-7890">

<label for="phone">Телефон:</label>
<input type="tel" id="phone" name="phone" placeholder="+7 (123) 456-7890">

Поиск (type="search")

Поле для ввода текста, оптимизированное для поиска. Оно может включать кнопку для очистки текста (в зависимости от браузера), и часто стилизуется иначе, чем обычное текстовое поле.

<label for="search">Поиск:</label>
<input type="search" id="search" name="search" placeholder="Введите запрос">

<label for="search">Поиск:</label>
<input type="search" id="search" name="search" placeholder="Введите запрос">

URL (type="url")

Поле для ввода веб-адреса. При попытке отправить форму HTML проверит, что введен правильный формат URL.

<label for="website">Веб-сайт:</label>
<input type="url" id="website" name="website">

<label for="website">Веб-сайт:</label>
<input type="url" id="website" name="website">

Дата (type="date")

Поле для выбора даты. На большинстве современных браузеров автоматически появляется календарь.

<label for="birthday">Дата рождения:</label>
<input type="date" id="birthday" name="birthday">

<label for="birthday">Дата рождения:</label>
<input type="date" id="birthday" name="birthday">

Цвет (type="color")

Поле для выбора цвета. Открывает палитру цветов.

<label for="color">Выберите цвет:</label>
<input type="color" id="color" name="color">

<label for="color">Выберите цвет:</label>
<input type="color" id="color" name="color">

Диапазон (type="range")

Ползунок, который позволяет выбрать числовое значение в заданном диапазоне. Атрибуты min, max и step задают минимальное и максимальное значение, а также шаг изменения.

<label for="volume">Громкость:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="5">

<label for="volume">Громкость:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="5">

Файл (type="file")

Поле для загрузки файлов. Этот тип позволяет пользователю выбрать файл на своем устройстве и прикрепить его к форме для отправки на сервер. Можно задать атрибут accept, чтобы ограничить допустимые типы файлов (например, только изображения или документы).

    
<label for="file">Загрузите файл:</label>
<input type="file" id="file" name="file" accept=".jpg, .jpeg, .png, .pdf">
    
  

    
<label for="file">Загрузите файл:</label>
<input type="file" id="file" name="file" accept=".jpg, .jpeg, .png, .pdf">
    
  

Скрытое поле (type="hidden")

Скрытое поле, которое не отображается на странице и не предназначено для взаимодействия с пользователем. Это поле полезно для передачи данных, которые не нужно показывать, например, идентификаторы, токены и т.д.

<input type="hidden" name="user_id" value="12345">

Кнопка (type="button")

Обычная кнопка, которая может использоваться для запуска JavaScript-функций или других действий. Этот тип не отправляет форму, в отличие от кнопок типа submit.

        
          <button type="button" onclick="alert('Вы нажали на кнопку')">Нажми меня</button>
        
      

        
          <button type="button" onclick="alert('Вы нажали на кнопку')">Нажми меня</button>
        
      

3. Пример

В следующем примере мы создадим форму, которая включает разнообразные типы <input> для различных сценариев ввода:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Дополнительные типы ввода</title>
</head>
<body>
  <form action="/submit" method="post">
    <label for="phone">Телефон:</label>
    <input type="tel" id="phone" name="phone" placeholder="+7 (123) 456-7890" required>

    <label for="search">Поиск:</label>
    <input type="search" id="search" name="search" placeholder="Введите запрос">

    <label for="appt">Выберите время:</label>
    <input type="time" id="appt" name="appt">

    <label for="meeting">Дата и время встречи:</label>
    <input type="datetime-local" id="meeting" name="meeting">

    <label for="month">Месяц и год:</label>
    <input type="month" id="month" name="month">

    <label for="week">Неделя:</label>
    <input type="week" id="week" name="week">

    <label for="volume">Громкость:</label>
    <input type="range" id="volume" name="volume" min="0" max="100" step="10">

    <label for="file">Загрузите файл:</label>
    <input type="file" id="file" name="file" accept=".jpg, .jpeg, .png, .pdf">

    <input type="hidden" name="user_id" value="12345">

    <button type="submit">Отправить</button>
  </form>
</body>
</html>

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Дополнительные типы ввода</title>
</head>
<body>
<form action="/submit" method="post">
<label for="phone">Телефон:</label>
<input type="tel" id="phone" name="phone" placeholder="+7 (123) 456-7890" required>

<label for="search">Поиск:</label>
<input type="search" id="search" name="search" placeholder="Введите запрос">

<label for="appt">Выберите время:</label>
<input type="time" id="appt" name="appt">

<label for="meeting">Дата и время встречи:</label>
<input type="datetime-local" id="meeting" name="meeting">

<label for="month">Месяц и год:</label>
<input type="month" id="month" name="month">

<label for="week">Неделя:</label>
<input type="week" id="week" name="week">

<label for="volume">Громкость:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="10">

<label for="file">Загрузите файл:</label>
<input type="file" id="file" name="file" accept=".jpg, .jpeg, .png, .pdf">

<input type="hidden" name="user_id" value="12345">

<button type="submit">Отправить</button>
</form>
</body>
</html>

Заключение

Дополнительные типы <input> в HTML позволяют создавать формы с учетом конкретных потребностей пользователей и типов данных. Благодаря этим типам форм можно существенно улучшить взаимодействие с пользователями и повысить удобство ввода данных.