Подробно о полях формы¶
Узнайте о различных полях формы, которые можно использовать, и о том, как выбрать подходящий элемент формы.
Какие поля формы я могу использовать?¶
Чтобы обеспечить наилучший пользовательский опыт, обязательно используйте элемент и элемент type, наиболее подходящие для вводимых пользователем данных.
Помощь пользователям в заполнении текста¶
Чтобы предоставить пользователям поле формы для ввода текста, используйте элемент <input>. Он лучше всего подходит для ввода отдельных слов и коротких текстов. Для более длинного текста используйте элемент <textarea>. Он позволяет вводить несколько строк текста, а также облегчает пользователю просмотр введенного текста, поскольку этот элемент можно прокручивать и изменять его размеры.
По умолчанию <textarea> имеет изменяемый размер. Вы можете отключить изменение размера с помощью CSS и свойства resize: resize: none.
Однако люди могут захотеть видеть введенный ими текст сразу. По крайней мере, сохраните возможность изменять размер <textarea> по вертикали. Используйте resize: vertical, чтобы пользователи могли изменять размеры по вертикали, но не по горизонтали.
Подробнее о почему отключение изменения размера в <textarea> плохо для UX.
Убедитесь, что пользователи вводят данные в правильном формате¶
Хотите помочь пользователям ввести номер телефона? Измените атрибут type на type="tel" для <input>. Пользователи мобильных устройств получат адаптированную экранную клавиатуру, что позволит им быстрее и удобнее вводить номер телефона.
Для адреса электронной почты используйте type="email". Опять же, отображается адаптированная экранная клавиатура. Чтобы сделать поле формы обязательным для заполнения, используйте атрибут required. При отправке формы браузер проверяет наличие значения и его корректность: в данном случае это правильно отформатированный адрес электронной почты.
Подробнее о различных типах ввода. В них также предусмотрены встроенные функции проверки.
Помогите пользователям заполнить даты¶
Когда вы хотите начать свою следующую поездку? Чтобы помочь пользователям вводить даты, используйте type="date". Некоторые браузеры показывают формат в виде заполнителя, например yyy-mm-dd, демонстрируя, как вводить дату.
Все современные браузеры предоставляют пользовательские интерфейсы для выбора дат в виде переключателя дат.
Помощь пользователям в выборе опции¶
Чтобы пользователи могли выбрать или отменить выбор одного из возможных вариантов, используйте type="checkbox". Хотите ли вы предложить несколько вариантов? В зависимости от конкретного случая использования, возможны различные альтернативы. Сначала рассмотрим возможные решения, если пользователи должны иметь возможность выбрать только одну опцию.
Можно использовать несколько элементов <input> с type="radio" и одинаковым значением name. Пользователи видят сразу все варианты, но могут выбрать только один.
Другим вариантом является использование элемента <select>. Пользователь может прокрутить список доступных вариантов и выбрать один из них.
Для некоторых случаев, например, для выбора диапазона чисел, хорошим вариантом может быть <input> типа range.
Вы можете использовать CSS-свойство accent-color для изменения цвета элементов управления формы, в том числе <input type="range">.
Нужно ли предлагать возможность выбора нескольких вариантов? Используйте элемент select> с атрибутом multiple или несколько элементов input> типа checkbox.
Можно также использовать элемент <input> в сочетании с элементом <datalist>. Таким образом, получается комбинация текстового поля и списка элементов <option>.
Как вы решите проблему выбора нескольких элементов? Попробуйте реализовать различные варианты. Используйте элемент <select>, элемент <datalist>, multi-select custom element или создайте что-то совершенно другое.
Убедитесь, что пользователи могут заполнять различные типы данных.¶
Существуют и другие типы ввода для конкретных случаев использования.
Существует <input> типа color для предоставления пользователям возможности выбора цвета в поддерживаемых браузерах, а также различные другие типы. Для того чтобы пользователь мог ввести свой пароль, используйте <input> с типом type="password". Каждый введенный символ будет скрыт звездочкой ("*") или точкой ("•"), чтобы пароль нельзя было прочитать.
Хотите включить в данные формы уникальный токен безопасности? Используйте <input> с параметром type="hidden". Значение <input> с типом hidden не может быть увидено или изменено пользователями.
Чтобы дать пользователям возможность загружать и отправлять файлы, используйте <input> с type="file".
В <input> типа file также может быть разрешена одновременная загрузка нескольких файлов. Можно также указать, какие форматы файлов разрешены.
Подробнее о <input type="file">.
Вы также можете определить пользовательские элементы, если у вас есть особый случай использования, для которого не подходит ни один встроенный элемент или тип.
Помощь пользователям в заполнении формы¶
Существует множество элементов и типов форм, но какой из них выбрать?
Для некоторых случаев использования формы достаточно просто выбрать подходящий элемент и тип, например <input type="date">. Для других это зависит от ситуации. Например, можно использовать несколько элементов <input> с type="checkbox" или элемент <select>. Подробнее о выборе между listbox'ами и выпадающими списками.
В целом, обязательно тестируйте форму на реальных пользователях, чтобы найти оптимальный элемент и тип формы.
Ресурсы¶
Источник — Form fields in depth