Шаблоны HTML-форм

Шаблон HTML-формы — это готовый, повторно используемый блок разметки формы, который можно скопировать в проект и адаптировать под свои нужды. Большинство веб-приложений снова и снова нуждаются в одних и тех же формах — контактной, авторизации, регистрации, обратной связи, — поэтому вместо того чтобы строить каждую с нуля, вы берёте чистый и корректный шаблон и меняете лишь метки, поля и конечную точку отправки.

Работа с шаблонами даёт реальные преимущества:

• Единообразие — все формы имеют одинаковую структуру, поэтому стилизация и валидация ведут себя предсказуемо по всему сайту.
• Скорость — вы пропускаете шаблонный код и сосредотачиваетесь на полях, специфичных именно для вашей формы.
• Доступность по умолчанию — хороший шаблон уже связывает каждый <label> с его элементом управления, группирует связанные поля в <fieldset> и использует правильные типы <input>, обеспечивая корректный опыт для экранных читалок и клавиатурной навигации.
• Меньше ошибок — распространённые проблемы (метка, не связанная ни с чем, отсутствующий name, неправильный тип поля) уже решены.

В этой главе представлены три чистых, валидных, готовых к копированию шаблона — контактная форма, форма входа и форма регистрации — а также краткий справочник по атрибутам, которые обеспечивают их работу.

Ключевые атрибуты форм

Перед шаблонами рассмотрим атрибуты, которые встречаются в каждом из них:

Самое важное правило: каждое поле должно иметь метку, а атрибут for метки должен совпадать с id поля. Именно поэтому <p for="..."> недопустим — атрибут for есть только у <label>.

Шаблон контактной формы

Минимальная контактная форма: имя, электронная почта, сообщение и кнопка отправки. Обратите внимание на поле type="email", которое обеспечивает бесплатную проверку формата в браузере.

<form action="/contact" method="post">
  <fieldset>
    <legend>Contact us</legend>

    <p>
      <label for="contact-name">Name</label>
      <input type="text" id="contact-name" name="name" required>
    </p>

    <p>
      <label for="contact-email">Email</label>
      <input type="email" id="contact-email" name="email" required>
    </p>

    <p>
      <label for="contact-subject">Subject</label>
      <input type="text" id="contact-subject" name="subject">
    </p>

    <p>
      <label for="contact-message">Message</label>
      <textarea id="contact-message" name="message" rows="5" required></textarea>
    </p>

    <button type="submit">Send message</button>
  </fieldset>
</form>

<textarea> используется для многострочного ввода. В отличие от <input>, у него нет атрибута value — его содержимое размещается между открывающим и закрывающим тегами, а атрибут rows задаёт видимую высоту.

Шаблон формы входа

Форма входа остаётся краткой: идентификатор (email или имя пользователя), пароль и необязательный чекбокс «запомнить меня». Поле пароля использует type="password", чтобы символы были скрыты.

<form action="/login" method="post">
  <fieldset>
    <legend>Sign in</legend>

    <p>
      <label for="login-email">Email</label>
      <input type="email" id="login-email" name="email" autocomplete="username" required>
    </p>

    <p>
      <label for="login-password">Password</label>
      <input type="password" id="login-password" name="password" autocomplete="current-password" required>
    </p>

    <p>
      <label>
        <input type="checkbox" name="remember" value="yes"> Remember me
      </label>
    </p>

    <button type="submit">Log in</button>
  </fieldset>
</form>

Для одиночного чекбокса оборачивание текста внутри <label> — распространённый и допустимый паттерн: метка тогда неявно связывается с содержащимся в ней элементом управления, поэтому пара for/id не нужна. Подсказки autocomplete позволяют браузеру и менеджерам паролей корректно заполнять учётные данные.

Шаблон формы регистрации

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

<form action="/register" method="post">
  <fieldset>
    <legend>Create an account</legend>

    <p>
      <label for="reg-name">Full name</label>
      <input type="text" id="reg-name" name="fullname" required>
    </p>

    <p>
      <label for="reg-email">Email</label>
      <input type="email" id="reg-email" name="email" required>
    </p>

    <p>
      <label for="reg-password">Password</label>
      <input type="password" id="reg-password" name="password" autocomplete="new-password" minlength="8" required>
    </p>

    <p>
      <label for="reg-country">Country</label>
      <select id="reg-country" name="country" required>
        <option value="">Choose…</option>
        <option value="us">United States</option>
        <option value="uk">United Kingdom</option>
        <option value="de">Germany</option>
        <option value="other">Other</option>
      </select>
    </p>

    <fieldset>
      <legend>Account type</legend>
      <p>
        <label>
          <input type="radio" name="account" value="personal" checked> Personal
        </label>
        <label>
          <input type="radio" name="account" value="business"> Business
        </label>
      </p>
    </fieldset>

    <p>
      <label>
        <input type="checkbox" name="terms" value="agreed" required> I agree to the terms
      </label>
    </p>

    <button type="submit">Register</button>
  </fieldset>
</form>

Несколько важных моментов:

• Первый <option value=""> является незаполненным плейсхолдером. Поскольку <select> имеет атрибут required, браузер блокирует отправку, пока выбран этот пустой вариант.
• minlength="8" для поля пароля устанавливает минимальную длину без какого-либо JavaScript.
• Вложенный <fieldset> группирует переключатели, а его <legend> служит меткой для всей группы — это важно для пользователей экранных читалок.

Связанные главы

Для более глубокого изучения каждого элемента, использованного выше:

• Тег <form> — контейнер и его атрибуты action/method.
• Тег <input> — все типы input и их атрибуты.
• Тег <label> — связывание меток с элементами управления.
• Тег <fieldset> — группировка связанных полей с помощью <legend>.
• Тег <textarea> — многострочный ввод текста.
• Тег <select> — выпадающие меню и варианты выбора.
• Тег <button> — кнопки отправки и сброса.

Для более широкого обзора работы форм см. HTML-формы.

Практика