Form html input: Атрибут form | htmlbook.ru

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

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

Элемент формы <input>

<input> — это элемент управления html-формы, который отображает объект (поле ввода), указанный в атрибуте type.

Элемент формы <input> можно рассматривать как коллекцию дочерних элементов управления (полей ввода) различных типов, предназначенных для ввода данных на веб-странице.

Синтаксис указания типа возвращаемого объекта для элемента <input>:

<input type=»type»>

Типы элемента <input>

Все типы элемента <input>, предназначенные для использования в html:

Тип элемента <input>	Возвращаемый объект
button	командная кнопка, запускающая какой-либо сценарий
checkbox	флажок, позволяющий выбрать несколько вариантов из предложенных, в том числе ноль вариантов
color	поле с палитрой, позволяющей выбрать цвет
date	поле со средством выбора даты (календарем)
datetime-local	поле со средством выбора даты и времени
email	поле для ввода email, который может автоматически проверяться при отправке
file	кнопка, открывающая диалог выбора файла, и поле для отображения выбранного файла
hidden	скрытое поле для служебной информации, которое не отображается на веб-странице
image	кнопка для отправки данных формы на обработку в виде изображения
month	поле со средством выбора месяца и года
number	поле со счетчиком для выбора чисел
password	поле для ввода пароля с маскировкой символов звездочками или кружками
radio	переключатель, позволяющий выбрать только один вариант из нескольких
range	элемент управления для ввода числа в виде отрезка с ползунком
reset	кнопка сброса, возвращающая все значения элементов формы к значениям по умолчанию
search	поле поиска — обычное текстовое поле, но с кнопкой очистки содержимого
submit	кнопка для отправки данных формы на обработку
tel	поле для номера телефона, которому можно задать шаблон для проверки введенного значения
text	однострочное текстовое поле (тип элемента <input> по умолчанию)
time	поле со средством выбора времени
url	поле для ввода URL-адреса, которое, в зависимости от поддержки браузера, может автоматически проверяться при отправке
week	поле со средством выбора недели и года

Стоит отметить, что отдельные из перечисленных выше типов элемента <input>, поддерживаются не всеми браузерами.

Несмотря на то, что скрытое поле hidden не отображается на веб-странице, оно доступно и может быть отредактировано с помощью инструментов разработчика любого браузера или функции «Просмотр исходного кода».

Атрибуты элементов управления

Основные атрибуты элемента <input> и других элементов управления, предназначенные для использования в html:

Атрибут	Описание
autofocus	указывает, что поле ввода должно автоматически получать фокус при загрузке веб-страницы
checked	указывает, что поле ввода должно быть выбрано при загрузке веб-страницы (для type="checkbox" и type="radio" )
disabled	отключает поле ввода
max	максимальное значение для поля ввода
maxlength	максимальное количество символов для поля ввода
min	минимальное значение для поля ввода
multiple	разрешает вводить в поле ввода более одного значения (для type="email" и type="file" )
pattern	регулярное выражение для проверки введенного значения в поле ввода
placeholder	подсказка, описывающая ожидаемое значение поля ввода
readonly	указывает, что поле ввода доступно только для чтения
required	указывает, что поле ввода является обязательным для заполнения
size	ширина поля ввода в символах
step	определяет шаг (интервал чисел) для числовых полей ввода
value	значение по умолчанию для поля ввода

Для элемента type="image" есть атрибуты height и width, которые задают высоту и ширину изображения.

Примеры

Для проведения тестов с элементами управления формы, используйте файл test.html.

Пример 1

Выбор цвета с помощью элемента ввода <input type="color">, определение числового значения выбранного цвета и запись его в элементы формы <output> и <input>:

1 2 3 4 5 6

<form> <p>Нажмите и выберите цвет: <input type=»color» name=»coior1″></p> <p>Вывод значения цвета в элемент output: <output name=»out1″>0</output></p> <p>Вывод значения цвета в элемент input: <input name=»inp1″ size=»6″ value=»0″></p> <button type=»button»>Вывести значение цвета</button> </form>

