Какой атрибут используется в html чтобы указать что поле ввода должно быть заполнено

Защита от дурака

«Защитой от дурака» называется комплекс мер по пресечению ввода неправильной информации в форме. Например, если в поле требуется ввести положительное число от 0 до 10, то следует проверить, чтобы пользователь не ввёл текст или число, которое не лежит в указанном диапазоне, т.е. число не должно быть меньше нуля и больше десяти.

Почему происходит ввод неправильной информации? Это в основном совершается по трём причинам.

1. Пользователь ошибся случайно, например, невнимательно прочитал, что ему требуется указать.
2. На веб-странице неоднозначно просят ввести данные, поэтому пользователю приходится гадать и делать предположение, что же в действительности от него хотят. При этом не всегда происходит совпадение мнений разработчика и пользователя.
3. Есть ряд людей, которые воспринимают инструкции как вызов и стараются поступить наоборот. Такие пользователи рассуждают примерно так: «Ага, меня просят ввести число. А что будет, если я укажу буквы?». После чего задают явно неправильную информацию и смотрят, к чему это приведёт.

Следует понимать, что точные и правильные формулировки хотя и снижают вероятность возникновения ошибок, но никак не спасают от них. Только технические средства на стороне сервера позволяют получить требуемый результат и избежать ввода неправильной информации. Тем не менее, ревизия или, как её ещё называют, валидация на стороне клиента позволяет быстро проверить данные, вводимые пользователем, на корректность, без отправки формы на сервер. Таким образом экономится время пользователя и снижается нагрузка на сервер. С позиции юзабилити тоже имеются плюсы — пользователь сразу получает сообщение о том, какую информацию он указал неверно и может исправить свою ошибку.

Обязательное поле

Некоторые поля формы должны быть обязательно заполнены перед их отправкой на сервер. Это, к примеру, относится к форме регистрации, где требуется ввести логин и пароль. Для указания обязательных полей используется атрибут required , как показано в примере 1.

Пример 1. Атрибут required

HTML5 IE 10+ Cr Op Sa Fx

       
Логин: 
Пароль: 

Обязательные поля должны быть заполнены перед отправкой формы, иначе форма на сервер не отправится и браузер выдаст об этом предупреждение. Вид сообщения зависит от браузера, например Chrome выводит всплывающую подсказку, как показано на рис. 1.

Рис. 1. Обязательное поле не заполнено

Корректность данных

Исходно имеется два поля, в котором вводимые пользователем данные проверяются автоматически. Это веб-адрес и адрес электронной почты. Браузер Chrome также проверяет на корректность поле с календарными данными, но только потому, что у него не предусмотрен интерфейс выбора календаря щелчком мыши. Для этих элементов характерны следующие правила.

