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