Результат:

Нажмите и выберите цвет:

Вывод значения цвета в элемент output: 0

Вывод значения цвета в элемент input:

Пример 2

Автоматический вывод значения элемента управления <input type="range"> в элемент формы <input>:

1 2 3 4 5 6

<form oninput=»inp1. value=range1.value»> <p>Передвиньте ползунок элемента range:</p> <p>-100 <input type=»range» name=»range1″ min=»-100″ max=»100″ value=»0″> 100</p> <p>Значение элемента range: <input name=»inp1″ size=»6″ value=»0″></p> <input type=»reset»> </form>

Результат:

Передвиньте ползунок элемента range:

-100 100

Значение элемента range:

Кнопка «Сбросить» (элемент <input type="reset">) вернет всем элементам управления формы значения по умолчанию.

Пример 3

Выбор значения из списка с помощью переключателя и автоматическое отображение значения выбранного элемента в текстовом поле <input>:

1 2 3 4 5 6 7 8 9

<form oninput=»inp1.value=rad1.value»> <p>Выберите слово из списка:<p> <p><input type=»radio» name=»rad1″ value=»Бокал»> Бокал<p> <p><input type=»radio» name=»rad1″ value=»Ведро»> Ведро<p> <p><input type=»radio» name=»rad1″ value=»Кубик»> Кубик<p> <p><input type=»radio» name=»rad1″ value=»Лунка» checked> Лунка<p> <p><input type=»radio» name=»rad1″ value=»Ступа»> Ступа<p> <input name=»inp1″ value=»Лунка»> </form>

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

С помощью атрибута checked значением блока переключателей по умолчанию выбрана опция со словом «Лунка».

Поле для ввода текста | HTML

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

Начиная со стандарта HTML5 список полей пополнился множеством новых вариантов. Базовыми типами инпутов являются:

• Текст
• Пароли
• Чекбоксы
• Радио кнопки

Самый простой способ использования <input> — создание текстового поля для ввода. Именно <input>

присутствует во всех полях поиска. Чтобы создать простое текстовое поле для ввода данных, необходимо внутрь формы добавить непарный тег <input> и указать у него атрибут type со значением text:

<form>
  <input type="text">
</form>

Тег label

Поле создано, но совершенно непонятно что там вводить: имя? фамилию? код от сейфа? Чтобы указать назначение поля, используется тег <label>. Это парный тег, который напоминает параграф, но относится именно к описанию поля формы.

<form>
  <label>Введите имя</label>
  <input type="text">
</form>

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

Для связи label

используется один из двух вариантов:

• Связь по атрибуту id. Для этого у тега <input> указывается атрибут id с произвольным именем, а у <label> добавляется атрибут for с таким же именем, как и значение id у элемента input

<form>
  <label for="name">Введите имя</label>
  <input type="text">
</form>

• Связь через вложенность. Вы обратили внимание, что <label> — это парный тег? Для связи можно вложить input внутрь label, тогда они автоматически свяжутся друг с другом

<form>
  <label>Введите имя
    <input type="text">
  </label>
</form>

Атрибут placeholder

Встречаются ситуации, когда для поля есть описание, но совершенно непонятно, в каком формате нужно заполнить данные.

Например, вначале указать имя, а потом фамилию, или наоборот? Чтобы помочь пользователю используется атрибут placeholder у тега <input>. Значение этого атрибута будет выведено внутри текстового поля.

<form>
  <label for="name">Введите имя и фамилию</label>
  <input type="text" placeholder="Иван Иванов">
</form>

Введите имя и фамилию

Другие текстовые поля

Замечали, что при вводе паролей, браузер автоматически проставляет звёздочки вместо показа символов? Этого можно добиться указав значение password для атрибута type:

<form>
  <label for="pin">Введите пинкод</label>
  <input type="password" placeholder="1234">
</form>

Введите пинкод

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

• email
• number
• search
• tel
• url

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

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

