Autocapitalize html что это
Перейти к содержимому

Autocapitalize html что это

  • автор:

autocapitalize

Некоторые методы ввода текста, например с помощью виртуальных клавиатур на мобильных устройствах, а также голосовой ввод, часто помогают пользователям автоматически писать первые буквы в предложении заглавными. Виртуальная клавиатура, которая реализует автокапитализацию, может автоматически переключиться на отображение заглавных букв (но разрешить пользователю переключать ее обратно в нижний регистр). Другие типы ввода, например голосовой ввод, могут выполнять автокапитализацию таким образом, чтобы не давать пользователям возможность сразу вмешаться. Атрибут autocapitalize позволяет контролировать такое поведение. Атрибут autocapitalize не влияет на поведение при вводе с помощью физической клавиатуры. (По этой причине, а также из-за возможности последующей правки нельзя полагаться на атрибут без проверки ввода.) Атрибут autocapitalize никогда не приводит к активации автокапитализации для элементов input , с типом url , email или password .

Синтаксис

Значения:

  • off или none : не применяется автоматическая активация (все буквы по умолчанию — строчные).
  • on или sentences : первая буква каждого предложения по умолчанию имеет заглавную букву, все остальные буквы по умолчанию строчные.
  • words : первая буква каждого слова по умолчанию имеет заглавную букву, все остальные буквы по умолчанию строчные.
  • characters : все буквы должны быть по умолчанию в верхнем регистре.

Совместимость браузеров

Настольные браузеры

Базовая поддержка ? ? ? ? ? ?

Атрибут autocapitalize

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

Атрибут autocapitalize не влияет на поведение браузера при наборе текста на физической клавиатуре. Результат будет заметен при наборе текста на виртуальной клавиатуре мобильных устройств или голосовом вводе. При этом происходит изменение регистра букв на самой клавиатуре, а не преобразование введённого текста.

Для полей следующего типа атрибут autocapitalize работать не будет, даже при его наличии.

Синтаксис

autocapitalize="off | none | on | sentences | words | characters"

Значения

off или none Преобразования букв не происходит, все они по умолчанию остаются строчными. on или sentences Первая буква каждого предложения должна быть заглавной, остальные буквы по умолчанию остаются строчными. words Первая буква каждого слова в предложении должна быть заглавной, остальные буквы по умолчанию остаются строчными. characters Все буквы по умолчанию должны быть заглавными.

Пример

Результат данного примера на мобильном устройстве показан ни рис. 1.

Ввод текста на виртуальной клавиатуре

Рис. 1. Ввод текста на виртуальной клавиатуре

Спецификация

Спецификация Статус
HTML Living Standard Живой стандарт

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

79 43 30 111
43 111 40 10.3

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

Отключение автозаглавной буквы в полях форм iOS

Для отключения автоматического перехода первой буквы в верхний регистр в HTML-формах на устройствах iOS, используйте атрибут autocapitalize=»none» . Это поможет предотвратить автоматическое изменение регистра первой буквы при наборе текста с клавиатуры iOS.

Скопировать код

При работе со старыми версиями iOS или с полями, не предназначенными для ввода email-адресов, комбинируйте использование autocorrect и autocapitalize :

Скопировать код

В полях, предназначенных для ввода email-адресов, type=»email» отключает капитализацию по умолчанию на версиях iOS, начиная с пятой:

Скопировать код

Если вы работаете в React Native, регулирование этого параметра осуществляется с помощью следующих свойств:

Скопировать код

Тонкости отключения автокапитализации

Работа со старыми версиями iOS

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

Особенности работы с React Native

При работе с React Native учтите важность использования camelCase при написании свойств, таких как autoCapitalize и autoCorrect, и осознайте, что обработка свойств ввода может отличаться из-за специфики платформы.

Визуализация

Представьте функцию автоматического перевода в верхний регистр на iOS как робота ( �� ), который делает каждую начальную букву огромной. Зачастую такие роботы облегчают вам жизнь, но иногда хочется взять контроль на себя.

Как довести работу с до идеала

У всех у нас были моменты, когда при использовании автозаполнения мы попадали в полный беспорядок. Одни поля остаются пустыми, другие заполняются неверными значениями, а еще одни полагаются на placeholder’ы, которые должны нам сказать то, чем же должна быть заполнена форма. Правильно ли вы в таком случае введете содержимое формы?

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

Делаем разметку правильно

Хорошая форма начинается с правильной разметки.

Выключаем автокоррекцию

Выключайте autocorrect , когда он вам не нужен. Очень надоедает, когда система пытается что-то исправить, особенно если она не знает что. Это могут быть имена, названия улиц, компаний и городов. Всякий раз, когда вы пишете , спросите себя: является ли потенциальное значение чем-то из общепринятого словаря? Если ответ — нет, то выключайте автокоррекцию. Вам это не нужно и пользователю уж темболее.

input autocorrect="off" . >

2. Выключайте autocapitalise

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

input autocapitalize="off" >

3. Используйте autocomplete

Этот атрибут позволяет вам контролировать то, как браузер должен заполнять заданные поля формы. Это ключ к правильно работающему автозаполнению. Популярными значениями для атрибута являются: name , email , username , new-password и current-password , но лист значений которые вы можете использовать может быть буквально бесконечным.

input autocomplete="tel" > input autocomplete="email" >

4. Используйте required

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

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

Так же рекомендуется указывать на обязательность заполнения поля, добавляя подсказку для пользователя рядом с input или label . И даже тогда, когда все поля требуют заполнения.

