Input required: Атрибут required | htmlbook.ru

Leave a Comment / Разное / By /

Атрибут required — HTML — Дока

  1. Кратко
  2. Пример
  3. Как пишется
  4. Как понять
  5. Подсказки
  6. На практике
    1. Алёна Батицкая советует

Кратко

Скопировано

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

Пример

Скопировано

В примере ниже поле для телефона является обязательным:

<form>  <label>    Ваше имя:    <input type="text">  </label>  <label>    Ваш номер телефона (обязательно):    <input type="tel" required>  </label>  <button type="submit">Отправить заявку</button></form>
          <form>
  <label>
    Ваше имя:
    <input type="text">
  </label>
  <label>
    Ваш номер телефона (обязательно):
    <input type="tel" required>
  </label>
  <button type="submit">Отправить заявку</button>
</form>

Как пишется

Скопировано

Достаточно написать атрибут required без значения, ведь он булевый: если он есть — поле обязательное, а если нет — не обязательное. Если вам по какой-то причине нельзя использовать булевы атрибуты (например, в XML-разметке), напишите required="required".

Атрибут required можно использовать для <select>, <textarea>, а также для <input> со следующими типами:

  • text,
  • search,
  • url,
  • tel,
  • email,
  • password,
  • date,
  • month,
  • week,
  • time,
  • datetime-local,
  • number,
  • checkbox,
  • radio,
  • file.

Если в группе радиокнопок с одинаковым значением атрибута name хотя бы у одной указан атрибут required, то вся группа будет считаться обязательной. Поэтому лучше явно прописывать required всем радиокнопкам в группе. При этом для чекбоксов с одинаковыми именами это не работает. Обязательным будет только тот чекбокс, у которого прописан атрибут.

Атрибут не сработает для любых кнопок, а также для полей ввода с типами color и range. Причина в том, что у таких полей существует значение по умолчанию, даже если оно явно не прописано в атрибуте value. У <input type="color"> это #000000, а у <input type="range"> это среднее значение между min и max. Так что браузер посчитает их заполненными в любом случае и не покажет предупреждение.

Кроме того, атрибут required не работает для скрытых полей type="hidden" и для полей с атрибутом readonly.

Как понять

Скопировано

В момент отправки формы браузер выполняет валидацию введённых данных. Если поле, у которого есть атрибут required, не заполнено, то браузер не позволит отправить форму и покажет сообщение. Внешний вид и текст сообщения может отличаться в разных браузерах. Сообщение в Google Chrome:

Подсказки

Скопировано

💡 Поля с атрибутом required можно стилизовать при помощи псевдокласса :required. Поля, у которых нет этого атрибута, стилизуются псевдоклассом :optional.

На практике

Скопировано

Алёна Батицкая советует

Скопировано

🛠 Необходимо визуально выделять обязательные для заполнения поля формы. Почему-то исторически сложилось, что рядом с подписью для поля ставят звёздочку. Раньше под формой писали пояснение, что звёздочка значит обязательное поле. Но со временем пропало даже пояснение.

Звёздочка — плохой паттерн. Как минимум потому что скринридер прочитает её просто как «звёздочка». Лучше явно написать в скобках «(обязательное)». Тогда пользователь, каким бы инструментом он не пользовался, точно будет знать, что поле надо заполнить.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

Атрибут readonly

ctrl + alt + ←

→

Атрибут value

ctrl + alt + →

required атрибут HTML теґа input

  • Головна
  • html
  • теґи
  • <input>
  • required

Атрибут required являється логічним атрибутом, який встановлює, що поле форми є обов’язковим для заповнення перед відправкою форми на сервер.

Якщо обов’язкове поле пусте, браузер виведе повідомлення про помилку і форма відправлена не буде.

Вид і зміст повідомлення залежить від браузера і змінюватися користувачем не може.

Нотатка:

Обов’язковий атрибут працює з наступними типами введення: text, search, url, tel, email, password, date pickers, number, checkbox, radio та file.

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

<input required>

Атрибут required не має жодного значення :

Переглядачі

  • Стаціонарні переглядачі
  • Мобільні переглядачі
Переглядач

5+

4+

0+

9. 6+

10+

12+

Переглядач

2.3+

1+

4+

1+

Приклади

  • Приклад 1

Найпростіший приклад використання HTML атрибута required теґа <input>




  See the Pen 


  Input_required_css_in_ua by css. in.ua (@css_in_ua)


  on CodePen.

Різниця між HTML 4.01 та HTML5

Атрибут required з’явився тільки в HTML5.

Різниця між XHTML та HTML

У XHTML мінімізований запис атрибутів заборонений, тому атрибут required повинен бути визначений як <input required="required" />.

Требуется HTML Атрибут

❮ Предыдущий Все атрибуты HTML Далее ❯

Определение и использование

Атрибут required является логическим атрибутом.

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

Применяется к

Обязательный атрибут может использоваться для следующих элементов:

Элементы Атрибут
<ввод> требуется
<выбрать> требуется
<текстовое поле>
 требуется

Примеры

Пример ввода

HTML-форма с обязательным полем ввода:

php»>
Имя пользователя:

Попробуйте сами »

Пример выбора

HTML-форма с обязательным раскрывающимся списком:

Попробуйте сами »

Textarea Пример

Форма с обязательной текстовой областью:




Попробуйте сами »

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

Атрибут required имеет следующую поддержку браузера для каждого элемента:

Элемент 9 0023
ввод 5,0 10,0 4,0 Не поддерживается 9,6
выбрать Да 10,0 Да Не поддерживается Да
текстовая область 5,0 10,0 4,0 Не поддерживается Да

❮ Предыдущий Все атрибуты HTML Далее ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
9000 3

Основные каталожные номера
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Обязательный атрибут HTML — javatpoint

следующий → ← предыдущая

Атрибут HTML Required — это логический атрибут, который указывает, что элемент ввода должен быть заполнен до отправки формы. Этот атрибут используется со следующими элементами:

  1. <ввод>
  2. <выбрать>
  3. <текстовое поле>

<ввод>

Мы можем легко использовать требуемый атрибут с элементом , как показано в следующем синтаксисе:

<требуется ввод>

Пример

<голова> <название> Пример обязательного атрибута с элементом ввода <стиль> див { отступ: 10px 0; } <голова> <тело> <форма> <дел> <дел> <дел> <дел>

Протестируйте сейчас

Вывод:

<выбрать>

Мы можем легко использовать необходимый атрибут с элементом