Задание

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people. Внутри формы создайте 2 текстовых поля

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

форм | HTML Dog

Формы используются для сбора данных, вводимых пользователем. Их можно использовать, например, в качестве интерфейса для веб-приложения или для отправки данных через Интернет.

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

Основные теги, используемые в HTML формах: form , input , textarea , select и option .

форма

форма определяет форму и внутри этого тега, если вы используете форму для отправки пользователем информации (что мы предполагаем на этом уровне), атрибут action необходим, чтобы сообщить форме, где будет ее содержимое. отправлено в.

Атрибут method сообщает форме, как данные в нем будут отправлены, и может иметь значение получить , что по умолчанию, и зафиксировать информацию формы на веб-адресе, или отправить , который (по существу) невидимо отправляет информацию формы.

get используется для более коротких фрагментов неконфиденциальной информации — например, вы можете увидеть информацию, которую вы отправили в поиске на веб-сайте, в веб-адресе его страницы результатов поиска. post используется для более длинных и безопасных сообщений, например, в контактных формах.

Итак, элемент формы будет выглядеть примерно так:

Новый раздел примеров! Посмотрите весь этот код в действии и поэкспериментируйте с ним.

ввод

Тег input — папочка мира форм. Он может принимать множество обличий, наиболее распространенные из которых описаны ниже (см. справочную страницу ввода для всей сумасшедшей семьи):

• type="text" > или просто — стандартное текстовое поле. Это также может иметь атрибут со значением , который устанавливает исходный текст в текстовом поле.
• type="password" > аналогично текстовому полю, но символы, вводимые пользователем, будут скрыты.
• type="checkbox" > — это флажок, который может включать и выключать пользователь. Это также может иметь проверил атрибут ( проверил > — атрибут не требует значения), и делает начальное состояние флажка как бы включенным.
• type="radio" > аналогично флажку, но пользователь может выбрать только один переключатель в группе. Это также может иметь проверенный атрибут .
• type="submit" > — это кнопка, при выборе которой будет отправлена ​​форма. Вы можете управлять текстом, который появляется на кнопке отправки, с помощью значение атрибут, например .

Обратите внимание, что, как и теги img и br , тег input , который не окружает какой-либо контент, не требует закрывающего тега.

текстовая область

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

Большое количество текста
 

Любой текст, который вы решите поместить между открывающим и закрывающим тегами (в данном случае «большое количество текста»), будет формировать начальное значение текстовой области.

выберите

Тег select работает с тегом option для создания раскрывающихся окон выбора.

<выбрать>
    Вариант 1
    Вариант 2
    Вариант 3

 

При отправке формы будет отправлено значение выбранного параметра. Это значение будет текстом между выбранным открывающим и закрывающим тегом опции, если явное значение не указано с атрибутом value , и в этом случае вместо этого будет отправлено это. Так, в приведенном выше примере, если выбран первый элемент, будет отправлен «Вариант 1», если выбран третий элемент, будет отправлен «третий вариант».

Аналогично проверенному атрибуту флажков и переключателей, 9Тег 0009 option также может иметь атрибут selected , чтобы начать с одного из уже выбранных элементов, например. Грызуны будет предварительно выбирать «Грызуны» из элементов.

Имена

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

Контактная форма для Ноева ковчега, например, может выглядеть примерно так, как показано ниже. (Примечание: эта форма не будет работать, если нет файла «contactus.php», который указан в атрибуте действия тега формы для обработки отправленных данных).

    
Имя:
    

    
Виды:
    

    
    
Комментарии: 
    
Ваши комментарии
    
Вы:
    
 Мужчина
    
 Женщина
    
 Гермафродит
    
 Асексуалы
    


 

Фух.

Проблема поддержки браузера, о которой вы не знали — Smashing Magazine

• Чтение: 13 мин. формы, Браузеры
• Поделиться в Twitter, LinkedIn

Об авторе

Аарон — инженер пользовательского интерфейса из Канзас-Сити. Помимо своей постоянной работы в DEG, он является соавтором inputtypes.com, утилиты для тестирования экранных… Больше о Аарон ↬

