Тонкая настройка текстовых полей

При создании или использовании HTML форм часто добавляются различные дополнительные элементы, такие как метки, текст подсказки, валидация и JavaScript. Однако во многих формах не учитываются встроенные возможности, позволяющие с минимальными усилиями улучшить работу с формами.

Если вы когда-нибудь заполняли форму, в которой браузер казался слишком услужливым, возможно, форма могла использовать некоторые из этих встроенных функций. Например, если в форме есть поле URL или SKU продукта, проверка орфографии и автокапитализация скорее мешают, чем помогают. В этом случае можно сообщить браузеру, что их не следует применять для данного поля.

У нас есть spellcheck, autofocus, autocapitalize, autocomplete и autocorrect (атрибут autocorrect нестандартен и поддерживается только в Safari.) атрибуты, которые можно добавить в поля ввода для улучшения пользовательского опыта. Все они указывают браузеру и расширениям, как работать с полем ввода. И при этом не требуют использования JavaScript!

Документация MDN по этим атрибутам очень подробна, поэтому здесь будут рассмотрены лишь основы с некоторыми примерами.

spellcheck

Технически атрибут spellcheck не требует значения, но я предпочитаю указывать явное значение. Можно установить значение true или false, но даже пустая строка будет означать включение проверки. Поведение проверки орфографии по умолчанию зависит от браузера, поэтому может быть целесообразно явно включать или отключать её для каждого поля ввода. Однако в конечном счёте, это всего лишь предложение браузеру, и оно может быть не выполнено.

Стоит также отметить, что атрибут spellcheck можно применить к содержащему его элементу form, чтобы он применился ко всем дочерним полям ввода. Это может упростить включение или отключение проверки орфографии по умолчанию и переопределение значения для определённых полей без необходимости указывать его для каждого поля.

<form action="/check" spellcheck="true">
  <!-- Наследуется от содержащей `form` -->
  <input type="text">
  <!-- Явно включён без значений -->
  <input type="text" spellcheck>
  <!-- Явно включён с `true` -->.
  <input type="text" spellcheck="true">
  <!-- Явно отключён с `false` -->.
  <input type="text" spellcheck="false">
</form>

autofocus

Атрибут autofocus может быть сложным, потому что одновременно он может быть только у одного элемента за раз. Кроме того, поскольку программы чтения с экрана будут переходить к элементу с автофокусом, это может дезориентировать пользователя, если он этого не ожидает. Лучше использовать его осторожно, особенно если элемент находится достаточно далеко на странице и может вызвать прокрутку.

<form action="/focus">
  <input type="text" autofocus>
</form>

autocapitalize

Атрибут autocapitalize предоставляет несколько способов сообщить браузеру, как с ним обращаться. Как и spellcheck, он также может быть указан на содержащем элементе form, для применения ко всем его дочерним полям ввода (В полях ввода URL, email и password никогда не будет использоваться автокапитализация). Как и в случае со spellcheck, поведение по умолчанию зависит от браузера, поэтому может быть целесообразным явное включение или отключение этой функции для каждого поля ввода.

Существует четыре варианта поведения autocapitalize:

• none или off — Отключить его и не выделять ничего заглавными буквами. (Значение по умолчанию для Firefox)
• sentences или on — Писать с заглавной буквы только первую букву в каждом предложении. (Значение по умолчанию для Chrome и Safari)
• characters — Писать с заглавной буквы каждый символ.
• words — Писать с заглавной буквы только первый символ каждого слова.

<form action="/capitalize" autocapitalize="true">
  <!-- Наследуется от содержащей `form`. -->
  <input type="text">
  <!-- Явно включено -->
  <input type="text" autocapitalize="on">
  <input type="text" autocapitalize="sentences">
  <!-- Явно отключено -->
  <input type="text" autocapitalize="off">
  <input type="text" autocapitalize="none">
  <!-- Все символы пишутся с заглавной буквы -->
  <input type="text" autocapitalize="characters">
  <!-- Первый символ каждого слова пишется с заглавной буквы -->
  <input type="text" autocapitalize="words">
</form>

autocomplete

Атрибут autocomplete немного более продвинут, чем другие, и поддерживает более широкий диапазон значений, основанный на типе содержимого, ожидаемого в поле (обязательно просмотрите стандарты WHATWG для понимания того, как всё это работает). Его можно указать на элементе form, чтобы он применялся ко всем дочерним полям ввода, но также можно указать на отдельных полей ввода, чтобы отменить значение на уровне form.

Простейшие варианты для autocomplete — on или off, но когда используется on, это фактически позволяет браузеру решать, как с ним обращаться. В дополнение к этим значениям можно выбрать одно из списка конкретных значений, чтобы дать браузеру подсказку об ожидаемом типе содержимого. К ним относятся такие части имён, как given-name, family-name, nickname, и многие, многие другие. Рекомендую вам ознакомиться с полным списком, чтобы понять, есть ли среди них те, которые могут быть полезны для ваших форм.

<form action="/autocomplete">
  <!-- У нас есть бесконечные вариации частей имени, но полное имя (full name) - это просто. -->
  <input name="full-name" autocomplete="name">
  <!-- Можно указать одноразовые коды/пароли для автозаполнения. -->
  <input type="password" name="one-time-code" autocomplete="one-time-code">
  <!-- Можно указать, когда поля паролей будут соответствовать текущему или новому значению. -->
  <input type="password" name="new-password" autocomplete="new-password">
  <input type="password" name="current-password" autocomplete="current-password">
</form>

Помимо конкретных типов значений, можно использовать префиксы section- для группировки полей. Наиболее распространённым примером может быть форма, содержащая адреса для выставления счета и доставки. Фактически, атрибут autocomplete явно поддерживает значения billing и shipping, чтобы различать эти два типа. Другим примером может быть форма, в которой необходимо указать свои данные и данные гостя. В этом случае форма, скорее всего, будет содержать несколько полей с именами, и значение section-guest может помочь обеспечить определённый уровень подсказки браузеру.

<form action="/autocomplete" capitalize="true">
  <fieldset>
    <legend>Billing Address</legend>
    <label for="billing-address-one">Address Line 1</label>
    <input id="billing-address-one" name="billing-address-one" autocomplete="section-billing billing address-line1">
    <label for="billing-address-two">Address Line 2</label>
    <input id="billing-address-two" name="billing-address-two" autocomplete="section-billing billing address-line2">
    <!-- ... -->
  </fieldset>
  <fieldset>
    <legend>Shipping Address</legend>
    <label for="shipping-address-one">Address Line 1</label>
    <input id="shipping-address-one" name="shipping-address-one" autocomplete="section-shipping shipping address-line1">
    <label for="shipping-address-two">Address Line 2</label>
    <input id="shipping-address-two" name="shipping-address-two" autocomplete="section-shipping shipping address-line2">
    <!-- ... -->
  </fieldset>
</form>

autocorrect

И последнее, но не менее важное: у нас есть autocorrect — точнее, он есть у тех, кто пользуется Safari. Он может иметь значение on или off, и хотя это нестандартный атрибут, его достаточно легко добавить, и он поможет всем, использующим Safari.

<!-- Поскольку в SKU продукта не используются словарные слова, не используйте автокоррекцию. -->
<input type="text" name="sku-code" autocorrect="off">
<!-- Автокоррекция потенциально может быть полезной для объёмной прозы -->
<textarea name="summary" autocorrect="on"></textarea>

Заключение

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