Css required: :required — CSS: Cascading Style Sheets

Псевдокласс CSS :required представляет любой элемент , или , для которого установлен атрибут.

Псевдоселектор класса :required в CSS позволяет авторам выбирать и стилизовать любой сопоставленный элемент с атрибутом required.

Селектор :required выбирает элементы формы,которые являются обязательными.Элементы формы с атрибутом required определяются как требуемые.Примечание:Селектор :required применяется только к элементам формы:input,select и textarea.Совет:Используйте селектор :optional для выбора элементов формы,которые являются необязательными.

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

:required CSS псевдо-класс представляет любой <input> , <select> или <textarea> элемент , который имеет

required набор атрибутов на нем.

/ * Выбирает любой требуемый <input> * /
input:required {
  border: 1px dashed red;
}

Этот псевдо-класс полезен для выделения полей,которые должны иметь достоверные данные,прежде чем форма может быть отправлена.

Примечание . Псевдокласс :optional option выбирает необязательные поля формы.

Syntax

:required

Examples

Обязательное поле имеет красную рамку

HTML

<form>
  <div>
    <label for="url_input">Enter a URL:</label>
    <input type="url">
  </div>
  <div>
    <label for="email_input">Enter an email address:</label>
    <input type="email" required>
  </div>
</form>

CSS

label {
  display: block;
  margin: 1px;
  padding: 1px;
}
.field {
  margin: 1px;
  padding: 1px;
}
input:required {
  border-color: #800000;
  border-width: 3px;
}
input:required:invalid {
  border-color: #c00000;
}

Result

Accessibility concerns

К обязательным <input> должны быть применены required атрибуты. Это гарантирует, что люди, использующие вспомогательные технологии, такие как программы чтения с экрана, смогут понять, для каких входных данных требуется действительный контент для обеспечения успешной отправки.

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

• MDN Понимание ВСАГ,Руководящий принцип 3.3 пояснения
• Понимание Критерий успеха 3.3.2 | W3C Понимание WCAG 2.0

Specifications

Specification
Стандарт HTML # требуется селектор
Селекторы уровня 4 # opt-pseudos

Browser compatibility

	Desktop	Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet
:required	10	12	4	10	10	5	4. 4.3	18	4	10.1	5	1.0

See also

• Другие проверки , связанные с псевдо-классы: :optional , :invalid , :valid
• Проверка данных формы

---

CSS

• :read-only

  Псевдокласс CSS :read-only представляет элемент (например,input или textarea),который не может быть отредактирован пользователем.

• :read-write

  Псевдокласс CSS :read-write представляет элемент (например,input или textarea),который может быть отредактирован пользователем.

• :right

  Псевдокласс CSS :right,используемый с правилом @page at-rule,представляет все правые страницы печатного документа.

• :root

  Псевдокласс CSS :root соответствует элементу дерева,представляющего документ.

• 1
• …
• 89
• 90
• 91
• 92
• 93
• …
• 857
• Next

Селектор CSS: `:required` | Могу ли я использовать.

.. Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

Селектор CSS: `: требуется`

• Глобальное использование

  96,73% + 0% «=» 96,73%

IE

1. 6–9: не поддерживается
2. 10: поддерживается
3. 11: поддерживается

Edge

1. 12 — 110: Supported
2. 111: Supported

Firefox

1. 2 — 3.6: Not supported
2. 4 — 110: Supported
3. 111: Supported
4. 00% — Supported»> 112 — 113: Supported

Chrome

1. 4 — 9: не поддерживается
2. 10 — 110: Поддерживается
3. 111: Поддерживается
4. 112 — 114: Поддержано

Safari

1. 3.1 — 4: не поддерживает
1. 3.1 — 4: не поддержал
1. 3.1 — 4: не поддерживает0014
2. 16,4: Поддерживается
3. 16,5 — TP: Поддерживается

Opera

1. 10 — 94: Поддерживается
2. 95: не поддерживается

Safari на IOS

1. 00% — Not supported»>4 3.2: 40014 — 40014

. Supported

2. 16.4: Supported
3. 16.5: Supported

Opera Mini

1. all: Support unknown

Android Browser

1. 2.1 — 4.3: Not supported
2. 4.4 — 4.4.4: Supported
3. 111: Supported