Низкая форма ввода. Он был частью HTML с тех пор, как HTML имел формальную спецификацию; но до HTML5 разработчикам мешали его ограниченные типы и атрибуты. Однако по мере того, как использование смартфонов и их экранных клавиатур процветало, средства ввода приобрели новую и невероятно важную роль, но они также пронизаны несоответствиями браузеров и устройств. Восемь оригинальных типов ввода были гениальны в своей простоте. (ну ладно, может не очень хорошо состарился.) Подумайте об этом: вставив один элемент в свою разметку, вы можете указать любому веб-браузеру отображать элемент управления взаимодействием, и вы можете полностью изменить это взаимодействие — от текстового поля до флажка и переключателя — просто изменив ключевое слово. . Теперь представьте себе мир, в котором создание этих взаимодействий означает также создание настраиваемых элементов управления взаимодействием, и вы начинаете понимать, насколько само собой разумеющимися на самом деле являются входные данные.

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

Восемь оригинальных типов ввода были гениальны в своей простоте. (Ну, хорошо, может быть, не очень хорошо устарел.)

Дополнительная литература на SmashingMag:

• Проблема элементов формы CSS
• Автоматическое сохранение ввода пользователя в ваших формах
• Как я закончил с Element Queries
• Формы на мобильных устройствах: современные решения

Подумайте об этом: вставив один элемент в свою разметку, вы можете указать любому веб-браузеру отображать элемент управления, и вы можете полностью изменить это взаимодействие — от текстового поля до флажка и переключателя — просто изменив ключевое слово. Теперь представьте себе мир, в котором создание этих взаимодействий означает также создание настраиваемых элементов управления взаимодействием, и вы начинаете понимать, насколько само собой разумеющимися на самом деле являются входные данные.

Еще после прыжка! Продолжить чтение можно ниже ↓

К сожалению, даже Тим Бернерс-Ли и компания не могли предвидеть, какую нагрузку мобильные устройства и требовательные к взаимодействию веб-приложения окажут на эти оригинальные концепции пользовательского ввода.

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

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

Выявление проблемы

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

Возьмите дату . Использование — это находка для любого разработчика интерфейса, которому когда-либо приходилось добавлять на веб-сайт средство выбора даты на основе JavaScript… или, по крайней мере, было бы так, если бы все браузеры его поддерживали. Версии Chrome для настольных ПК и большинство мобильных браузеров отображают встроенные средства выбора даты:

Встроенные средства выбора даты отображаются при использовании типа ввода даты в Chrome для iOS и Mac (см. большую версию)

Однако, начиная с Firefox 36 и Internet Explorer (IE) 11 тот же тип ввода по умолчанию представляет собой обычное текстовое поле, что вынуждает разработчиков использовать полифиллы или продолжать вместо этого создавать решения для выбора даты на основе JavaScript.

Тип ввода даты по умолчанию представляет собой обычное текстовое поле в Firefox 36. (Просмотр увеличенной версии)

Отсутствие поддержки ввода даты в Firefox кажется несовместимым с общей поддержкой поставщиком этих более визуально и функционально продвинутых типов ввода. Например, тип ввода range ( ), который возник из того же набора предлагаемых функций, что и date , поддерживается начиная с Firefox 23 и IE 10.

Firefox поддерживает диапазон тип ввода начиная с версии 23. (Просмотреть большую версию)

Фактически, реализация IE, хотя и не самая визуально привлекательная, имеет некоторую дополнительную полезность, позволяющую вам видеть инкрементные деления в пределах диапазона, а также его текущее числовое значение при перетаскивании мышью.

Реализация IE 10+ типа ввода range показывает инкрементное деление и его текущее числовое значение при перетаскивании мышью. (Посмотреть большую версию)

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

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

Представьте ситуацию, в которой вам нужно добавить обязательное поле ввода для валюты, и вы хотите, чтобы клавиатура отображалась максимально удобно на всех устройствах. «Просто», — думаете вы, добавляя в вашу форму. Это отлично работает для Android:

