Подробно о полях формы¶
Чтобы обеспечить наилучший пользовательский опыт, обязательно используйте элемент и элемент type , наиболее подходящие для вводимых пользователем данных.
Помощь пользователям в заполнении текста¶
Чтобы предоставить пользователям поле формы для ввода текста, используйте элемент . Он лучше всего подходит для ввода отдельных слов и коротких текстов. Для более длинного текста используйте элемент . Он позволяет вводить несколько строк текста, а также облегчает пользователю просмотр введенного текста, поскольку этот элемент можно прокручивать и изменять его размеры.
По умолчанию имеет изменяемый размер. Вы можете отключить изменение размера с помощью CSS и свойства resize : resize: none .
Однако люди могут захотеть видеть введенный ими текст сразу. По крайней мере, сохраните возможность изменять размер по вертикали. Используйте resize: vertical , чтобы пользователи могли изменять размеры по вертикали, но не по горизонтали.
Убедитесь, что пользователи вводят данные в правильном формате¶
Хотите помочь пользователям ввести номер телефона? Измените атрибут type на type=»tel» для . Пользователи мобильных устройств получат адаптированную экранную клавиатуру, что позволит им быстрее и удобнее вводить номер телефона.
Для адреса электронной почты используйте type=»email» . Опять же, отображается адаптированная экранная клавиатура. Чтобы сделать поле формы обязательным для заполнения, используйте атрибут required . При отправке формы браузер проверяет наличие значения и его корректность: в данном случае это правильно отформатированный адрес электронной почты.
Подробнее о различных типах ввода. В них также предусмотрены встроенные функции проверки.
Помогите пользователям заполнить даты¶
Когда вы хотите начать свою следующую поездку? Чтобы помочь пользователям вводить даты, используйте type=»date» . Некоторые браузеры показывают формат в виде заполнителя, например yyy-mm-dd , демонстрируя, как вводить дату.
Все современные браузеры предоставляют пользовательские интерфейсы для выбора дат в виде переключателя дат.
Помощь пользователям в выборе опции¶
Чтобы пользователи могли выбрать или отменить выбор одного из возможных вариантов, используйте type=»checkbox» . Хотите ли вы предложить несколько вариантов? В зависимости от конкретного случая использования, возможны различные альтернативы. Сначала рассмотрим возможные решения, если пользователи должны иметь возможность выбрать только одну опцию.
Можно использовать несколько элементов с type=»radio» и одинаковым значением name . Пользователи видят сразу все варианты, но могут выбрать только один.
Другим вариантом является использование элемента . Пользователь может прокрутить список доступных вариантов и выбрать один из них.
Для некоторых случаев, например, для выбора диапазона чисел, хорошим вариантом может быть типа range .
Вы можете использовать CSS-свойство accent-color для изменения цвета элементов управления формы, в том числе .
Нужно ли предлагать возможность выбора нескольких вариантов? Используйте элемент select> с атрибутом multiple или несколько элементов input> типа checkbox .
Как вы решите проблему выбора нескольких элементов? Попробуйте реализовать различные варианты. Используйте элемент , элемент , multi-select custom element или создайте что-то совершенно другое.
Убедитесь, что пользователи могут заполнять различные типы данных.¶
Существуют и другие типы ввода для конкретных случаев использования.
Существует типа color для предоставления пользователям возможности выбора цвета в поддерживаемых браузерах, а также различные другие типы. Для того чтобы пользователь мог ввести свой пароль, используйте с типом type=»password» . Каждый введенный символ будет скрыт звездочкой («*») или точкой («•»), чтобы пароль нельзя было прочитать.
Хотите включить в данные формы уникальный токен безопасности? Используйте с параметром type=»hidden» . Значение с типом hidden не может быть увидено или изменено пользователями.
Чтобы дать пользователям возможность загружать и отправлять файлы, используйте с type=»file» .
В типа file также может быть разрешена одновременная загрузка нескольких файлов. Можно также указать, какие форматы файлов разрешены.
Вы также можете определить пользовательские элементы, если у вас есть особый случай использования, для которого не подходит ни один встроенный элемент или тип.
Помощь пользователям в заполнении формы¶
Существует множество элементов и типов форм, но какой из них выбрать?
Для некоторых случаев использования формы достаточно просто выбрать подходящий элемент и тип, например . Для других это зависит от ситуации. Например, можно использовать несколько элементов с type=»checkbox» или элемент . Подробнее о выборе между listbox’ами и выпадающими списками.
В целом, обязательно тестируйте форму на реальных пользователях, чтобы найти оптимальный элемент и тип формы.
Атрибут required
Устанавливает поле формы обязательным для заполнения перед отправкой формы на сервер. Если обязательное поле пустое, браузер выведет сообщение, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может. На рис. 1 показано сообщение в разных браузерах.
 |
 |
 |
