Главная » Языки программирования

Form input required css

На чтение 9 мин
Содержание
  1. :required
  2. Пример
  3. Как понять
  4. На практике
  5. Денис Ежков советует
  6. :required
  7. Try it
  8. Syntax
  9. Examples
  10. The required field has a red border
  11. HTML
  12. CSS
  13. Result
  14. Accessibility concerns
  15. Specifications
  16. Browser compatibility
  17. See also
  18. Found a content problem with this page?
  19. Styling Form Inputs in CSS With :required, :optional, :valid and :invalid
  20. Introduction
  21. Input pseudo-classes
  22. Here’s the result:
  23. Adding the :focus pseudo-class
  24. And here’s the result:
  25. Простая валидация формы без JS
  26. HTML5
  27. CSS3
  28. Итог

:required

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

Пример

Скопировать ссылку «Пример» Скопировано

Обязательное для заполнения поле ввода будет иметь оранжевую обводку и фоновый цвет:

        form> div class="form-row"> label for="first_name">Имяlabel> input type="text" id="first_name" required> div> div class="form-row"> label for="last_name">Фамилияlabel> input type="text" id="last_name"> div> form>      
 input:required  border-width: 2px; border-color: #FF8630; background-color: rgb(255 134 48 / 0.1);> input:required  border-width: 2px; border-color: #FF8630; background-color: rgb(255 134 48 / 0.1); >

Как понять

Скопировать ссылку «Как понять» Скопировано

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

Обратите внимание, что использование этого псевдокласса эквивалентно селектору по атрибуту [required ] .

Использование псевдокласса :required допускается исключительно с селекторами полей формы. Использовать с другими селекторами его бесполезно.

На практике

Скопировать ссылку «На практике» Скопировано

Денис Ежков советует

Скопировать ссылку «Денис Ежков советует» Скопировано

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

      Обязательно к заполнению     Необязательно   form> div class="form-row"> label class="label-required" for="first_name">Имяlabel> input type="text" id="first_name" required> span class="hint">Обязательно к заполнениюspan> div> div class="form-row"> label for="last_name">Фамилияlabel> input type="text" id="last_name"> span class="hint">Необязательноspan> div> form>      
 .label-required::after  content: "*"; font-size: 0.7em;> .hint  color: #FFFFFF;> input:required + .hint  color: #2E9AFF;> .label-required::after  content: "*"; font-size: 0.7em; > .hint  color: #FFFFFF; > input:required + .hint  color: #2E9AFF; >

Источник

:required

The :required CSS pseudo-class represents any , , or element that has the required attribute set on it.

Try it

This pseudo-class is useful for highlighting fields that must have valid data before a form can be submitted.

Note: The :optional pseudo-class selects optional form fields.

Syntax

Examples

The required field has a red border

HTML

form> div class="field"> label for="url_input">Enter a URL:label> input type="url" id="url_input" /> div> div class="field"> label for="email_input">Enter an email address:label> input type="email" id="email_input" 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

Mandatory s should have the required attribute applied to them. This will ensure that people navigating with the aid of assistive technology such as a screen reader will be able to understand which inputs need valid content to ensure a successful submission.

If the form also contains optional inputs, required inputs should be indicated visually using a treatment that does not rely solely on color to convey meaning. Typically, descriptive text and/or an icon are used.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Mar 12, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Styling Form Inputs in CSS With :required, :optional, :valid and :invalid

Styling Form Inputs in CSS With :required, :optional, :valid and :invalid

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Introduction

When it comes to validating the content of input fields on the frontend, things are much easier now than they they used to be. We can use the :required , :optional , :valid and :invalid pseudo-classes coupled with HTML5 form validation attributes like required or pattern to create very visually engaging results. These pseudo-classes work for input , textarea and select elements.

Input pseudo-classes 

form action="#"> input type="text" placeholder="First Name" required> input type="email" placeholder="Email" required> input type="text" placeholder="Nickname"> input type="text" placeholder="Favorite pizza topping"> form> 
input  border: 2px solid; border-radius: 4px; font-size: 1rem; margin: 0.25rem; min-width: 125px; padding: 0.5rem; transition: background-color 0.5s ease-out; > input:optional  border-color: gray; > input:required  border-color: black; > input:invalid  border-color: red; >

Here’s the result:

See the Pen vYGeLYw by alligatorio (@alligatorio) on CodePen. In the demo above,

Adding the :focus pseudo-class

Let’s make things even more interesting by also styling according to the focus state and add a background image and color depending on the validity state and only when the input is in focus. We’ll use the same HTML markup. Here’s our updated CSS:

input  border: 2px solid; border-radius: 4px; font-size: 1rem; margin: 0.25rem; min-width: 125px; padding: 0.5rem; transition: border-color 0.5s ease-out; > input:optional  border-color: gray; > input:required:valid  border-color: green; > input:invalid  border-color: red; > input:required:focus:valid  background: url("https://assets.digitalocean.com/labs/icons/hand-thumbs-up.svg") no-repeat 95% 50% lightgreen; background-size: 25px; > input:focus:invalid  background: url("https://assets.digitalocean.com/labs/icons/exclamation-triangle-fill.svg") no-repeat 95% 50% lightsalmon; background-size: 25px; >
  1. input:required:valid applies a success state only to required inputs. Because technically, optional inputs are always valid.
  2. input:focus:valid’ and ‘input:focus:invalid apply to inputs only when they are focused.

And here’s the result:

You could be tempted to add content instead using ::before or ::after on the input, but unfortunately that’s not possible on input elements. One trick would be to have a sibling span element that has content added depending on the validity of the input. Something like this:

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Источник

Простая валидация формы без JS

image

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

Давайте попробуем собрать стандартную форму, которая будет включать в себя: Имя, E-Mail, Телефон, Ссылку на сайт и допустим Ваш рост, чтобы поэксперементировать с числовым полем.

HTML5

Сейчас уже никого не удивить атрибутами валидации input полей, которое принес нам стандарт HTML5. Однако, обходить стороной мы его не станем — этот метод валидации является наиболее поддерживаемым в современных браузерах.

Самый простой путь валидации — это определить тип input поля и расставить атрибуты required которые отвечают за обязательность заполнения.

Применение этих двух атрибутов позволит гораздо эффективнее валидировать вводимую информацию нативными методами. Ну и конечно же поддержка этих свойств браузерами наиболее широка.

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

Однако, нам на помощь приходит атрибут pattern. Этот атрибут принимает в себя значение регулярного выражения. В нашем случае рассмотрим вариант паттерна для ввода мобильного телефона в РФ: +7 (123) 456-78-91. Для этого добавим простое регулярное выражение в наше поле с телефоном, а также ограничим минимальное и максимальное количество символов:

\s[\(]\d[\)]\s\d[\-]\d[\-]\d" minlength="18" maxlength="18" />

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

Поддержка браузерами атрибута pattern на данный момент очень хорошая. iOS начиная с версии 10.3 полностью поддерживает данное свойство, до этого наблюдалось отсутствие подсказок о неправильном вводе данных.

Стоит также учитывать, что атрибут minlength до сих пор не поддерживается в браузерах IE, EDGE и только с версии 10.3 появился в iOS. Однако maxlength поддерживается везде и очень давно. Нам в целом хватит и этого.

Давайте также поставим ограничение для поля с ростом. Допустим мы предполагаем, что пользователь нашего сайта определенно не может быть ниже 100 см и выше 250 см. Так и напишем:

С поддержкой этих атрибутов в браузерах, все хорошо.

CSS3

Для того чтобы кастомно стилизовать нашу валидацию, воспользуемся псевдоклассами :invalid и :valid. Поддержка этих псевдоклассов в браузерах позволяет использовать их максимально широко на данный момент.

Казалось бы, берем полученные знания и применяем! Но не все так просто как кажется, давайте проверим как это работает. В результате мы получим, что все наши поля изначально пустые и обязательные будут считаться не валидными, а все остальные валидными. Совсем не красиво и непонятно для пользователя, что от него хотят.

Мы можем пойти на небольшую хитрость и использовать псевдокласс :placeholder-shown. С помощью этого псевдокласса мы можем определить отображается ли сейчас значение placeholder в нашем поле ввода. Атрибут placeholder отображается только тогда, когда в наше поле ничего не введено. Соответственно, чтобы применить этот псевдокласс нам просто нужно обратить его свойство с помощью :not. В итоге получаем вот такую конструкцию:

input:invalid:not(:placeholder-shown) input:valid:not(:placeholder-shown)

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

У данного метода есть только один минус: поддержка. Псевдоэлемент :placeholder-shown поддерживается во всех браузерах кроме IE и EDGE. К счастью :not не обладает таким недостатком.

Для примера я набросал все вышесказанное в CodePen и добавил еще немного возможностей:

Итог

Таким образом, не прибегая к JS мы с помощью двух строк в CSS смогли стилизовать и валидировать форму. На текущий момент такая конструкция будет хорошо работать в большинстве браузеров, к сожалению, как всегда, веб-разработку подводят детища Microsoft.

Источник

Читайте также:  Python функция python может возвращать несколько значений
Оцените статью
© 2023 Программирование