Соответствующая клавиатура отображается для пользователей Android для типа ввода число . (Просмотр большой версии)

В iOS ваша клавиатура будет улучшена (в верхнем ряду будут отображаться цифры):

В iOS клавиатура, отображаемая в ответ на тип ввода число , содержит цифровые клавиши. (Просмотреть большую версию)

Но это все еще не та модная 10-клавишная клавиатура, которую предлагает вам Android. Чтобы добиться чего-то подобного в iOS, вам нужно установить шаблон атрибут со значением [0-9]* :

В iOS эта комбинация дает нам следующее:

Установка атрибута шаблона на [0-9]* предлагает iOS отобразить цифровую клавиатуру. (Просмотреть большую версию)

Я считаю, что эта реализация является принципиально недальновидным решением со стороны Apple. Он не только полностью игнорирует тип ввода, но также основан на шаблоне, который жестко запрограммирован в ОС, а это означает, что если вы каким-либо образом измените этот шаблон, вы полностью потеряете улучшение клавиатуры в iOS.

В нашем примере с валютой это создает проблему, но не там, где можно было бы ожидать. Обязательный ввод с номером типа и шаблоном из [0-9]* даст нам отличные результаты на мобильных устройствах, но легко забыть, что эти решения также влияют на настольные браузеры. На десктопе мы не можем управлять клавиатурой пользователя, и если он введет специальный символ (например, запятую или знак доллара, которые оба вероятны для валюты), как тип, так и шаблон вызовут сбой на стороне клиента. Проверка. (В более старых версиях Chrome десятичные знаки также вызывают ошибки проверки, хотя добавление step=“any” решает эту проблему.) Вы можете увидеть проблему здесь:

Символы, не соответствующие указанному шаблону, вызовут ошибки в настольных браузерах, где невозможно управлять клавиатурой. (Просмотреть большую версию)

Это ставит разработчиков в затруднительное положение. Мы можем улучшить работу одной мобильной ОС за счет другой, улучшить обе мобильные возможности за счет настольных компьютеров или улучшить работу с настольными компьютерами за счет мобильных устройств. И ни один из этих вариантов не обрадует наших стейкхолдеров.

Заархивируйте его

Хотя валюта является одним из наиболее наглядных примеров, почти любой ввод, который должен допускать буквенно-цифровое содержимое со специальными символами, может вызвать некоторую изжогу, связанную с использованием этих новых типов ввода и шаблонов. Сюда входят номера социального страхования, номера телефонов или любые другие номера, которые можно ввести в неизвестном формате, например номер банковского счета. В следующем примере давайте рассмотрим тот, который часто упускают из виду: почтовые индексы США.

Не задумываясь, почтовые индексы кажутся относительно простыми: большинство людей сразу представляют их как пятизначные числа. Итак, мы можем просто использовать , верно? Неправильно по двум причинам.

Более очевидная причина — расширенный формат почтового индекса США (например, 12345-6789). Хотя это может быть менее распространенным, разрешение нашим пользователям вводить его таким образом по-прежнему важно. И мы также должны помнить о пользователях за пределами США, потому что некоторые страны (включая Канаду и Великобританию) используют буквы и другие специальные символы в форматах своих почтовых индексов. С семантической точки зрения почтовые индексы — это не числа: это числовые коды — вы никогда не относитесь к определенному 99-му году.Подростковая телевизионная драма 0-х годов под названием «Беверли-Хиллз, девяносто тысяч двести десять».

Вторая причина немного тоньше: некоторые почтовые индексы на дальневосточном побережье США начинаются с нуля.

Если вы проверяете эти поля, специальные символы сразу же вызовут проблему проверки, а во многих браузерах (включая старые версии Chrome) начальный нуль тоже. Это означает, что вы не сможете использовать тип ввода номер и, следовательно, не сможете использовать расширенную клавиатуру для Android.

