Формируйте поля по глубине

Какие поля формы я могу использовать?

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

Помогите пользователям заполнить текст

Чтобы предоставить пользователям поле формы для вставки текста, используйте элемент <input> . Это лучший выбор для отдельных слов и коротких текстов. Для более длинного текста используйте элемент <textarea> . Это позволяет использовать несколько строк текста и облегчает пользователю просмотр введенного текста, поскольку элемент можно прокручивать и изменять его размер.

Убедитесь, что пользователи вводят данные в правильном формате.

Хотите помочь пользователям заполнить номер телефона? Измените атрибут type на type="tel" для <input> . Пользователи мобильных устройств получают адаптированную экранную клавиатуру, позволяющую быстрее и проще вводить номер телефона.

Для адреса электронной почты используйте type="email" . И снова показана адаптированная экранная клавиатура. Используйте required атрибут, чтобы сделать поле формы обязательным. Когда форма отправляется, браузер проверяет, что введенное значение имеет значение и является ли оно допустимым: в данном случае это правильно отформатированный адрес электронной почты.

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

Помогите пользователям заполнить даты

Когда вы хотите начать следующую поездку? Чтобы помочь пользователям заполнять даты, используйте type="date" . Некоторые браузеры отображают формат в виде заполнителя, например yyyy-mm-dd , демонстрируя, как вводить дату.

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

Помогите пользователям выбрать вариант

Чтобы пользователи могли выбрать или отменить выбор одного из возможных вариантов, используйте type="checkbox" . Хотите предложить несколько вариантов? В зависимости от вашего варианта использования существуют различные альтернативы. Во-первых, давайте рассмотрим возможные решения, если пользователи должны иметь возможность выбирать только один вариант.

Вы можете использовать несколько элементов <input> с type="radio" и одинаковым значением name . Пользователи видят все варианты одновременно, но могут выбрать только один.

Другой вариант — использовать элемент <select> . Пользователи могут прокручивать список доступных опций и выбирать одну.

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

Вам нужно предложить возможность выбора нескольких вариантов? Используйте элемент <select> с атрибутом multiple или несколько элементов <input> типа checkbox .

Вы также можете использовать <input> в сочетании с элементом <datalist> . Это дает вам комбинацию текстового поля и списка элементов <option> .

Убедитесь, что пользователи могут заполнять разные типы данных

Существует больше типов ввода для конкретных случаев использования.

Существует <input> типа color , который предоставляет пользователям возможность выбора цвета в поддерживаемых браузерах, а также существуют различные другие типы. Чтобы пользователи могли ввести свой пароль, используйте <input> с type="password" . Каждый введенный символ закрывается звездочкой («*») или точкой («•»), чтобы пароль невозможно было прочитать.

Хотите включить уникальный токен безопасности в данные формы? Используйте <input> с type="hidden" . Значение <input> hidden типа не может быть просмотрено или изменено пользователями.

Чтобы пользователи могли загружать и отправлять файлы, используйте <input> с type="file" .

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

Помогите пользователям заполнить вашу форму

Элементов и типов форм много, но какой выбрать?

В некоторых случаях можно легко выбрать соответствующий элемент и тип, например <input type="date"> . Для других это зависит. Например, вы можете использовать несколько элементов <input> с type="checkbox" или элементом <select> . Узнайте больше о выборе между списками и раскрывающимися списками .

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

Проверьте свое понимание

Проверьте свои знания полей формы

Можно ли загрузить несколько файлов с помощью элемента управления формой?

Да, используя <input type="files"> .
Попробуйте еще раз!
Да, используя <input type="file" multiple> .
🎉
Нет.
Попробуйте еще раз!
Да, используя <input type="multiple-files"> .
Попробуйте еще раз!

В чем разница между type="text" и type="password" ?

Нет никакой разницы.
Попробуйте еще раз!
Адаптированная экранная клавиатура для ввода паролей показана для type="password" .
Попробуйте еще раз!
При использовании type="password" каждый введенный символ закрывается звездочкой ( * ) или точкой ( ).
🎉
Пользовательский интерфейс для ввода паролей показан для type="password" .
Попробуйте еще раз!

Ресурсы