Формы и элементы ввода

Что такое веб-форма

Веб-формы (или HTML-формы) являются одним из основных элементов взаимодействия между пользователем и сайтом или приложением.

Виджеты

HTML-формы состоят из одного или нескольких элементов управления форм (иногда их также называют виджетами) и некоторых дополнительных элементов для структурирования формы.

Элементами управления могут быть однострочные или многострочные текстовые поля, выпадающие списки, кнопки, чекбоксы, радиокнопки и другие.

Проектирование формы

Набросок

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

Верстка формы

Создание форм начинается с элемента <form>:

        <form action="/my-handling-form-page" method="post">
        	<!-- Здесь будут элементы формы -->
        </form>
    

Атрибуты <form>

• Атрибут action определяет адрес, куда должны быть посланы данные после отправки формы.
• Атрибут method указывает, какой HTTP-метод будет использован при передаче данных (это может быть get или post).

Поля контактной формы

Форма состоит из трёх текстовых полей, каждое их которых связано с HTML-элементом <label>:

1. Поле для ввода имени — это тег <input>, где в поле type указано text;
2. Поле для ввода e-mail — тот же тег, но в type будет написано email;
3. Поле для ввода сообщения — тег <textarea>, многострочное текстовое поле.

        <form action="/my-handling-form-page" method="post">
            <label for="name">Имя:</label>
            <input type="text" id="name">
            <label for="mail">E-mail:</label>
            <input type="email" id="mail">
            <label for="msg">Сообщение:</label>
            <textarea id="msg"></textarea>
        </form>
    

Разница текстовых полей

Обратите внимание на разницу синтаксиса у HTML-элементов <input> и <textarea>:

        <input type="text" value="текст по умолчанию" />
         
        <textarea>
        	текст по умолчанию
        </textarea>
    

Отправка данных на сервер

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

Типы кнопок

HTML-элемент <button>  принимает атрибут type, который может быть равен одному из трёх значений: submit, reset или button:

• submit - оправляет данные формы;
• reset - очищает все поля формы;
• button - не делает ничего;

Добавление имен полей

        <form action="/my-handling-form-page" method="post">
            <label for="name">Имя:</label>
            <input type="text" id="name" name="user_name">
            <label for="mail">E-mail:</label>
            <input type="email" id="mail" name="user_mail">
            <label for="msg">Сообщение:</label>
            <textarea id="msg" name="user_message"></textarea>
        </form>
    

Структурирование форм

Группировка полей

        <form>
          <fieldset>
            <legend>Размер стакана фруктового сока</legend>
              <label for="size_1">Маленький</label>
              <input type="radio" name="size" id="size_1" value="small">
              ...
          </fieldset>
        </form>
    

Пример

Подписи к полям

        <label for="name">Имя:</label>
        <input type="text" id="name" name="user_name">
    

Или так:

        <label for="name">
          Имя: <input type="text" id="name" name="user_name">
        </label>
    

Стандартные виджеты

Текстовые поля

Однострочные текстовые поля создаются с использованием элемента <input> чей атрибут type имеет значение text.

        <input type="text" id="comment" name="comment"
               value="Это текстовое поле"></code>
    

Текстовые поля

Многострочный текстовый виджет

Отдельно остановимся на виджете, позволяющем ввести сразу несколько строк текста:

        <textarea cols="30" rows="10">
        	Это многострочный текст
        </textarea>
    

Drop-down виджеты

Виджет, позволяющий выбрать один вариант из выпадающего списка:

        <select id="simple" name="simple">
          <option>Банан</option>
          <option>Вишня</option>
          <option selected>Лимон</option>
        </select>
    

Drop-down виджеты

Виджет с возможностью выбрать сразу несколько вариантов:

        <select multiple id="multi" name="multi">
          <option>Банан</option>
          <option>Вишня</option>
          <option>Лимон</option>
        </select>
    

Объединение input/text и опций

Можно объединить текстовое поле с возможностью выбора опций. С подобным вы наверняка встречались в поисковиках.

        <label for="myFruit">Какой твой любимый фрукт?</label>
        <input type="text" id="myFruit" list="mySuggestion">
        <datalist id="mySuggestion">
          <option>Яблоко</option>
          <option>Банан</option>
          <option>Лимон</option>
          <option>Персик</option>
          <option>Груша</option>
        </datalist>
    

Чекбокс:

        <input type="checkbox" checked id="carrots" 
               name="carrots" value="carrots">
    

Радиокнопка:

        <input type="radio" checked id="carrots" 
               name="carrots" value="carrots">
    

Объединение радиокнопок

        <fieldset>
          <legend>Что будем заказывать?</legend>
              <label for="soup">Суп</label>
              <input type="radio" id="soup" name="meal" value="soup">
              <label for="curry">Крылышки из KFC</label>
              <input type="radio" id="curry" name="meal" value="curry">
              <label for="pizza">Пицца</label>
              <input type="radio" id="pizza" name="meal" value="pizza">
        </fieldset>
    

Продвинутые виджеты

• текстовое поле с возможностью вводить только цифры;
• виджеты, где можно выбрать значения в определенном диапазоне;
• виджет для выбора даты;
• виджет для выбора цвета;
• виджет для загрузки файла;

<input/number>

Синтаксис поля для ввода цифр:

        <input type="number" name="age" id="age"
               min="1" max="10" step="2">
    

• min - минимальное значение;
• max - максимальное значение;
• step - шаг изменения значения.

Ползунки

        <input type="range" name="beans" id="beans"
               min="0" max="500" step="10">
    

Подобный виджет позволяет выбирать между вариантами при помощи мыши или стрелок на клавиатуре.

Дата и время

        <input type="datetime-local">  <!-- Выбрать дату -->
        <input type="month">  <!-- Выбрать месяц -->
        <input type="time">  <!-- Выбрать время -->
        <input type="week">  <!-- Выбрать неделю -->
    

Загрузка файла

        <input type="file" name="file" id="file"
               accept="image/*" multiple>