Пользователям Android может не повезти, но можем ли мы улучшить их для iOS? Если вы хотите проверить поле, ответ снова будет отрицательным, что в значительной степени вызвано решением Apple основывать свою улучшенную клавиатуру на едином жестко запрограммированном шаблоне проверки. Если мы хотим использовать (жестко закодированный шаблон, который запускает 10-клавишную клавиатуру iOS), наши пользователи не смогут вводить специальные символы или буквы. Даже если вы игнорируете пользователей за пределами США и используете шаблон, который позволяет использовать расширенные почтовые индексы, такие как , вы все равно не вернете улучшенный интерфейс iOS, который был бы полезен пользователям. .

Эти примеры валюты и почтового индекса также не учитывают поддержку других атрибутов, которые могут быть добавлены к входным данным формы, таких как autocapitalize , autocomplete и autocorrect . Autocapitalize и autocorrect — это функции, созданные Apple, которые работают в iOS и Safari, но официально не являются частью спецификации HTML и не пройдут проверку W3C. Autocomplete , с другой стороны, является частью официальной спецификации, но начиная с версии 34 Chrome по умолчанию игнорирует и переопределяет этот атрибут для поддержки встроенной функции автозаполнения форм.

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

Присылайте хаки

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

Установка типа ввода на тел отобразит 10-клавишную клавиатуру как на iOS, так и на Android. (Просмотреть большую версию)

Это создает 10-клавишную клавиатуру на Android и iOS без применения шаблона на рабочем столе. Но, как вы можете видеть на дополнительном экране этой клавиатуры, это явно не лучшая практика:

К сожалению, дополнительная клавиатура типа ввода tel зависит от телефона. (Просмотреть большую версию)

Действительно ли мы хотим предоставить пользователям телефонную клавиатуру с клавишами «пауза» и «подождать», когда они на самом деле не вводят номер телефона? И что произойдет с нашими веб-сайтами, если мобильные платформы и браузеры изменят способ обработки телефонных звонков?

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

Здравый смысл и коммуникация — ключ к успеху

Оба этих решения восходят к временам использования звездочек и подчеркиваний CSS-хаков, чтобы обойти странное поведение в старых браузерах (особенно IE 6) — и мы не должны возвращаться к этому снова. Эти взломы являются сознательным решением обойти стандарты и лучшие практики для выполнения поставленной задачи, не задумываясь о том, что произойдет с нашей кодовой базой по мере развития поддержки браузеров и развития функций.

На горизонте может появиться еще одно решение в виде предложенного WHATWG атрибут inputmode . Используя этот атрибут, разработчики могут объявить определенное состояние, которое подсказывает, какой механизм ввода будет наиболее полезным, с предопределенным резервным состоянием. Например, вернется к состоянию numeric , если клавиатура устройства не поддерживает телефонный ввод, а отобразит цифровую клавиатуру, но также допускайте отрицательные числа и разделитель тысяч. К сожалению, поддержка этого предлагаемого атрибута по-прежнему крайне ограничена, и, как и в случае с типами и шаблонами ввода, нам придется подождать и посмотреть, будет ли он последовательно реализован во всех браузерах и устройствах.

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

Если вы используете эти новомодные типы и шаблоны ввода, то тестируйте, тестируйте и еще раз тестируйте на как можно большем количестве устройств. Именно для этой цели я создал Input Type Sandbox, утилиту для тестирования различных комбинаций типов, шаблонов и атрибутов.

Также важно не уклоняться от обсуждения этого вопроса с заинтересованными сторонами. Умышленное невежество — думать, что они никогда не использовали расширенную клавиатуру на своем мобильном устройстве и что они не хотели бы иметь такой же опыт на своем собственном веб-сайте. Я могу сказать по личному опыту, что если формы вашего веб-сайта длинные, вы сэкономите часы объяснений и доработок, если заинтересованные стороны будут осведомлены о возможностях и ограничениях ввода формы с самого начала.

Призыв к действию для платформ и браузеров

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

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

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