Opera Mobile

1. 12 — 12.1: Supported
2. 73: Supported

Chrome for Android

1. 111: Supported

Firefox for Android

1. 110: Supported

UC Browser для Android

1. 90% — Support unknown»> 13.4: поддержка неизвестна

Samsung Internet

1. 4–19.0: поддерживается
2. 20: поддерживается

QQ 1 Browser

0018

13,1: поддержка Неизвестно

Baidu Browser

1. 13,18: поддержка Неизвестно

KAIOS BROWER

1. 2,5: поддержка Неизвестно
2. 3: Поддержка. :required Псевдокласс CSS представляет любой элемент , или </code> , для которого установлен атрибут <code> required </code> . </p><pre> /* Выбирает любой требуемый <input> */ ввод: требуется { граница: 1px пунктирная красная; } </pre><p> Этот псевдокласс полезен для выделения полей, в которых должны быть действительные данные, прежде чем форма может быть отправлена.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/originals/64/a2/66/64a26658d6cb52121bd7ebc34ed51404.png' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/originals/64/a2/66/64a26658d6cb52121bd7ebc34ed51404.png' /></noscript><div id="yandex_rtb_2" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript">if(rtbW>=960){var rtbBlockID="R-A-744004-3";} else{var rtbBlockID="R-A-744004-5";} window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo:"yandex_rtb_2",blockId:rtbBlockID,pageNumber:2,onError:(data)=>{var g=document.createElement("ins");g.className="adsbygoogle";g.style.display="inline";if(rtbW>=960){g.style.width="580px";g.style.height="400px";g.setAttribute("data-ad-slot","9935184599");}else{g.style.width="300px";g.style.height="600px";g.setAttribute("data-ad-slot","9935184599");} g.setAttribute("data-ad-client","ca-pub-1812626643144578");g.setAttribute("data-alternate-ad-url",stroke2);document.getElementById("yandex_rtb_2").appendChild(g);(adsbygoogle=window.adsbygoogle||[]).push({});}})});window.addEventListener("load",()=>{var ins=document.getElementById("yandex_rtb_2");if(ins.clientHeight =="0"){ins.innerHTML=stroke3;}},true);</script> </p> <p> <strong> Примечание: </strong> Псевдокласс <code> :необязательный </code> выбирает <em> необязательных </em> полей формы. </p> <h3><span class="ez-toc-section" id="i-4"> Синтаксис </span></h3><pre> :обязательно </pre><h3><span class="ez-toc-section" id="i-5"> Примеры </span></h3> <p> См. пример <code> :invalid </code>. </p> <h3><span class="ez-toc-section" id="i-6"> Вопросы доступности </span></h3> <p> Обязательный <code> <input> </code> s должен иметь <code> обязательный атрибут </code>, примененный к ним. Это гарантирует, что люди, перемещающиеся с помощью вспомогательных технологий, таких как программа чтения с экрана, смогут понять, какие входные данные требуют достоверного контента для обеспечения успешной отправки. </p> <p> Если форма также содержит необязательные входные данные, необходимые входные данные должны быть указаны визуально с использованием обработки, которая не зависит исключительно от цвета для передачи значения. Обычно используется описательный текст и/или значок. </p> <ul> <li> MDN Понимание WCAG, пояснения к Руководству 3.3 </li><center><ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-1812626643144578" data-ad-slot="4491286225"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center> <li> Понимание критерия успеха 3.3.2 | Понимание W3C WCAG 2.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/1/4/7/147a53d48f962c288ab7defe11146e6c.png' /><noscript><img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/1/4/7/147a53d48f962c288ab7defe11146e6c.png' /></noscript> 0 </li> </ul> <h3><span class="ez-toc-section" id="i-7"> Технические характеристики </span></h3> <table> <thead> <tr> <th scope="col"> Спецификация </th> <th scope="col"> Статус </th> <th scope="col"> Комментарий </th> </tr> </thead> <tbody> <tr> <td> HTML Living Standard <br/> <small lang="en-US"> Определение ‘:required’ в этой спецификации. </small> </td> <td> Уровень жизни </td> <td> Без изменений. </td> </tr> <tr> <td> HTML5 <br/> <small lang="en-US"> Определение ‘:required’ в этой спецификации. </small> </td> <td> Рекомендация </td> <td> Определяет семантику HTML и проверку ограничений. </td> </tr> <tr> <td> Селекторы уровня 4 <br/> <small lang="en-US"> Определение ‘:required’ в этой спецификации. </small> </td> <td> Рабочий проект </td> <td> Без изменений. </td> </tr> </tbody> </table> <h3><span class="ez-toc-section" id="i-8"> Совместимость с браузером </span></h3> <p><div id="yandex_rtb_1" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript">if(rtbW>=960){var rtbBlockID="R-A-744004-3";} else{var rtbBlockID="R-A-744004-5";} window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo:"yandex_rtb_1",blockId:rtbBlockID,pageNumber:1,onError:(data)=>{var g=document.createElement("ins");g.className="adsbygoogle";g.style.display="inline";if(rtbW>=960){g.style.width="580px";g.style.height="400px";g.setAttribute("data-ad-slot","9935184599");}else{g.style.width="300px";g.style.height="600px";g.setAttribute("data-ad-slot","9935184599");} g.setAttribute("data-ad-client","ca-pub-1812626643144578");g.setAttribute("data-alternate-ad-url",stroke2);document.getElementById("yandex_rtb_1").appendChild(g);(adsbygoogle=window.adsbygoogle||[]).push({});}})});window.addEventListener("load",()=>{var ins=document.getElementById("yandex_rtb_1");if(ins.clientHeight =="0"){ins.innerHTML=stroke3;}},true);</script> Таблица совместимости на этой странице создана на основе структурированных данных. Если вы хотите внести свой вклад в данные, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос на включение.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/burenka33.ru/wp-content/uploads/d/3/c/d3c91422a6565e8992a5a4a677e2d120.png' /><noscript><img loading='lazy' src='/800/600/http/burenka33.ru/wp-content/uploads/d/3/c/d3c91422a6565e8992a5a4a677e2d120.png' /></noscript> </p> <table> <thead> <tr> <td/> <th colspan="6"> Desktop </th> <th colspan="6"> Mobile </th> </tr> <tr> <td/> <th> Chrome </th> <th> Edge </th> <th> Firefox </th> <th> Internet Explorer </th> <th> Opera </th> <th> Safari </th> <th> Android webview </th> <th> Chrome for Android </th> <th> Firefox for Android </th> <th> Opera for Android </th> <th> Safari на iOS </th> <th> Samsung Internet </th> </tr> </thead> <tbody> <tr> <th scope="row"> <code> : обязательно </code> </th> <td> Chrome <abbr> Полная поддержка </abbr> 10 </td> <td> Край <abbr> Полная поддержка </abbr><center><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1812626643144578" data-ad-slot="3076124593" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center> 12 </td> <td> Firefox <abbr> Полная поддержка </abbr> 4 </td> <td> ИЭ <abbr> Полная поддержка </abbr> 10 </td> <td> Опера <abbr> Полная поддержка </abbr> 10 </td> <td> Сафари <abbr> Полная поддержка </abbr> 5 </td> <td>Веб-просмотр Android <abbr> Полная поддержка </abbr> 4.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/originals/e2/0a/ee/e20aeeb181ee417d40c84ea01a540778.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/originals/e2/0a/ee/e20aeeb181ee417d40c84ea01a540778.jpg' /></noscript> </div> </div> </div> </article> <nav class="navigation post-navigation" aria-label="Записи"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><div class="nav-previous"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/kak-sdelat-v-vorde-skobki-elochki-kak-postavit-kavychki-elochki-na-klaviature-i-v-word-4-sposoba.html" rel="prev">Как сделать в ворде скобки елочки: Как поставить кавычки «елочки» на клавиатуре и в Word: 4 способа</a></div><div class="nav-next"><a href="https://xn--90abhccf7b.xn--p1ai/html/html-onsubmit-form-sobytie-onsubmit-htmlbook-ru.html" rel="next">Html onsubmit form: Событие onsubmit | htmlbook.ru</a></div></div> </nav><div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/css/css-required-required-css-cascading-style-sheets.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--90abhccf7b.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required>

   Имя *

   Email *

   Сайт