Какие поля формы я могу использовать?
Чтобы обеспечить наилучшее взаимодействие с пользователем, обязательно используйте элемент и 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="file" multiple>
.<input type="multiple-files">
.<input type="files">
. В чем разница между type="text"
и type="password"
?
type="password"
.type="password"
.type="password"
каждый введенный символ закрывается звездочкой ( *
) или точкой ( •
).