Какие поля формы я могу использовать?
Чтобы обеспечить наилучшее взаимодействие с пользователем, обязательно используйте элемент и 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" .