• Веб-адрес ( ) должен содержать протокол (http://, https://, ftp://).
• Адрес электронной почты ( ) должен содержать буквы или цифры до символа @, после него, затем точку и домен первого уровня.

У браузеров несколько различается политика по проверке данных пользователя. К примеру, Opera подставляет протокол http:// перед введённым текстом автоматически, тогда как другие браузеры ждут его от пользователя. Chrome и Opera требуют, чтобы в почтовом адресе была точка, для Firefox она не обязательна.

В примере 2 показана форма с обязательными полями, в которой два поля проверяется браузером.

Пример 2. Корректность данных

HTML5 IE 10+ Cr Op Sa Fx

       
Заполните форму (все поля обязательны)
 
Имя: 
Email: 
Сайт: 

Opera проверяет элемент формы только при наличии атрибута name.

Что происходит в Opera при вводе неверных данных показано на рис. 2.

Рис. 2. Предупреждение о неправильных данных

Шаблон ввода

Некоторые данные нельзя отнести к одному из видов элементов формы, поэтому для них приходится использовать текстовое поле. При этом их ввод происходит по определённому стандарту. Так, IP-адрес содержит четыре числа разделённых точкой (192.168.0.1), почтовый индекс России ограничен шестью цифрами (124007), телефон содержит код города и конкретное количество цифр часто разделяемых дефисом (391 555-341-42) и др. Браузеру необходимо указать шаблон ввода, чтобы он согласно нему проверял вводимые пользователем данные. Для этого используется атрибут pattern , а его значением выступает регулярное выражение. Некоторые типовые значения перечислены в табл. 1.

Табл. 1. Регулярные выражения

Шаблон	Описание
^[a-zA-Z]+$	Любые латинские буквы.
^[ 0-9]+$	Любое количество цифр.
\d\.\d\.\d\.\d	IP-адрес.
[0-9]	Почтовый индекс.
\d+(,\d)?	Цена в формате 1,34 (разделитель запятая).
\d+(\.\d)?	Цена в формате 2.10 (разделитель точка).

В примере 3 просят ввести шестнадцатеричное значение цвета (#ffcc00) и если оно не лежит в этом диапазоне, браузер выводит сообщение об ошибке.

Пример 3. Шаблон ввода

HTML5 IE 10+ Cr Op Sa Fx

       
Введите шестнадцатеричное значение цвета (должно начинаться с #)
 
">
  

На рис. 3 показано предупреждение в браузере Chrome.

Рис. 3. Введённые данные не соответствуют шаблону

Отмена валидации

Валидация не всегда требуется для формы, к примеру, разработчик пожелает использовать универсальное решение на JavaScript и дублирующая проверка браузером ему уже ни к чему. В подобных случаях необходимо отключить встроенную валидацию. Для этого применяется атрибут novalidate тега . В примере 4 показано использование этого атрибута.

Пример 4. Отмена валидации

HTML5 IE 10+ Cr Op Sa Fx

Для аналогичной цели применяется и атрибут formnovalidate , который добавляется к кнопке для отправки формы, в данном случае к тегу . В этом случае форма из примера 4 будет иметь следующий вид.

Атрибут required

Атрибут required указывает на то, что данный элемент HTML формы должен быть обязательно заполнен.

Атрибут следует применять к тегам input или textarea .

При попытке отправки формы в том случае, если поле с этим атрибутом не заполнено — браузер не даст отправить форму и выведет ошибку в виде всплывающей подсказки. К сожалению, текст ошибки и ее вид нельзя изменить с помощью HTML или CSS.

Имейте ввиду, что наличие атрибута required не освобождает вас от проверки правильности заполненности формы со стороны сервера на PHP (так как защиту через required легко обойти).

Пример

Давайте тегу input добавим атрибут required . Не вводя ничего в поле попробуйте нажать на кнопку, чтобы отправить форму. Браузер не даст отправить форму, добавит тень инпуту и выведет сообщение об ошибке:

Смотрите также

• атрибут pattern ,
  который позволяет выполнить валидацию инпута

Атрибут required HTML тега

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Атрибут required (HTML тега ) является логическим атрибутом, который указывает, что поле ввода должно быть заполнено перед отправкой формы.

Атрибут не может быть использован с полями данных следующих типов (атрибут type):

• button (элемент управления, который определяет кнопку).
• hidden (элемент управления, который определяет скрытое поле ввода).
• image (элемент управления, который определяет графическую кнопку «отправить форму»).

Поддержка браузерами

Атрибут	Chrome	Firefox	Opera	Safari	IExplorer	Edge
required	5.0	4.0	9.6	Нет	10.0	12.0

required> 

Значения атрибута

Значение	Описание
required	Значение атрибута требуется только в XHTML ( ).

Отличия HTML 4.01 от HTML 5

Атрибут считается новым в HTML 5.

Пример использования

   Пример использования атрибута required HTML тега Login: type = "text" name = "login" required>
 
Email: type = "email" name = "email" required>
 
 type = "submit">   

В данном примере мы использовали два различных поля (текстовое — «text» и поле для ввода адреса электронной почты — «email» ), для обоих полей мы указали атрибут required , который не дает отправить форму пока поле не будет заполнено.

Результат нашего примера:

Кажется, вы используете блокировщик рекламы 🙁

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

Какой атрибут используется в html чтобы указать что поле ввода должно быть заполнено

Чаще всего в формах используется тег . Он не имеет закрывающего тега. Вся информация, необходимая браузеру для обработки, содержится непосредственно в теге и задается с помощью различных атрибутов.

Семантика значительно варьируется в зависимости от значения его атрибута type.

Атрибуты тега

• button – Кнопка с надписью.
• checkbox – Флажок.
• color – Виджет для выбора цвета.
• date – Поле для ввода календарной даты (год, месяц, день).
• datetime – Поле для ввода даты и времени.
• datetime-local – Поле для ввода даты и местного времени.
• email – Поле для ввода адреса электронной почты.
• file – Поле для ввода имени файла, который пересылается на сервер.
• hidden – Скрытое поле (не отображается на Web-странице).
• image – Графическая кнопка отправки данных формы на сервер. Вместе с этим значением нужно использовать атрибут src, чтобы определить адрес изображения и атрибут alt для определения альтернативного текста. Можно также задать атрибуты width и height, чтобы определить размер изображения в пикселях.
• month – Поле для ввода месяца и года.
• number – Поле для ввода чисел.
• password – Поле для ввода пароля.
• radio – Переключатели (радио-кнопки).
• range – Ползунок для ввода чисел в указанном диапазоне.
• reset – Кнопка сброса данных формы в первоначальное состояние.
• search – Поле для ввода строки поиска.
• submit – Кнопка для отправки данных формы на сервер.
• tel – Поле для ввода номера телефона.
• text – Текстовое поле.
• time – Поле для ввода времени.
• url – Поле для ввода Web-адреса.
• week – Поле для ввода номера недели и года.

Не все браузеры поддерживают типы, добавленные в HTML5.
Если браузер не поддерживает какой-то из новых типов, то он будет считать, что это тип text.

autocomplete=»off» Отключает автозаполнение для данного поля. Очень полезно для полей ввода разовых кодов, каптч и т.п. [domelement].setAttribute(‘autocomplete’,’off’); autofocus Автоматическое получение фокуса при загрузке страницы. Значение можно задать тремя способами:

Пример эмуляции свойства автофокус для старых браузеров. disabled Делает элемент недоступным. Недоступные элементы не передаются на сервер. name Имя поля. Каждое создаваемое поле ввода должно иметь собственное уникальное имя, иначе сценарий не определит, к каким полям относятся полученные значения. Конечно, имя поля ввода должно соответствовать имени, которое описано для него в программе обработки. value Значение поля по умолчанию или надпись на кнопке. size Размер поля типа text. maxlength Ограничение на количество символов, которые можно ввести в поле типа text. readonly=»readonly» или «» Запрещает изменение элемента. required Автоматически проверяет, заполнено ли поле.
Для выделения правильно заполненного обязательно поля можно использовать следуюшую конструкцию style:

 input:required:invalid < border: 1px solid red; >input:required:valid 

required email —> Автоматическая проверка корректности указанного адрес e-mail. —> min Минимальное значение в полях типа date, number и range. max Максимальное значение в полях типа date, number и range. step Шаг изменения числа в полях типа number и range. pattern Шаблон поля ввода. Проверка корректности ввода данных. Примеры шаблонов для html5 form input pattern. placeholder Текст-подсказка в поле формы, который пропадает автоматически при получении поле фокуса.
Пример настройки стиля подсказки:

В IE и Firefox (до 18 версии) placeholder считается псевдоклассом, а в остальных – псевдоэлементом.

list Список вариантов, которые можно выбирать при наборе в текстовом поле.
Изначально этот список скрыт и становится доступным при получении полем фокуса или наборе текста.

Типы элемента INPUT

Кнопка BUTTON

Кнопка BUTTON предназначена для тех случаев, когда надо исполнять какой-нибудь скрипт. То есть на кнопку вешается событие OnСlick и вызывается нужная функция. Атрибут value задает надпись на кнопке. Атрибут onclick задает JavaScript-обработчик, который вызывается при щелчке на кнопке. Атрибут name служит для JavaScript-именования кнопки (на сервер не передается).

Пример

Флажок CHECKBOX

Браузер отображает поле этого типа в виде небольшого квадрата. По смыслу флажок служит для того, чтобы быть установленным (в квадрате стоит галочка), либо не установленным (квадрат пуст). Когда флажок установлен, его значение, заданное атрибутом value, передается программе сценария. Если он не установлен, то его значение не передается совсем.

Флажок может быть сразу установлен по умолчанию, если указан атрибут checked. По умолчанию атрибут value имеет значение on (установлен). Так как атрибут value здесь задает не надпись на флажке, а его внутреннее значение, передаваемое программе сценария, то если надо что-то подписать, пишите рядом с флажком или используйте тег .

Пример

 
 Нужна накладная 

Выбор цвета

Это поле, которое позволяет выбрать цвет.

Пример

 
 Выберите цвет:
 
Атрибут value используют для установки исходного цвета, его можно не указывать.
 

Атрибут value используют для установки исходного цвета, его можно не указывать.

Поле ввода даты

Поле типа date позволяет ввести дату с помощью календаря.

Можно задать нижнюю и верхнюю границу диапазона дат атрибутами min и max.

Пример

 
 Введите дату:
 

Поле ввода адреса электронной почты

Для ввода нескольких адресов можно добавить атрибут multiple, при этом для разделения адресов используется запятая (,)

Пример

 
E-mail:
 

Файл FILE

Позволяет передать сценарию любой файл. Максимальный размер файла в байтах задается скрытым полем max_file_size.

Пример

  Фото: 

Сценарий получения файла на PHP:

if (isset($mURL_type)) < $nname='/usr/home/ftp/pub/'.$mURL_name; if (move_uploaded_file($mURL,$nname)) < print "Файл успешно загружен на сервер!"; mail("Admin@aaanet.ru", "Поступил файл $nname", "Поступил файл $nname", "Content-Type: text/plain; charset=windows-1251"); >else print "Ошибка! Файл не был загружен. "; exit; >

Для указания возможных типов файлов используется атрибут accept:
Для CSV files (.csv), используйте:

Для Excel Files 2003-2007 (.xls), используйте:
Для Excel Files 2010 (.xlsx), используйте:
Для Text Files (.txt) используйте:
Для Image Files (.png/.jpg/etc), используйте:
Для HTML Files (.htm,.html), используйте:
Для Video Files (.avi, .mpg, .mpeg, .mp4), используйте:
Для Audio Files (.mp3, .wav, etc), используйте:
Для PDF Files, используйте:

Браузер Chrome понимает дополнительные атрибуты «webkitdirectory directory«, указание которых у input позволяет выбирать целые папки:

Скрытое поле HIDDEN

Это специальный (скрытый) тип текстового поля. Если один сценарий обрабатывает несколько разных форм, то в скрытом поле каждой формы можно указать идентификатор, который позволит определить, с какой формой вы имеете дело.

Пример

 
 . Другие элементы формы.
 
 . Другие элементы формы.
 

Браузер не отображает скрытое поле, хотя его можно обнаружить, если перевести броузер в режим просмотра HTML-файла и проанализировать текст Web-страницы. Скрытые поля полезны, если необходимо указать требуемую для сценария информацию, но при этом нежелательно, чтобы пользователь имел возможность вносить в нее изменения. Однако учтите, что сообразительный пользователь может сохранить вашу форму в файле, отредактировать его, а затем передать эту форму серверу в измененном виде. Поэтому не стоит полагаться на скрытые поля с целью создания какой-либо защиты.

Пример

Сценарий получит переменную с именем FormVersion, которой будет присвоено значения 1.2. Эта информация может использоваться для определения способа обработки остальной информации, полученной от формы. Если пользователь изменит это значение, то программа сценария может повести себя неожиданным образом.

Поле ввода чисел NUMBER

Поле предназначено для ввода чисел. Дробная часть при вводе может отделяться как точкой (2.5), так и запятой (2,5). Если пользователь введет буквы, то отправить форму на сервер не удастся.

Пример

Можно задать минимальное, максимальное значение поля и шаг изменения числа. Значение шага может быть как целым, так и дробным, но должно быть больше 0. Если введенное в поле число не будет отвечать заданным ограничениям, то отправка на сервер не произойдет.

Пример

Для задания любого шага используйте step=»any».

Пример

Поле number отображается по-разному: некоторые браузеры показывают стрелочки всегда, некоторые – только при наведении или получении полем фокуса.

Если нужно, чтобы стрелочки в поле number были всегда, задайте стиль:

 input[type="number"]::-webkit-inner-spin-button 

Если нужно убрать стрелочки в поле number, задайте стиль:

 input[type="number"] < -moz-appearance: textfield; >input[type="number"]::-webkit-inner-spin-button 

Поле ввода пароля PASSWORD

Поле ввода пароля очень похоже на простое текстовое поле. Отличается оно тем, что вместо вводимых символов в нем отображаются точки. Такая возможность очень важна, когда нужно ввести секретную информацию, типа пароля, которую не должны видеть другие.

Пример

Переключатель RADIO

Переключатель напоминает флажок, поскольку он тоже может находиться во включенном или выключенном состоянии.

По смыслу всегда предполагается, что в форме имеется несколько переключателей с одинаковым атрибутом name. У каждого из них свое значение атрибута value. Группа переключателей с одним и тем же именем в форме ведет себя таким образом, что только один из них может быть включенным. При передаче данных передается значение только выбранного переключателя.

Один переключатель из группы может быть изначально выбран по умолчанию с помощью атрибута checked.

Пример

 
 Мужской 
 Женский 

Ползунок RANGE

Поле предназначено для ввода числа в указанном диапазоне.

Можно задать минимальное значение (по умолчанию 0), максимальное значение (по умолчанию 100), шаг изменения числа (по умолчанию 1) и текущее значение (по умолчанию среднее арифметическое минимального и максимального значений).

Пример

20 см 120 см

Ползунок сам по себе не даёт пользователю представление, какое же число он выбрал. Поэтому здесь без JavaScript не обойтись.

Пример

Ширина 20 см 120 см

Поле range отображается разными браузерами по-разному.

Если хотите своё оформление, задайте стили для ползунка:

 /* Полоса прокрутки элемента range */ input[type=range]::-webkit-slider-runnable-track < height: 4px; border: 0; background: #E4E4E4; >input[type=range]::-moz-range-track < height: 4px; border: 0; background: #E4E4E4; >input[type=range]::-ms-track < height: 4px; border: 0; background: #E4E4E4; >input[type=range]::-ms-fill-lower < height: 4px; border: 0; background: #E4E4E4; >input[type=range]::-ms-fill-upper < height: 4px; border: 0; background: #E4E4E4; >input[type=range]:focus < border: none !important; >/* Ползунок */ input[type=range]::-webkit-slider-thumb < -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #00a33d; border: 0; cursor: pointer; margin-top: -6px; >input[type=range]::-moz-range-thumb < width: 16px; height: 16px; border-radius: 50%; background: #00a33d; border: 0; cursor: pointer; >input[type=range]::-ms-thumb < width: 16px; height: 16px; border-radius: 50%; background: #00a33d; border: 0; cursor: pointer; >input[type=range] < -webkit-appearance: none; >input[type=range]:focus 

Но победить до конца стили IE11 не удастся!

Кнопка RESET

Это кнопка очистки формы. При ее нажатии всем измененным элементам возвращается значение по умолчанию. Применяется она достаточно редко. Однако в некоторых случаях может быть весьма полезна.

Совет: осторожно относитесь к выбору надписи на кнопке RESET. Вполне наглядным (и, главное, интуитивно понятным даже чайнику из чайников) будет что-нибудь вроде «Очистить», «Начать сначала», «Удалить ввод» и т.п. В общем, надо, чтобы у пользователя не закралось и тени сомнения относительно предназначения этой клавиши.

Пример

Кнопка SUBMIT

Эта кнопка предназначена для передачи формы. В большинстве браузеров внешне почти не отличима от кнопки BUTTON. Сама она не передается, а служит только для управления.

Пример

Атрибут value дает определенные преимущества при использовании более одной кнопки передачи данных. В этом случае на основании значения полученной переменной сценарий сможет определить, как обрабатывать полученную информацию далее.

Пример

Атрибут formnovalidate может быть применен, чтобы предотвратить проверку значений формы.

Пример

Поле ввода TEXT

Текстовое поле ввода используется в формах наиболее часто. Более того, его можно по праву считать основным и главнейшим элементом форм. Этот тип используется тегом по умолчанию, его можно не указывать, чтобы вывести текстовое поле. Однако, если возникнет необходимость задать стиль для селектора input[type=»text»], то тогда атрибут type=»text» пропускать нельзя.
Имя поля, задаваемое атрибутом name, всегда обязательно, так как базируясь именно на этом параметре, браузер передает сценарию пару имя=значение.

 input[type="text"] < padding: 4px 6px; >input[type="text"]:focus