| Chrome | Opera | Firefox |
Рис. 1. Вид сообщения об обязательном поле
Синтаксис
Значения
Значение по умолчанию
По умолчанию атрибут required выключен.
HTML5 IE Cr Op Sa Fx
Тег input, атрибут required
Браузеры
Opera не проверяет введенное значение, если у не указан атрибут name .
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
Обязательное поле для заполнения
Как было сказано в комментариях в хтмл5 действительно есть атрибут required, но на данный момент он работает некорректно в большинстве браузеров.
Советую реализовать проверку с помощью javascript (в целях безопасности обязательно проверять на стороне сервера). В интернете очень много плагинов, которые умеют это делать (подборка для JQuery).
В простейшем же случае валидация выглядит приблизительно так:
function validateForm() < var x=document.forms["myForm"]["fname"].value; if (x==null || x=="") < alert("Необходимо заполнить поле Имя!"); return false; >> Отслеживать
ответ дан 3 апр 2012 в 12:51
Vitalii Maslianok Vitalii Maslianok
2,979 15 15 серебряных знаков 21 21 бронзовый знак
Ооо спасибо .
4 апр 2012 в 5:36
А подскажите, если у меня условие еще одно есть, поля всегда должно быть равно 10, т.е. если поле равно 10 тогда данные отправляем, если все остальное ну там «пусто», «null», «любой символ» тогда выводим сообщение что «Укажите верное значение!»
Атрибут required
Атрибут required добавляется обязательным полям формы. Если поле с таким атрибутом не заполнено, то при отправке формы браузер покажет предупреждение и отменит отправку.
Пример
Скопировать ссылку «Пример» Скопировано
В примере ниже поле для телефона является обязательным:
Ваше имя: Ваш номер телефона (обязательно):form> label> Ваше имя: input type="text"> label> label> Ваш номер телефона (обязательно): input type="tel" required> label> button type="submit">Отправить заявкуbutton> form>
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Достаточно написать атрибут required без значения, ведь он булевый: если он есть — поле обязательное, а если нет — не обязательное. Если вам по какой-то причине нельзя использовать булевы атрибуты (например, в XML-разметке), напишите required = «required» .
Атрибут required можно использовать для , , а также для со следующими типами:
- text ,
- search ,
- url ,
- tel ,
- email ,
- password ,
- date ,
- month ,
- week ,
- time ,
- datetime — local ,
- number ,
- checkbox ,
- radio ,
- file .
Если в группе радиокнопок с одинаковым значением атрибута name хотя бы у одной указан атрибут required , то вся группа будет считаться обязательной. Поэтому лучше явно прописывать required всем радиокнопкам в группе. При этом для чекбоксов с одинаковыми именами это не работает. Обязательным будет только тот чекбокс, у которого прописан атрибут.
Атрибут не сработает для любых кнопок, а также для полей ввода с типами color и range . Причина в том, что у таких полей существует значение по умолчанию, даже если оно явно не прописано в атрибуте value . У это #000000 , а у это среднее значение между min и max . Так что браузер посчитает их заполненными в любом случае и не покажет предупреждение.
Кроме того, атрибут required не работает для скрытых полей type = «hidden» и для полей с атрибутом readonly .
Как понять
Скопировать ссылку «Как понять» Скопировано
В момент отправки формы браузер выполняет валидацию введённых данных. Если поле, у которого есть атрибут required , не заполнено, то браузер не позволит отправить форму и покажет сообщение. Внешний вид и текст сообщения может отличаться в разных браузерах. Сообщение в Google Chrome:
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Поля с атрибутом required можно стилизовать при помощи псевдокласса :required . Поля, у которых нет этого атрибута, стилизуются псевдоклассом :optional .
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Необходимо визуально выделять обязательные для заполнения поля формы. Почему-то исторически сложилось, что рядом с подписью для поля ставят звёздочку. Раньше под формой писали пояснение, что звёздочка значит обязательное поле. Но со временем пропало даже пояснение.
Звёздочка — плохой паттерн. Как минимум потому что скринридер прочитает её просто как «звёздочка». Лучше явно написать в скобках «(обязательное)». Тогда пользователь, каким бы инструментом он не пользовался, точно будет знать, что поле надо заполнить.