input required . >

5. Используйте type и pattern

Сенсорные устройства могут показывать разные, оптимизированные клавиатуры для каждой формы ввода, сразу же, как вы укажете им это сделать. Для примера: цифровая клавиатура на iPhone 6S имеет область-клика на 521% больше, чем дефолтная клавиатура. И это просто идеально для инпутов, которые принимаются только числовые значения.

Оптимизированные шаблоны клавиатуры могут быть вызваны при использовании type и pattern атрибутов. Есть также новый атрибут inputmode , но пока что он не может использоваться во многих браузерах.

Используйте pattern=»[0–9]*» или inputmode=»numeric» для вызова числовой клавиатуры.

Используйте type=»email» , чтобы вызвать email клавиатуру.

Используйте type=»url» , чтобы вызвать url клавиатуру.

input pattern="\d*" . > input type="email" . > input type="url" . >

5. Используйте лейблы

Дизайнеры и разработчики любят пропускать , так как это делает форму чище, а код и стилизацию проще, но он играет важную роль для пользователей. Контроль формы, который полагается только на placeholder, является неидентифицируемым при заполнении. Это является особенной проблемой, тогда когда форма была заполнена с использованием автозаполнения: пользователи не могут сказать, заполнен ли input правильно, пока они не удалят введенное значение.

label for="email">E-Maillabel> input id="email" >

6. Используйте placeholder

Placeholder это подсказка для пользователя. Они всегда должны показывать потенциальное значение в ожидаемом формате. Такие placeholder как +49 или https:// идеальны для того, чтобы сказать пользователям, что они должны начать вводить номера телефонов с кода страны, а ссылки с протокола.

input placeholder="Jane Doe" >

7. Используйте disabled

Используйте этот атрибут, чтобы деактивировать поля ввода. Не класс. Я повторяю: не класс. disabled может быть применен ко всем контроллерам форм и говорить браузеру, чтобы пользователь не использовал этот элемент. Добавление дополнительного класса в плане стилизации это ок, но помните, что вы можете также выбрать элемент с использованием input[disabled] в CSS.

select disabled> option value="a">Aoption> option value="b">Boption> select> select> option disabled>Choose A or Boption> option value="a">Aoption> option value="b">Boption> select> input disabled . > textarea disabled . >textarea>

Получаем правильное юзабилити

Правильная разметка это уже хорошая база для хорошего юзабилити. autocorrect , autocapitalize и autocomplete упрощают заполнение формы, используя type и pattern , вы точно будете знать, что сенсорные устройства показывают оптимизированную клавиатуру и placeholder дает пользователям знать, что им нужно ввести. Но этого недостаточно. Все еще есть множество моментов, в которых вы можете ошибиться, когда дело доходит до стилизации и общей структуры. Вот три отличных ресурса, чтобы улучшить UX ваших форм.

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

E-commerce UX исследование — раскрывает то, какие дизайн-проекты вызывают проблемы с юзабилити и как создать опыт взаимодействия в e-commerce по последнему слову техники. Бесплатные статье также содержат некоторые отличные посты, относящиеся к формам и инпутам.

Делаем стилизацию правильно

Стилизация формы это кошмар. Элементы даются со своим собственным стилем, который варьируется от системы к системе и от браузера к браузеру. Есть даже многостраничное руководство на MDN, объясняющее то, почему так тяжело стилизовать виджеты с CSS?

Я провел очень много времени за стилизацией форм, так что принял решение сделать базу дефолтных стилей для распространенных input элементов: formbase устраняет кроссбраузерные баги, несоответствия между системами и применяет красивую дефолтную стилизацию для нескольких элементов input. Ноль зависимостей, без JavaScript, только CSS.

Альтернатива formbase это Boilerform: маленький бойлерплэйт из HTML и CSS, который начался с подачи Chris Coyier (A Boilerform Idea) Она уже превратилась в проект, который пытается сделать работу с формами безболезненной.

Примеры разметки

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

Имя

Совет: всегда используйте одно имя, вместо разделения одного целого инпута.

label for="name">Namelabel> input id="name" name="name" type="text" autocorrect="off" autocomplete="name" placeholder="Jane Doe">

Компания

label for="company">Companylabel> input id="company" name="company" type="text" autocorrect="off" autocomplete="organization" placeholder="World Wide Web Consortium">

Почтовый код

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

label for="postalcode">Postal codelabel> input id="postalcode" name="postalcode" type="text" pattern="\d*" novalidate autocorrect="off" autocomplete="postal-code" placeholder="02139">

Город

label for="city">Citylabel> input id="city" name="city" type="text" autocorrect="off" autocomplete="address-level2" placeholder="Cambridge">

Улица

label for="country">Country namelabel> input id="country" name="countryname" type="text" autocomplete="country" placeholder="Germany">

Телефон

label for="tel">Phonelabel> input id="tel" name="tel" type="tel" autocorrect="off" autocomplete="tel" placeholder="+1 617 253 5702">

E-mail

label for="email">E-Maillabel> input id="email" name="email" type="email" autocapitalize="off" autocorrect="off" autocomplete="email" placeholder="janedoe@example.com">

Дата рождения

label for="birthday">Birthdaylabel> input id="birthday" name="birthday" type="date" autocorrect="off" autocomplete="bday" placeholder="YYYY-MM-DD" disabled>

Email подписка!

  • Интересные новости
  • Полезные статьи
  • Сниппеты кода
  • Много интересного

Интересные посты:

αV stasonmars, 2020

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *