Обязательное поле для заполнения html: Атрибут required | htmlbook.ru

06.04.202131.03.2021 No Comments

Содержание

Защита от дурака | htmlbook.ru

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

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

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

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

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

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

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

HTML5IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Обязательное поле</title>
 </head>
 <body>
  <form>
   <p>Логин: <input name="login" required></p>
   <p>Пароль: <input type="password" name="login" required></p>
   <p><input type="submit" value="Вход"></p>
  </form>
 </body>
</html>

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

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

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

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

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

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

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

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

HTML5IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Корректность данных</title>
 </head>
 <body>
  <form>
   <p>Заполните форму (все поля  обязательны)</p>
   <p>Имя: <input name="name" required></p>
   <p>Email: <input type="email" name="email" required></p>
   <p>Сайт: <input type="url" name="site" required></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Opera проверяет элемент формы только при наличии атрибута name.[ 0-9]+$Любое количество цифр.\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}IP-адрес.[0-9]{6}Почтовый индекс.\d+(,\d{2})?Цена в формате 1,34 (разделитель запятая).\d+(\.\d{2})?Цена в формате 2.10 (разделитель точка).

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

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

HTML5IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ввод цвета</title>
 </head>
 <body>
  <form>
   <p>Введите шестнадцатеричное значение цвета 
   (должно начинаться с #)</p>
   <p><input name="digit" required pattern="#[0-9A-Fa-f]{6}"></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

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

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

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

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

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

HTML5IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут novalidate</title>
 </head>
 <body>
  <form novalidate>
   <p><input name="user" required placeholder="Ваше имя"></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

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

<form>
  <p><input name="user" required placeholder="Ваше имя"></p>
  <p><input type="submit" value="Отправить" formnovalidate></p>
</form>

Как сделать поля в форме обязательными для заполнения за 1 минуту в HTML

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

До недавнего времени самым популярным способом было использование jаvascript. Очень удобной библиотекой является jquery validation. Данный способ является современным, но для его интеграции в форму на сайте нужны некоторые навыки работы и время.

С появлением html 5 и его повсеместной интеграцией на современные сайты можно отказаться от использования jаvascript. При этом для того, чтобы сделать поле в форме обязательным для заполнения нужно только добавить атрибут required.

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

А для создания таких полей потребуется не больше минуты.

Итак, допустим есть небольшая форма:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Регистрация</title> </head> <body> <form action="registration.php"> <p><label for="name">Имя</label> <input type="text"></p> <p><label for="pass">Пароль</label> <input type="password"></p> <p><label for="pol">Пол</label> <select name="pol"> <option value="">Указать</option> <option value="1">Мужской</option> <option value="2">Женский</option> </select> </p> <p><input type="submit" value="Регистрация"></p> </form> </body> </html>

Вот так она выглядит в браузере:

Теперь делаем некоторые поля в форме обязательными для заполнения:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Регистрация</title> </head> <body> <form action="registration.php"> <p><label for="name">Имя</label> <input type="text" required></p> <p><label for="pass">Пароль</label> <input type="password" required></p> <p><label for="pol">Пол</label> <select name="pol" required> <option value="">Указать</option> <option value="1">Мужской</option> <option value="2">Женский</option> </select> </p> <p><input type="submit" value="Регистрация"></p> </form> </body> </html>

Вот и все. Мы сделали все поля обязательными для заполнения меньше, чем за 1 минуту. Если не заполнять обязательные поля, то мы увидим следующие сообщения:

И, немаловажное. Данная проверка работает во всех современных браузерах и только для спецификации html 5. Для непосвященных — в начале html кода нужно вставить тег <!DOCTYPE html>.

Визуальное оформление HTML формы. Bootstrap

Поделиться в соц. сетях:

Обязательные поля формы. Как сделать поля формы обязательными

От автора: приветствую вас, друзья. В этой статье мы с вами поговорим о валидации форм. Мы узнаем, как проверить форму перед отправкой на заполнение обязательных полей формы. Начнем?

Исходные файлы текущей статьи вы можете скачать по ссылке.

Итак, перед нами есть простейшая форма с полями, каждое из которых мы хотим сделать обязательным к заполнению. Каждое поле формы имеет тип text и примерно следующий код:

<div>

<div>

</div>

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Ранее для валидации формы на клиенте нельзя было обойтись без возможностей JavaScript. Есть множество плагинов, позволяющих гибко провести валидацию формы и, в частности, проверить, заполнены ли обязательные поля. Однако в HTML5 можно вовсе обойтись без JavaScript и провести валидацию только средствами HTML5. Давайте посмотрим, как это сделать.

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

А теперь попробуем отправить форму, не заполняя ее.

Как видим браузер не дает отправить форму, подсказывая, что поле не заполнено. Чтобы помочь и подсказать пользователю, какие поля являются обязательными, принято рядом ставить красную звездочку, примерно так:

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

Также стоит упомянуть о том, что кроме атрибута required, HTML5 предлагает нам и другие средства, позволяющие произвести простейшую валидацию и проверку формы на клиенте. Например, мы может проверить введен ли именно email в поле email, а не просто некая строка. Как это сделать — мы узнаем уже в следующей статье. Также не забывайте о том, что гибкая валидация формы возможно с помощью JavaScript. По этой теме вы можете посмотреть данный урок. На этом все. Удачи!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Улучшаем обязательные поля формы при помощи CSS3

Сегодня я хочу поделиться с вами простым эффектом для форм, а именно: как улучшить обязательные поля в форме. Многие веб-формы выполнены в минималистичном стиле, то есть только набор самых необходимых данных для пользователей. Например, в форме регистрации вы не хотите, чтобы ваш потенциальный клиент заполнял слишком много полей, так как это может привести к тому, что пльзователь откажется от регистрации. Но есть и много других форм с дополнительной информацией, где пользователь готов или ему необходимо заполнить дополнительные поля. Это может быть форма заказа или объявление на сайте.

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

Идея состоит в том, чтобы позволить пользователю обратить внимание только на обязательные поля. Обычно обязательные поля отмечают при помощи звездочки (*) или чего то похожего, но мы хотим пойти дальше и создать небольшой интерактивный эффект для лучшей визуализации обязательных полей при заполнении.

Для этого мы создадим форму с полями, каждое в отдельном блоке, к которым будем применять самые разнообразные действия. Блок с полем будет иметь дополнительный класс, если поле является обязательным (af-required):

<form novalidate>

<div>
<div>
<label>Title</label>
<input type=»text» name=»title»>
</div>
</div>

<div>
<div>
<label>Name</label>
<input type=»text» name=»fullname» required>
</div>
</div>

<!— … —>

</form>

Мы рассмотрим в данной статье пример из Demo 2, в котором будем прятать необязательные поля. Для этого мы будем уменьшать высоту блоков-оболочек.

Мы добавим переход для внешнего блока-оболочки (div), определим фиксированную высоту и установим overflow: hidden, потому что мы не хотим, чтобы содержание было видимым, когда мы уменьшим высоту:

.af-outer {
overflow: hidden;
height: 70px;
box-shadow: 0 1px 0 #f5f5f5 inset;
transition: all 0.5s linear;
}

Для внутреннего блока-оболочки (div), мы установим transform-origin равный “center top”, так что мы можем видеть его масштабирование в то время как мы уменьшаем высоту внешнего блока-оболочки. Первоначально масштаб равен 1 (поэтому это не обязательно определять в стилях):

.af-inner {
padding: 15px 20px 15px 20px;
transform-origin: center top;
transform: scale(1);
transition: all 0.5s linear;
}

В верхней части формы у нас есть небольшая кнопка (флажок) с идентификатором af-showreq и когда мы кликаем по кнопке, необязательные поля будут уменьшаться. Мы можем использовать псевдо-класс :not, чтобы добраться до желаемого элемента, но вы также, конечно, можете дать соответствующие классы необязательным полям, и получить к ним доступ непосредственно при помощи обобщенного родственного комбинатора (~).

Таким образом, мы будем уменьшать высоту внешнего блока-обертки, и уменьшать и постепенно скрывать внутренний блок:

#af-showreq:checked ~ .af-form .af-outer:not(.af-required) {
height: 0px;
visibility: hidden;
}
#af-showreq:checked ~ .af-form .af-outer:not(.af-required) .af-inner {
transform: scale(0);
opacity: 0;
}

Установка свойства visibility равное hidden будет гарантировать, что мы можем перемещать курсор по полям при помощи клавиши Tab, минуя скрытые поля. Здесь мы не можем использовать display: none, потому что наш переход (transition) не будет работать.

Надеюсь, вам понравились эти примеры!

Демонстрация

Скачать исходные файлы

Перевод статьи с tympanus.net/codrops

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Эффективные HTML-формы. Часть 2

21 апреля 2016

Facebook

Twitter

Вконтакте

Google+

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

Выделяйте обязательные поля

До появления HTML5 принятой практикой выделения полей, обязательных для заполнения, был символ звездочки (*), установленный возле названия поля, но в новой спецификации появился специальный атрибут required , который позволяет отметить обязательное поле на уровне разметки.

<input required …>

Этот атрибут дает указание браузеру (при условии, что тот поддерживает HTML5), указание не отправлять данные после нажатия пользователем кнопки отправить , пока указанные поля не заполнены. К сожалению, голосовые браузеры пока не воспринимают этот атрибут, но для них есть его эквивалент: aria-required. Добавление этого атрибута со значение true делает указанное поле обязательным для заполнения до отправки данных формы на сервер.

<input required aria-required=”true” …>

Помечайте ошибки

Критически важно помочь пользователю быстро исправить ошибку, если он ее допустил. По умолчанию браузеры, которые поддерживают HTML5, поставят курсор на первое поле с ошибкой и выведут стандартное сообщение. Существует возможность управлять этим сообщением с помощью setCustomValidity(), но это не самое важное. Давайте сосредоточимся на том, как мы обрабатываем ошибки на серверной стороне. Если сервер столкнулся с ошибкой в полученных данных, лучшее, что он может предпринять перенаправить пользователя обратно на страницу с формой, в которую уже будут забиты введенные ранее данные.

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

<input … aria-describedby=”email-error”>
<em id=”email-error” class=”error-msg”>Неверный формат ввода email.</em>

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

<input … aria-invalid=”true”>

Если вы хотите все сделать абсолютно правильно, вы можете сгенерировать список ошибок с возможностью перехода к соответствующему полю по клику на элементе этого списка.

<div role=”alert”>
  <p>There were errors with your form submission:</p>
  <ol>
    <li><a href=”#message”>Message</a> is required</li>
     <! — errors continue… →
  </ol>
</div>

У этой практики есть два неоспоримых преимущества:

Пользователи получают полный список ошибок с возможностью быстрого перехода к нужному полю;
1. Атрибут role со значением alert сообщает голосовому браузеру о том, что нужно издать специальный сигнал и начать чтение содержимого этого блока сразу после загрузки страницы.

Отличный UX начинается с контента

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

Кнопки должны быть кнопками

Не так давно мысль о необходимости работы со стилями кнопок вызывала легкую дрожь. Это было связано с тем, что большинство стилей просто не работало с input с типом button, а элемент button обладал фантомными полями, которые было довольно сложно удалить. Для того чтобы избежать борьбы с ветряными мельницами многие использовали другие элементы (a, div и т.д.), чтобы с помощью скриптов создать на их основе кнопку отправки формы.

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

aria-describedby или aria-labeledby

ARIA (Accessible Rich Internet Applications) поддерживает два подобных подхода: described by (описание) и labeled by (пометка). Так как решения очень похожи, довольно сложно сделать правильный выбор в каждом конкретном случае. Впрочем, есть отличный способ проиллюстрировать разницу между ними:

<label id=”email-label”>Your Email</label>
<input … aria-labeledby=”email” aria-describedby=”email-note”>
<em id=”email-note” class=”note”>We will only use…</em>

Разница в том, как они используются в конечном итоге, и в какой момент считываются. Атрибут aria-labeledby’ будет считан первым, раньше всей другой информации, связанной с этим полем; потом будет считана вся остальная информация, и лишь потом aria-describedby .

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

Facebook

Twitter

Вконтакте

Google+

— HTML | MDN

<input> элементы типа "password" предоставляют пользователю возможность безопасного ввода пароль. Элемент представлен как однострочный текстовый редактор, в котором текст затенён, чтобы его нельзя было прочитать, как правило, путём замены каждого символа другим символом, таким как звёздочка («*») или точка («•»). Этот символ будет меняться в зависимости от user agent и OS.

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

Любые формы, содержащие конфиденциальную информацию, такую как пароли (например, формы входа), должны обслуживаться через HTTPS; В Firefox теперь реализованы несколько механизмов для предупреждения от небезопасных форм входа в систему — см. Небезопасные пароли. Другие браузеры также реализуют аналогичные механизмы.

<input type="password">

Value	`DOMString` представляет пароль или пустую строку
События	`change (en-US)` и `input (en-US)`
Общие поддерживаемые атрибуты	`autocomplete`, `inputmode`, `maxlength`, `minlength`, `pattern`, `placeholder`, `readonly`, `required`, and `size`
IDL атрибуты	`selectionStart`, `selectionEnd`, `selectionDirection`, и `value`
Методы	`select()` (en-US), `setRangeText()` (en-US), и `setSelectionRange()`

Атрибут value содержит DOMString , значение которого является текущим содержимым элемента редактирования текста, используемого для ввода пароля. Если пользователь ещё ничего не указал, это значение представляет собой пустую строку (""). Если указано свойство required, то поле ввода пароля должно содержать значение, отличное от пустой строки, которое должно быть действительным.

Если указан атрибут pattern, содержимое элемента управления "password" считается действительным только в том случае, если значение проходит проверку; см. Validation для получения дополнительной информации.

Символы строки (U+000A) и возврата каретки(U+000D) недопустимы в значении поля "password". При вставке пароля, возвращаемые символы удаляются из значения.

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

Простое поле ввода пароля

Здесь мы видим самый простое поле ввода пароля, с меткой, установленной с помощью элемента <label>.

<label for="userPassword">Пароль:</label>
<input type="password">

Поддержка автозаполнения

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

"on": Разрешить браузеру или менеджеру паролей автоматически заполнять поле пароля. Это не так информативно, как использование "current-password" или "new-password".
"off": Запрещает браузеру или менеджеру паролей автоматически заполнять поле пароля.
"current-password": Разрешить браузеру или менеджеру паролей вводить текущий пароль для сайта. Это даёт больше информации, чем "on", так как позволяет браузеру или менеджеру паролей знать, что в настоящее время известен пароль для сайта в поле, а не используется новый.
"new-password": Разрешить браузеру или менеджеру паролей автоматически вводить новый пароль для сайта. Он может быть автоматически сгенерирован на основе других атрибутов элемента управления или может просто указать браузеру представить виджет «предлагаемого нового пароля».

<label for="userPassword">Пароль:</label>
<input type="password" autocomplete="current-password">

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

Чтобы сообщить браузеру пользователя, что поле пароля должно иметь действительное значение перед отправкой формы, просто укажите Boolean атрибут required.

<label for="userPassword">Пароль:</label>
<input type="password" required>

Указание режима ввода

Если ваше приложение лучше обслуживается с использованием другого режима ввода, чем по умолчанию, вы можете использовать атрибут inputmode для определённого запроса. Наиболее очевидным вариантом использования является то, что ваше приложение использует в качестве пароля числовое значение (например, ПИН). Например, мобильные устройства с виртуальными клавиатурами могут переключаться на макет цифровой клавиатуры вместо полной клавиатуры, чтобы облегчить ввод пароля.

<label for="pin">ПИН:</label>
<input type="password" inputmode="numeric">

Настройка длины пароля

Как обычно, вы можете использовать атрибуты minlength и maxlength, чтобы установить минимальную и максимальную допустимую длину пароля , Этот пример дополняет предыдущий, указав, что PIN-код пользователя должен быть не менее четырёх и не более восьми цифр. Атрибут size используется для обеспечения того, чтобы элемент управления ввода пароля имел ширину в восемь символов.

<label for="pin">ПИН:</label>
<input type="password" inputmode="numeric" minlength="4"
       maxlength="8" size="8">

Выделение текста

Как и другие элементы управления текстовой записью, вы можете использовать метод select() (en-US) для выбора всего текста в поле пароля.

HTML

<label for="userPassword">Пароль</label>
<input type="password" size="12">
<button>Выделить все</button>

JavaScript

document.getElementById("selectAll").onclick = function(event) {
  document.getElementById("userPassword").select();
}

Результат

Вы также можете использовать selectionStart и selectionEnd, чтобы получить (или установить), какой диапазон символов в элементе управления, и selectionDirection, чтобы узнать, какой выбор направления произошёл (или будет расширен в зависимости от вашей платформы, см. его документацию для объяснения) , Однако, учитывая, что текст затенён, их полезность несколько ограничена.

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

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

<label for="hexId">Hex ID:</label>
<input type="password" pattern="[0-9a-fA-F]{4,8}"
       title="Enter an ID consisting of 4-8 hexadecimal digits">

disabled: Этот Boolean атрибут указывает, что поле пароля недоступно для взаимодействия. Кроме того, отключённые значения полей не отправляются с формой.

Запрос номера социального страхования

В этом примере принимается только ввод, который соответствует формату действительного номера социального страхования Соединённых Штатов. Эти цифры, используемые для целей налогообложения и идентификации в США, представлены в форме «123-45-6789». Также существуют различные правила, для которых допустимы значения в каждой группе.

HTML

<label for="ssn">SSN:</label>
<input type="password" inputmode="number" minlength="9" maxlength="12"
    pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}"
    required autocomplete="off">
<br>
<label for="ssn">Value:</label>
<span></span>

Здесь используется pattern , который ограничивает введённое значение строками, представляющими номера юридической информации Социальной защиты. Очевидно, что это регулярное выражение не гарантирует действительный SSN, но гарантирует, что число может быть единым; он обычно избегает недопустимых значений. Кроме того, он позволяет разделять три группы цифр пробелом, тире («-«) или ничем.

В inputmode установлено значение "number", чтобы побудить устройства с виртуальными клавиатурами переключаться на макет цифровой клавиатуры для облегчения ввода. Для атрибутов minlength и maxlength установлено значение 9 и 12 соответственно, чтобы требовалось, чтобы значение было не менее девяти и не более 12 символов (первый не разделяет символы между группами цифр и последними с ними). Атрибут required используется для указания того, что этот элемент управления должен иметь значение. Наконец, autocomplete установлен "off", чтобы избежать попыток установить пароли менеджеров паролей.

JavaScript

var ssn = document.getElementById("ssn");
var current = document.getElementById("current");

ssn.oninput = function(event) {
  current.innerHTML = ssn.value;
}

Результат

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	1.0 (1.7 или ранее)	2	1.0	1.0
accesskey	1.0	(Да)	6	1.0	?
autocomplete	17.0	4.0 (2.0)	5	9.6	5.2
autofocus	5.0	4.0 (2.0)	10	9.6	5.0
disabled	1.0	1.0 (1.7 или ранее)^[4]	6	1.0	1.0
form	9.0	4.0 (2.0)	?	10.62	?
formaction	9.0	4.0 (2.0)	10	10.62	5.2
formenctype	9.0	4.0 (2.0)	10	10.62	?
formmethod	9.0	4.0 (2.0)	10	10.62	5.2
formnovalidate	5.0^[1]	4.0 (2.0)	10	10.62	?
formtarget	9.0	4.0 (2.0)	10	10.62	5.2
inputmode	Нет	Нет	Нет	Нет	Нет
maxlength	1.0	1.0 (1.7 или ранее)	2	1.0	1.0
minlength	40.0	?	?	?	?
name	1.0	1.0 (1.7 или ранее)	2	1.0	1.0
pattern	5.0	4.0 (2.0)	10	9.6	Нет
placeholder	10.0	4.0 (2.0)	10	11.00	5.0
readonly	1.0	1.0 (1.7 или ранее)	6^[2]	1.0	1.0
required	5.0 10^[3]	4.0 (2.0)	10	9.6	Нет
size	1.0	1.0 (1.7 или ранее)	2	1.0	1.0
Crossed out lock in address bar to indicate insecure login page	Implementing something similar	51 (51)	?	?	?
Message displayed next to password field to indicate insecure login page, plus autofill disabled	Нет	52 (52)	Нет	Нет	Нет

Feature	Chrome mobile	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	(Да)	4.0 (2.0)	(Да)	(Да)	(Да)
accesskey	?	?	?	?	?
autocomplete	?	4.0 (2.0)	(Да)	(Да)	(Да)
autofocus	3.2	4.0 (2.0)	?	(Да)	?
disabled	(Да)	4.0 (2.0)	(Да)	(Да)	(Да)
form	?	?	?	?	?
formaction	?	4.0 (2.0)	?	10.62	5.0
formenctype	?	?	?	?	?
formmethod	?	4.0 (2.0)	?	10.62	5.0
formnovalidate	?	4.0 (2.0)	?	10.62	?
formtarget	?	4.0 (2.0)	?	10.62	5.0
inputmode	Нет	Нет	Нет	Нет	Нет
maxlength	(Да)	4.0 (2.0)	(Да)	(Да)	(Да)
minlength	?	?	?	27.0	?
name	(Да)	4.0 (2.0)	(Да)	(Да)	1.0
pattern	?	4.0 (2.0)	?	(Да)	(Да)
placeholder	2.3	4.0 (2.0)	?	11.10	4
required	?	(Да)	?	(Да)	?
size	(Да)	4.0 (2.0)	(Да)	(Да)	(Да)
Crossed out lock in address bar to indicate insecure login page	Implementing something similar	51.0 (51)	?	?	?
Message displayed next to password field to indicate insecure login page, plus autofill disabled	Нет	52.0 (52)	Нет	Нет	Нет

[1] В версии 6.0 он работал только с типом документа HTML5, поддержка проверки в 7.0 была отключена и повторно включена в 10.0.

[2] Отсутствует для type="checkbox" и type="radio".

[3] Поддерживается для элемента <select>.

[4] Firefox, в отличие от других браузеров, по умолчанию сохраняет состояние динамического отключения и (если применимо) динамическую проверку из <input> для загрузки страницы. Установка значения атрибута autocomplete в off отключает эту функцию; это работает, даже если атрибут autocomplete обычно не применяется к <input> в силу его type. Смотри баг 654072.

Поля формы — Документация Django 1.9

При создании класса Form наиболее важной деталью является определение полей формы. Каждое поле обладает собственной логикой проверки вводимых данных наряду с дополнительными возможностями.

Несмотря на то, что обычно классы Field используются внутри классов Form, вы можете создавать их объекты самостоятельно, чтобы понять как они работают. Каждый экземпляр класса Field имеет метод clean(), который принимает единственный аргумент и который вызывает исключение django.forms.ValidationError в случае ошибки или возвращает чистое значение:

Базовые аргументы поля

Каждый конструктор класса Field принимает эти аргументы. Некоторые классы Field принимают дополнительные аргументы. Перечисленные ниже аргументы принимаются всеми полями:

required

Field.required

По умолчанию каждый класс Field предполагает значение обязательным. Таким образом, если вы передадите ему пустое значение, т.е. None или пустую строку (""), то метод clean() вызовет исключение ValidationError:

>>> from django import forms
>>> f = forms.CharField()
>>> f.clean('foo')
'foo'
>>> f.clean('')
Traceback (most recent call last):
...
ValidationError: ['This field is required.']
>>> f.clean(None)
Traceback (most recent call last):
...
ValidationError: ['This field is required.']
>>> f.clean(' ')
' '
>>> f.clean(0)
'0'
>>> f.clean(True)
'True'
>>> f.clean(False)
'False'

Для того, чтобы сделать поле “необязательным” передайте required=False в конструктор Field:

>>> f = forms.CharField(required=False)
>>> f.clean('foo')
'foo'
>>> f.clean('')
''
>>> f.clean(None)
''
>>> f.clean(0)
'0'
>>> f.clean(True)
'True'
>>> f.clean(False)
'False'

Если Field получило required=False и вы передали в метод clean() пустое значение, то метод вернёт нормализованное пустое значение, а не вызовет исключение ValidationError. Для CharField таким значением будет юникодная пустая строка. Для других классов Field этим значением может быть None. (Это поведение меняется от поля к полю.)

label

Field.label

Аргумент label позволяет вам определить “видимую людьми” метку для этого поля. Оно используется когда Field отображается на форме.

Как показано ранее в Выдаче формы в виде HTML, стандартная метка для Field создаётся из имени поля, с преобразованием всех символов подчёркивания в пробелы и переводом первой буквы в верхний регистр. Укажите label, если это стандартная метка не подходит для вашей задачи.

Ниже приведён пример формы, которая определяет метки для двух своих полей. Мы используем auto_id=False для упрощения вывода:

>>> from django import forms
>>> class CommentForm(forms.Form):
...     name = forms.CharField(label='Your name')
...     url = forms.URLField(label='Your website', required=False)
...     comment = forms.CharField()
>>> f = CommentForm(auto_id=False)
>>> print(f)
<tr><th>Your name:</th><td><input type="text" name="name" /></td></tr>
<tr><th>Your website:</th><td><input type="url" name="url" /></td></tr>
<tr><th>Comment:</th><td><input type="text" name="comment" /></td></tr>

label_suffix

Field.label_suffix

Добавлено в Django 1.8.

Аргумент label_suffix позволяет вам переопределить атрибут формы label_suffix для каждого поля:

>>> class ContactForm(forms.Form):
...     age = forms.IntegerField()
...     nationality = forms.CharField()
...     captcha_answer = forms.IntegerField(label='2 + 2', label_suffix=' =')
>>> f = ContactForm(label_suffix='?')
>>> print(f.as_p())
<p><label for="id_age">Age?</label> <input name="age" type="number" /></p>
<p><label for="id_nationality">Nationality?</label> <input name="nationality" type="text" /></p>
<p><label for="id_captcha_answer">2 + 2 =</label> <input name="captcha_answer" type="number" /></p>

initial

Field.initial

Аргумент initial позволяет определять начальное значение для поля, при его отображении на незаполненной форме.

Для определения динамических начальных данных, используйте параметр Form.initial.

Использование этого аргумента подходит для отображения пустой формы, в которой поля будут иметь указанные значения. Например:

>>> from django import forms
>>> class CommentForm(forms.Form):
...     name = forms.CharField(initial='Your name')
...     url = forms.URLField(initial='http://')
...     comment = forms.CharField()
>>> f = CommentForm(auto_id=False)
>>> print(f)
<tr><th>Name:</th><td><input type="text" name="name" value="Your name" /></td></tr>
<tr><th>Url:</th><td><input type="url" name="url" value="http://" /></td></tr>
<tr><th>Comment:</th><td><input type="text" name="comment" /></td></tr>

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

>>> class CommentForm(forms.Form):
...     name = forms.CharField()
...     url = forms.URLField()
...     comment = forms.CharField()
>>> default_data = {'name': 'Your name', 'url': 'http://'}
>>> f = CommentForm(default_data, auto_id=False)
>>> print(f)
<tr><th>Name:</th><td><input type="text" name="name" value="Your name" /></td></tr>
<tr><th>Url:</th><td><ul><li>Enter a valid URL.</li></ul><input type="url" name="url" value="http://" /></td></tr>
<tr><th>Comment:</th><td><ul><li>This field is required.</li></ul><input type="text" name="comment" /></td></tr>

Это главная причина, по которой начальные значения отображаются только на незаполненных формах. Для заполненных форм, HTML код всегда будет содержать введённые в форму данные.

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

>>> class CommentForm(forms.Form):
...     name = forms.CharField(initial='Your name')
...     url = forms.URLField(initial='http://')
...     comment = forms.CharField()
>>> data = {'name': '', 'url': '', 'comment': 'Foo'}
>>> f = CommentForm(data)
>>> f.is_valid()
False
# The form does *not* fall back to using the initial values.
>>> f.errors
{'url': ['This field is required.'], 'name': ['This field is required.']}

Вместо констант вы также можете передавать любой исполняемый объект (callable):

>>> import datetime
>>> class DateForm(forms.Form):
...     day = forms.DateField(initial=datetime.date.today)
>>> print(DateForm())
<tr><th>Day:</th><td><input type="text" name="day" value="12/23/2008" /><td></tr>

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

help_text

Field.help_text

Аргумент help_text позволяет указать описание для поля. Если вы укажете help_text, он будет показан около поля при отображении формы с помощью вспомогательных методов Form (например, через as_ul()).

Как и параметр поля модели help_text, это значение выводится при генерации формы без экранирования спецсимволов HTML.

Ниже представлен пример формы, в которой help_text определён у двух полей. Мы используем auto_id=False для упрощения вывода:

>>> from django import forms
>>> class HelpTextContactForm(forms.Form):
...     subject = forms.CharField(max_length=100, help_text='100 characters max.')
...     message = forms.CharField()
...     sender = forms.EmailField(help_text='A valid email address, please.')
...     cc_myself = forms.BooleanField(required=False)
>>> f = HelpTextContactForm(auto_id=False)
>>> print(f.as_table())
<tr><th>Subject:</th><td><input type="text" name="subject" maxlength="100" /><br /><span>100 characters max.</span></td></tr>
<tr><th>Message:</th><td><input type="text" name="message" /></td></tr>
<tr><th>Sender:</th><td><input type="email" name="sender" /><br />A valid email address, please.</td></tr>
<tr><th>Cc myself:</th><td><input type="checkbox" name="cc_myself" /></td></tr>
>>> print(f.as_ul()))
<li>Subject: <input type="text" name="subject" maxlength="100" /> <span>100 characters max.</span></li>
<li>Message: <input type="text" name="message" /></li>
<li>Sender: <input type="email" name="sender" /> A valid email address, please.</li>
<li>Cc myself: <input type="checkbox" name="cc_myself" /></li>
>>> print(f.as_p())
<p>Subject: <input type="text" name="subject" maxlength="100" /> <span>100 characters max.</span></p>
<p>Message: <input type="text" name="message" /></p>
<p>Sender: <input type="email" name="sender" /> A valid email address, please.</p>
<p>Cc myself: <input type="checkbox" name="cc_myself" /></p>

error_messages

Field.error_messages

Аргумент error_messages позволяет изменить стандартные сообщения об ошибках, которые выдаёт поле. Создайте словарь с ключами тех сообщений, которые вы желаете изменить. Например, стандартное сообщение об ошибке:

>>> from django import forms
>>> generic = forms.CharField()
>>> generic.clean('')
Traceback (most recent call last):
  ...
ValidationError: ['This field is required.']

А вот собственное сообщение об ошибке:

>>> name = forms.CharField(error_messages={'required': 'Please enter your name'})
>>> name.clean('')
Traceback (most recent call last):
  ...
ValidationError: ['Please enter your name']

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

validators

Field.validators

Аргумент validators позволяет указать список функций, осуществляющих проверку поля.

Обратитесь к документации на валидаторы для подробной информации.

localize

Field.localize

Аргумент localize включает локализацию для данных формы, как на входе, так и на выходе.

Обратитесь к документации на формат локализации для подробной информации.

disabled

Field.disabled

Добавлено в Django 1.9.

disabled принимает булево значение. При True выключает поля формы, используя HTML атрибут disabled. Даже если пользователь отправит данные для этого поля, они будут проигнорированы и будет использоваться значение из начальных данных, которые были переданы в форму.

Классы встроенных полей

Библиотека форм поставляется с набором классов Field, которые предоставляют решение общих задач проверки данных. Этот раздел описывает каждое встроенное поле.

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

BooleanField

class BooleanField(**kwargs)

Стандартный виджет: CheckboxInput
Пустое значение: False.
Возвращает: True или False языка Python.
Гарантирует, что значение равно True (т.е. чекбокс отмечен), если поле имеет атрибут required=True.
Ключи сообщений об ошибках: required.

Примечание

Так как все потомки Field по умолчанию имеют required=True, это условие проверки имеет большое значение. Если вам требуется включить в свою форму булево значение, которое может принимать значения True или False (т.е. отмеченный или неотмеченный чекбокс), то вы должны передать required=False в создаваемое поле BooleanField.

CharField

class CharField(**kwargs)

Стандартный виджет: TextInput
Пустое значение: '' (пустая строка).
Возвращает: Объект Unicode.
Проверяет max_length или min_length, если они указаны. В противном случае, любые значения будут правильными.
Ключи сообщений об ошибках: required, max_length, min_length.

Имеет три необязательных аргумента для проверки:

max_length

min_length

Если они указаны, то производится соответствующая проверка длины полученной строки.

strip

Добавлено в Django 1.9.

При True (по умолчанию), у значения будут обрезаны пробелы в начале и в конце.

ChoiceField

class ChoiceField(**kwargs)

Стандартный виджет: Select
Пустое значение: '' (пустая строка).
Возвращает: Объект Unicode.
Проверяет, что введённое значение присутствует в списке вариантов.
Ключи сообщений об ошибках: required, invalid_choice.

Сообщение об ошибке invalid_choice может содержать %(value)s, которое будет замещено выбранным вариантом.

Принимает один дополнительный обязательный аргумент:

choices

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

Изменено в Django 1.8:

Была добавлена возможность передавать вызываемый объект в choices.

TypedChoiceField

class TypedChoiceField(**kwargs)

Аналогично ChoiceField, но TypedChoiceField принимает два дополнительных аргумента, coerce и empty_value.

Стандартный виджет: Select
Пустое значение: Всё, что вы назовёте empty_value.
Возвращает: Значение типа, указанного аргументом coerce.
Проверяет, что полученное значение присутствует в списке вариантов и может быть преобразовано в нужный тип.
Ключи сообщений об ошибках: required, invalid_choice.

Принимает дополнительные аргументы:

coerce: Функция, которая принимает один аргумент и возвращает преобразованное значение. Например, можно использовать стандартные int, float, bool и другие типы. Функция по умолчанию не выполняет преобразования. Преобразование значения происходит после валидации, поэтому можно вернуть значение, которое отсутствует в choices.

empty_value: Значение, используемое для представления “пустоты”. Обычно это пустая строка. None является ещё одним вариантом. Следует отметить, что это значение не будет преобразовываться функцией, определённой аргументом coerce, так что выбирайте значение соответственно.

DateField

class DateField(**kwargs)

Стандартный виджет: DateInput
Пустое значение: None.
Возвращает: Объект datetime.date языка Python.
Проверяет, что полученное значение является объектом datetime.date, datetime.datetime или строкой, отформатированной в нужном виде.
Ключи сообщений об ошибках: required, invalid.

Принимает один необязательный аргумент:

input_formats: Список форматов, используемых при попытках сконвертировать строку в объект datetime.date.

Если аргумент input_formats не предоставлен, то используются следующие форматы:

['%Y-%m-%d',      # '2006-10-25'
 '%m/%d/%Y',      # '10/25/2006'
 '%m/%d/%y']      # '10/25/06'

Дополнительно, если вы указали USE_L10N=False в конфигурации проекта, следующее будет включено в список форматов по умолчанию:

['%b %d %Y',      # 'Oct 25 2006'
 '%b %d, %Y',     # 'Oct 25, 2006'
 '%d %b %Y',      # '25 Oct 2006'
 '%d %b, %Y',     # '25 Oct, 2006'
 '%B %d %Y',      # 'October 25 2006'
 '%B %d, %Y',     # 'October 25, 2006'
 '%d %B %Y',      # '25 October 2006'
 '%d %B, %Y']     # '25 October, 2006'

Обратитесь к документации на формат локализации для подробной информации.

DateTimeField

class DateTimeField(**kwargs)

Стандартный виджет: DateTimeInput
Пустое значение: None.
Возвращает: Объект datetime.datetime языка Python.
Проверяет, что полученное значение является объектом datetime.datetime, datetime.date или строкой, отформатированной в нужном виде.
Ключи сообщений об ошибках: required, invalid.

Принимает один необязательный аргумент:

input_formats: Список форматов, используемых при попытках сконвертировать строку в объект datetime.datetime.

Если аргумент input_formats не предоставлен, то используются следующие форматы:

['%Y-%m-%d %H:%M:%S',    # '2006-10-25 14:30:59'
 '%Y-%m-%d %H:%M',       # '2006-10-25 14:30'
 '%Y-%m-%d',             # '2006-10-25'
 '%m/%d/%Y %H:%M:%S',    # '10/25/2006 14:30:59'
 '%m/%d/%Y %H:%M',       # '10/25/2006 14:30'
 '%m/%d/%Y',             # '10/25/2006'
 '%m/%d/%y %H:%M:%S',    # '10/25/06 14:30:59'
 '%m/%d/%y %H:%M',       # '10/25/06 14:30'
 '%m/%d/%y']             # '10/25/06'

Обратитесь к документации на формат локализации для подробной информации.

DecimalField

class DecimalField(**kwargs)

По умолчанию используется виджет NumberInput при Field.localize равном False, иначе TextInput.
Пустое значение: None.
Возвращает: Тип decimal языка Python.
Проверяет, что полученное значение является десятичным. Пробелы до и после значения игнорируются.
Ключи сообщений об ошибках: required, invalid, max_value, min_value, max_digits, max_decimal_places, max_whole_digits.

Сообщения об ошибках max_value и min_value могут содержать шаблон %(limit_value)s, который будет заполнен соответствующим значением. Аналогично, сообщения об ошибках max_digits, max_decimal_places и max_whole_digits могут содержать %(max)s.

Принимает четыре необязательных аргумента:

max_value

min_value: Эти аргументы управляют диапазоном значений, разрешённых для ввода в поле, и должны быть заполнены значениями decimal.Decimal.

max_digits: Максимальное число разрядов (до и после десятичной точки, впередистоящие нули обрезаются) разрешённых в значении.

decimal_places: Максимальное число разрешённых десятичных разрядов.

DurationField

Добавлено в Django 1.8.

class DurationField(**kwargs)

Стандартный виджет: TextInput
Пустое значение: None.
Нормализует к timedelta.
Проверяет, что полученное значение является строкой, которая может быть преобразована в timedelta.
Ключи сообщений об ошибках: required, invalid.

Принимает любой формат, который понимает parse_duration().

EmailField

class EmailField(**kwargs)

Стандартный виджет: EmailInput
Пустое значение: '' (пустая строка).
Возвращает: Объект Unicode.
Проверяет, что полученное значение является правильным адресом электронной почты, используя достаточно сложное регулярное выражение.
Ключи сообщений об ошибках: required, invalid.

Имеет два необязательных аргумента: max_length и min_length. Если аргументы указаны, то они контролируют диапазон принимаемого значения.

FileField

class FileField(**kwargs)

Стандартный виджет: ClearableFileInput
Пустое значение: None.
Возвращает: Объект UploadedFile, который оборачивает содержимое файла и его имя в единый объект.
Может проверять, что данные непустого файла были связаны с формой.
Ключи сообщений об ошибках: required, invalid, missing, empty, max_length.

Имеет два необязательных аргумента: max_length и allow_empty_file. Если аргументы указаны, то первый ограничивает длину имени файла, а второй позволяет загружать даже пустые файлы.

Для получения подробностей об объекте «UploadedFile`, см. документацию по загрузке файлов.

При использовании FileField на форме, вы должны не забыть связать данные файла с формой.

Ошибка max_length относится к длине имени файла. В сообщении об ошибке шаблон %(max)d будет заменён максимальной длиной имени файла, а %(length)d – длиной имени текущего файла.

FilePathField

class FilePathField(**kwargs)

Стандартный виджет: Select
Пустое значение: None.
Возвращает: Объект Unicode.
Проверяет, что выбранное значение присутствует в списке вариантов.
Ключи сообщений об ошибках: required, invalid_choice.

Поле позволяет выбирать файл из определённого каталога. Оно принимает три дополнительных аргумента, требуя обязательного наличия аргумента path:

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

recursive: Если False (по умолчанию), то будет показано только содержимое каталога, указанного в path. Если True, то будет показано также и содержимое всех вложенных каталогов.

match: Шаблон регулярного выражения. Отображаться будут только те файлы, которые подходят под указанное регулярное выражение.

allow_files: Необязательно. Возможные значения: True или False. По умолчанию: True. Определяет, следует ли подключать файлы из указанного места или нет. Этот атрибут или allow_folders должен быть установлен в True.

allow_folders: Необязательно. Возможные значения: True или False. По умолчанию: False. Определяет, следует ли подключать каталоги из указанного места или нет. Этот атрибут или allow_files должен быть установлен в True.

FloatField

class FloatField(**kwargs)

По умолчанию используется виджет NumberInput при Field.localize равном False, иначе TextInput.
Пустое значение: None.
Возвращает: Тип float языка Python.
Проверяет, что полученное значение является числом с плавающей точкой. Пробелы до и после значения не влияют на преобразование значения, так как эта ситуация обрабатывается функцией float() языка Python.
Ключи сообщений об ошибках: required, invalid, max_value, min_value.

Принимает два необязательных аргумента для проверки: max_value и min_value. Они определяют диапазон значений, разрешённый для поля.

ImageField

class ImageField(**kwargs)

Стандартный виджет: ClearableFileInput
Пустое значение: None.
Возвращает: Объект UploadedFile, который оборачивает содержимое файла и его имя в единый объект.
Проверяет, что данные файла были связаны с формой, а затем, что файл является изображением, формат которого поддерживается библиотекой Pillow.
Ключи сообщений об ошибках: required, invalid, missing, empty, invalid_image.

Использование ImageField требует наличия Pillow (рекомендуется) с поддержкой используемых вами форматов изображений. Если вы сталкиваетесь с ошибкой corrupt image при загрузке изображения, обычно это означает, что Pillow не поддерживает такой формат изображения. Для решения этой проблемы, установите соответствующую библиотеку и переустановите Pillow.

При использовании ImageField на форме, вы должны не забыть связать данные файла с формой.

После очистки и проверки поля, объект UploadedFile получает дополнительный атрибут image, который содержит экземпляр Image, используемый для проверка того, что файл содержит изображение. Атрибут UploadedFile.content_type также обновляется значением соответствующего типа контента, определённого библиотекой Pillow, иначе None.

Изменено в Django 1.8:

Были добавлены атрибуты image и content_type.

IntegerField

class IntegerField(**kwargs)

По умолчанию используется виджет NumberInput при Field.localize равном False, иначе TextInput.
Пустое значение: None.
Возвращает: Тип integer или long языка Python.
Проверяет, что полученное значение является целым числом. Пробелы до и после значения не влияют на преобразование значения, так как эта ситуация обрабатывается функцией int() языка Python.
Ключи сообщений об ошибках: required, invalid, max_value, min_value.

Сообщения об ошибках max_value и min_value могут содержать шаблон %(limit_value)s, который будет заполнен соответствующим значением.

Принимает два необязательных аргумента для проверки:

max_value

min_value

Они определяют диапазон значений, разрешённый для поля.

GenericIPAddressField

class GenericIPAddressField(**kwargs)

Поле для обработки адресов IPv4 или IPv6.

Стандартный виджет: TextInput
Пустое значение: '' (пустая строка).
Возвращает: Объект Unicode. Преобразование IPv6 адресов описано далее.
Проверяет, что полученное значение является правильным IP адресом.
Ключи сообщений об ошибках: required, invalid.

IPv6 адрес преобразуется в соответствии с RFC 4291#section-2.2, секция 2.2, включая использование формата IPv4, предложенного в параграфе 3 этой секции, вида ::ffff:192.0.2.0. Например, 2001:0::0:01 будет преобразован к 2001::1, а ::ffff:0a0a:0a0a к ::ffff:10.10.10.10. Все символы преобразуются в нижний регистр.

Принимает два необязательных аргумента:

protocol: Ограничивает диапазон значений указанным протоколом. Принимает значения: both (по умолчанию, т.е. “оба”), IPv4 или IPv6. Регистр букв не имеет значения.

unpack_ipv4: Распаковывает IPv4 адреса вида ::ffff::192.0.2.1. Если эта опция активирована, то адрес будет преобразован в 192.0.2.1. По умолчанию опция отключена. Может использоваться только если protocol установлен в 'both'.

MultipleChoiceField

class MultipleChoiceField(**kwargs)

Стандартный виджет: SelectMultiple
Пустое значение: [] (пустой список).
Возвращает: Список объектов Unicode.
Проверяет, что каждое значение из полученного списка присутствует в списке вариантов.
Ключи сообщений об ошибках: required, invalid_choice, invalid_list.

Сообщение об ошибке invalid_choice может содержать %(value)s, которое будет замещено выбранным вариантом.

Принимает один дополнительный обязательный аргумент choices, аналогично полю ChoiceField.

TypedMultipleChoiceField

class TypedMultipleChoiceField(**kwargs)

Похоже на MultipleChoiceField, за исключением того, что TypedMultipleChoiceField принимает два дополнительных аргумента: coerce и empty_value.

Стандартный виджет: SelectMultiple
Пустое значение: Всё, что вы назовёте empty_value.
Возвращает: Список значений типа, который указан аргументом coerce.
Проверяет, что полученные значения присутствуют в списке вариантов и могут быть преобразованы в нужный тип.
Ключи сообщений об ошибках: required, invalid_choice.

Сообщение об ошибке invalid_choice может содержать %(value)s, которое будет замещено выбранным вариантом.

Принимает два дополнительных аргумента, coerce и empty_value, аналогично TypedChoiceField.

NullBooleanField

class NullBooleanField(**kwargs)

Стандартный виджет: NullBooleanSelect
Пустое значение: None.
Возвращает: True, False или None.
Ничего не проверяет, т.е. никогда не возвратит ValidationError.

RegexField

class RegexField(**kwargs)

Стандартный виджет: TextInput
Пустое значение: '' (пустая строка).
Возвращает: Объект Unicode.
Проверяет, что полученное значение совпадает с указанным регулярным выражением.
Ключи сообщений об ошибках: required, invalid.

Принимает один обязательный аргумент:

regex: Регулярное выражение в виде строки или скомпилированного объекта регулярного выражения.

Также принимает аргументы max_length, min_length и strip, которые работают аналогично CharField.

strip

Добавлено в Django 1.9.

По умолчанию False. При True будут удалены пробелы в начале и конце значения перед проверкой регулярным выражением.

Не рекомендуется, начиная с версии 1.8: Необязательный аргумент error_message принимается в целях обратной совместимости, но будет удалён в Django 1.10. Предпочтительным способом указания собственного сообщения об ошибке является использование аргумента error_messages, которому назначается словарь с ключом invalid.

SlugField

class SlugField(**kwargs)

Стандартный виджет: TextInput
Пустое значение: '' (пустая строка).
Возвращает: Объект Unicode.
Проверяет, что полученное значение содержит только буквы, цифры, подчёркивания и тире.
Ключи сообщений об ошибках: required, invalid.

Это поле предназначено для представления поля модели SlugField на формах.

Принимает необязательный аргумент:

allow_unicode

Добавлено в Django 1.9.

Булево значение, указывает принимать ли Unicode символы в дополнение к ASCII. По умолчанию False.

TimeField

class TimeField(**kwargs)

Стандартный виджет: TextInput
Пустое значение: None.
Возвращает: Объект datetime.time языка Python.
Проверяет, что переданное значение является объектом datetime.time или строкой, отформатированной в нужном виде.
Ключи сообщений об ошибках: required, invalid.

Принимает один необязательный аргумент:

input_formats: Список форматов, используемых при попытках сконвертировать строку в объект datetime.time.

Если аргумент input_formats не предоставлен, то используются следующие форматы:

'%H:%M:%S',     # '14:30:59'
'%H:%M',        # '14:30'

URLField

class URLField(**kwargs)

Стандартный виджет: URLInput
Пустое значение: '' (пустая строка).
Возвращает: Объект Unicode.
Проверяет, что полученное значение является правильным URL.
Ключи сообщений об ошибках: required, invalid.

Принимает следующие необязательные аргументы:

max_length

min_length

Аналогичны CharField.max_length и CharField.min_length.

UUIDField

Добавлено в Django 1.8.

class UUIDField(**kwargs)

Стандартный виджет: TextInput
Пустое значение: '' (пустая строка).
Нормализует к: объекту UUID.
Ключи сообщений об ошибках: required, invalid.

Это поле будет принимать любой строковый формат, понимаемый аргументом hex конструктора UUID.

Создание собственных полей

Если встроенные классы Field не подходят к вашей задаче, вы легко можете создать свои собственные. Для того, чтобы сделать это просто унаследуйте ваш класс от django.forms.Field. Класс должен реализовывать метод clean() и его конструктор должен принимать обязательные аргументы, т.е., required, label, initial, widget, help_text.

Вы также можете настроить доступ к полю, переопределив метод get_bound_field().

Атрибут HTML: обязательный — HTML: язык разметки гипертекста

Логическое значение требует атрибута , который, если он присутствует, указывает, что пользователь должен указать значение для ввода перед отправкой формы-владельца. Требуемый атрибут поддерживается текст , поиск , url , тел , адрес электронной почты , пароль , дата , месяц , неделя , время , дата -local , number , checkbox , radio , file , types вместе с элементами управления формы </code>.Если присутствует на любом из этих типов ввода и элементов, псевдокласс <code>: required </code> будет соответствовать. Если атрибут не включен, будет соответствовать псевдокласс <code>: optional </code>. </p> <p> Атрибут не поддерживается и не относится к диапазону и цвету, поскольку оба имеют значения по умолчанию. Он также не поддерживается для скрытых, так как нельзя ожидать, что пользователь заполнит скрытую форму. Он также не поддерживается ни одним из типов кнопок, включая <code>, изображение </code>. </p> <p> Примечание <code> цвет </code> и диапазон <code> </code> не поддерживает <code>, требуется </code>, но тип <code> цвет </code> по умолчанию <code> # 000000 </code>, а диапазон <code> по умолчанию </code> — средняя точка между <code> мин. </code> и <code> макс. </code> — с <code> мин. </code> и <code> max </code> по умолчанию равно 0 и 100 соответственно в большинстве браузеров, если не объявлено — поэтому всегда имеет значение.</p> <p> В случае группы переключателей с одинаковым именем, если один переключатель в группе имеет атрибут <code> required </code>, переключатель в этой группе должен быть отмечен, хотя он не обязательно должен быть с атрибут применяется. Поэтому для улучшения обслуживания кода рекомендуется либо включить атрибут <code> required </code> в каждую радиокнопку с таким же именем в группе, либо ни в одном из них. </p> <p> В случае одноименной группы типов ввода флажков требуются только флажки с обязательным атрибутом <code> </code>.</p> <p> Примечание. Параметр <code> aria-required = "true" </code> сообщает программе чтения с экрана, что элемент (любой элемент) является обязательным, но не влияет на его необязательность. </p> <h4><span class="ez-toc-section" id="i-21"> Взаимодействие атрибутов </span></h4> <p> Поскольку поле только для чтения не может иметь значение, требуется <code> </code> не оказывает никакого влияния на входы с указанным атрибутом <code> только для чтения </code>. </p> <h4><span class="ez-toc-section" id="i-22"> Удобство использования </span></h4> <p> При включении <code> обязательного атрибута </code> обеспечьте видимую индикацию рядом с элементом управления, информирующую пользователя о том, что требуется <code> <input> </code>, <code> <select> </code> или <code> <textarea> </code>.Кроме того, нацелите требуемые элементы управления формой с помощью псевдокласса <code>: required </code>, задав для них стиль, указывающий на то, что они требуются. Это улучшает удобство использования для зрячих пользователей. Вспомогательные технологии должны информировать пользователя, что элемент управления формой является обязательным на основе обязательного атрибута, но добавление <code> aria-required = "true" </code> не повредит, если комбинация браузер / программа чтения с экрана еще не поддерживает <code> required </code>. </p> <h4><span class="ez-toc-section" id="i-23"> Проверка ограничений </span></h4> <p> Если элемент является обязательным и значением элемента является пустая строка, тогда элемент страдает от <code> valueMissing </code>, и элемент будет соответствовать псевдоклассу <code>: invalid </code>.</p> <p> Укажите пользователям, что требуется элемент управления формой. Убедитесь, что обмен сообщениями является многогранным, например с помощью текста, цвета, маркировки и атрибутов, чтобы все пользователи понимали требования, независимо от того, страдают ли они дальтонизмом, когнитивными различиями или используют программу чтения с экрана. </p> <h4><span class="ez-toc-section" id="HTML-3"> HTML </span></h4><pre> <code> <form> <div> <input type = "text"> <label> Обычный </label> </div> <div> <input type = "text" required = "required"> <label> Обязательно </label> </div> <input type = "submit"> </form> </code> </pre><h4><span class="ez-toc-section" id="i-24"> Результат </span></h4> <h2><span class="ez-toc-section" id="HTML-4"> HTML | обязательный атрибут </span></h2> <p> HTML | <input> required Attribute </p> <p> Требуемый атрибут HTML <strong> </strong> — это логический атрибут, который используется для указания того, что элемент ввода должен быть заполнен перед отправкой формы.<br /> Этот атрибут работает с другими типами ввода, такими как радио, флажок, число, текст и т. Д. </p> <p> <strong> Синтаксис: </strong> </p><pre> <требуется ввод> </pre><p> <strong> Пример-1: </strong> Этот пример иллюстрирует использование обязательного атрибута в Элемент ввода. </p> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <p> <code> <! DOCTYPE html> </code> </p> <p> <code> <</code> <code> html </code> <code>> </code> </p> <p> <code> </code> </p> <p> <code> <</code> <code> </code> <code> <code> </code> <code> > </code> </p> <p> <code> </code> <code> обязательный Атрибут </code> </p> <p> <code> </code> <code> </ </code> <code> заголовок </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> стиль </code> <code>> </code> </p> <p> </code> </code> <code>000 <code>000 </code> </code> </p> <p>000 </code> h3 {</code> </p> <p> <code> </code> <code> цвет: зеленый; </code> </p> <p> <code> </code> <code> стиль шрифта: курсив; </code> </p> <p> <code> </code> <code>} </code> </p> <p> <code> </code> </p> <p> <code> </code> <code> корпус {</code> </p> <p> <code> </code> <code> выравнивание текста: по центру; </code> </p> <p> <code> </code> <code>} </code> </p> <p> <code> </code> <code> </ </code> <code> стиль </code> <code>> </code> </p> <p> <code> </ </code> <code> голова </code> <code>> </code> </p> <p> <code> </code> </p> <p> 9000 </p> <p> <code> </code> </p> <p> 9000 <code> </code> </p> <p> корпус </p> <p> <code> </code> <code> <</code> <code> h2 </code> <code>> GeeksForGeeks </ </code> <code> h2 </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> h3 </code> <code>> <code> <code>000 <code>000 </code> 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 <code>000 / </code> <code> h3 </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> form </code> <code> action </code> <code> = </code> <code> "" </code> <code>> </code> </p> <p> <code> </code> <code> </code> <code> </code> <code> </code> <code> </code> <code> введите </code> <code> = </code> <code> «текст» </code> </p> <p> <code> </code> <code> имя </code> <code> = </code> <code> "usrname" </code> </p> <p> <code> </code> <code> требуется> </code> </p> <p> <code> </code> <code> <</code> <code> br </code> <code>> Тип пароля: </code> </p> <p> <code> </code> <code> <code> <code> <code> </code> <code> ввод </code> <code> «пароль» </code> </p> <p> <code> </code> <code> имя </code> <code> = </code> <code> «пароль» </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> br </code> 9000 ввод3> </code> </p> <p> </code>0003 </code> </code> </code> <code> </code> <code> = </code> <code> «отправить» </code> <code>> </code> </p> <p> <code> </code> <code> </ </code> <code> form </code> <code>> </code> </p> <p> <code> </ </code> <code> body </code> <code>> </code> </p> <p><p> </code> </p> <h2><span class="ez-toc-section" id="i-25">0 мл </span></h2> <p><code>> </code> </p> </td> </tr> </tbody> </table> <p> <strong> Выход: </strong> <br /> 90 049 </p> <p> <strong> Пример-2: </strong> Этот пример иллюстрирует использование обязательного атрибута во входном элементе.</p> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <p> <code> <! DOCTYPE html> </code> </p> <p> <code> <</code> <code> html </code> <code>> </code> </p> <p> <code> </code> </p> <p> <code> <</code> <code> </code> <code> <code> </code> <code> > </code> </p> <p> <code> </code> <code> обязательный Атрибут </code> </p> <p> <code> </code> <code> </ </code> <code> заголовок </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> стиль </code> <code>> </code> </p> <p> </code> </code> <code>000 <code>000 </code> </code> </p> <p>000 </code> h3 {</code> </p> <p> <code> </code> <code> цвет: зеленый; </code> </p> <p> <code> </code> <code> стиль шрифта: курсив; </code> </p> <p> <code> </code> <code>} </code> </p> <p> <code> </code> </p> <p> <code> </code> <code> корпус {</code> </p> <p> <code> </code> <code> выравнивание текста: по центру; </code> </p> <p> <code> </code> <code>} </code> </p> <p> <code> </code> <code> </ </code> <code> стиль </code> <code>> </code> </p> <p> <code> </ </code> <code> голова </code> <code>> </code> </p> <p> <code> </code> </p> <p> 9000 </p> <p> <code> </code> </p> <p> 9000 <code> </code> </p> <p> корпус </p> <p> <code> </code> <code> <</code> <code> h2 </code> <code>> GeeksForGeeks </ </code> <code> h2 </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> h3 </code> <code>> <code> <code>000 <code>000 </code> 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 <code>000 / </code> <code> h3 </code> <code>> </code> </p> <p> <code> </code> <code> <</code> <code> форма </code> <code> действие </code> <code> = </code> <code> "" </code> <code>> </code> </p> <p> <code> </code> <code> </code> <code> </code> <code> </code> <code> введите </code> <code> = </code> <code> «радио» </code> </p> <p> <code> </code> <code> наименование </code> <code> = </code> <code> «радиошечка» </code> </p> <p> <code> </code> <code> требуется> </code> </p> <p> <code> </code> <code> <</code> <code> br </code> <code>> </code> </p> <p> <code> <code> <code> <code> <code> <code> </code> <code> <<code> </code> <code> "submit" </code> <code>> </code> </p> <p> <code> </code> <code> </ </code> <code> form </code> <code>> </code> </p> <p> <code> </ </code> <code> body </code> <code>> </code> </p> <p> <code> </code> </p> <p> <code> </code> </code> </code> </code> </td> </tr> </tbody> </table> <p> <strong> Выход: </strong> </p> <p> <strong> Поддерживаемые браузеры: </strong> Браузер, поддерживаемый <strong> HTML, требуемый атрибут </strong>, перечислены ниже: </p> <ul> <li> Google Chrome </li> <li> Internet Explorer </li> <li> Firefox </li> <li> Opera </li> <p> Firefox </li> <li> Opera </li> </ul> <p> </p> <h2><span class="ez-toc-section" id="_aste"> Обозначение необходимых элементов управления формой с помощью aste риски (*) </span></h2> <p> <strong> Звездочка (*) рядом с меткой элемента управления формы обычно обозначает его как «обязательный».Часто цель этой звездочки затем объясняется где-то еще на странице. Многих пользователей (особенно пользователей программ чтения с экрана) это может смутить, поэтому убедитесь, что эта информация легкодоступна. </strong> </p> <p> Это распространенный метод добавления звездочки <code> * </code> к метке элемента управления формы. Затем в другом месте страницы, например под формой, эта звездочка поясняется, чтобы указать требуемый ввод (намек на примечания в текстовых документах). </p> <p> В то время как визуальные пользователи обычно видят и звездочку, и объяснение с первого взгляда и могут интуитивно связать их друг с другом, пользователям программ чтения с экрана приходится вручную искать цель звездочки.В дополнение к этому программы чтения с экрана часто настроены так, что они не читают все специальные символы и, таким образом, полностью игнорируют звездочки. </p> <h3><span class="ez-toc-section" id="i-26"> Плохой пример </span></h3> <p> В следующем примере обязательное поле ввода объявляется как «Полное имя звездочки» в большинстве программ чтения с экрана. Опытный пользователь, вероятно, знает, для чего это предназначено, но многие пользователи понятия не имеют. </p> <p> Обязательный ввод со звездочкой </p><pre> <code> <форма> <div> <label for = "name"> Полное имя <span> * </span> </label> <input type = "text" /> </div> <div> <label for = "biography"> Биография </label> <textarea type = "text">






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

 .visually-hidden {
  позиция: абсолютная;
  ширина: 1 пиксель;
  высота: 1 пикс;
  слева: -10000 пикселей;
  переполнение: скрыто;
}

.control, fieldset {
  маржа: 6px 0;
}

метка {
  дисплей: встроенный блок;
  ширина: 120 пикселей;
  вертикальное выравнивание: сверху;
}

.требуется {
  красный цвет;
}

Поскольку текстовое объяснение «обязательное поле» даже находится под кнопкой отправки формы, пользователь программы чтения с экрана, вероятно, никогда не прочитает его, поскольку активация кнопки обычно является последним, что делает пользователь при заполнении формы.

Первый подход: использование ARIA

Как мы знаем из раздела «Размещение неинтерактивного содержимого между элементами управления формы», текст «обязательное поле» можно связать с элементом управления формой с помощью aria, описанного .И поскольку теперь нам больше не нужен текст сам по себе для программ чтения с экрана, мы также можем скрыть его от них с помощью aria-hidden (см. Скрытие элементов из программ чтения с экрана с помощью aria-hidden).

Обязательный ввод со звездочкой и ARIA

  <форма>
  
     Полное имя  *   
  
  
     Биография   
  
  
    
  
  
     *  Обязательное поле

 .visually-hidden {
  позиция: абсолютная;
  ширина: 1 пиксель;
  высота: 1 пикс;
  слева: -10000 пикселей;
  переполнение: скрыто;
}

.control, fieldset {
  маржа: 6px 0;
}

метка {
  дисплей: встроенный блок;
  ширина: 120 пикселей;
  вертикальное выравнивание: сверху;
}

.требуется {
  красный цвет;
}

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

Мы можем попытаться удалить их также с помощью aria-hidden :

Обязательный ввод со скрытыми звездочками и ARIA

  <форма>
  
     Полное имя  *   
  
  
     Биография   
  
  
    
  
  
     *  Обязательное поле

 .visually-hidden {
  позиция: абсолютная;
  ширина: 1 пиксель;
  высота: 1 пикс;
  слева: -10000 пикселей;
  переполнение: скрыто;
}

.control, fieldset {
  маржа: 6px 0;
}

метка {
  дисплей: встроенный блок;
  ширина: 120 пикселей;
  вертикальное выравнивание: сверху;
}

.требуется {
  красный цвет;
}

Но aria-hidden , похоже, не соблюдается в режиме фокусировки. Какой облом.

Лучший подход: использование значка

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

Вместо того, чтобы пытаться скрыть в метке звездочку обычного текста * , мы заменяем ее приличной иконкой. В нашем случае это модная графика SVG. Затем мы просто добавляем текст «required» в качестве визуально скрытого элемента (для получения дополнительной информации см. «Правильное скрытие элементов»).

Обязательный ввод со звездочками в виде значков

  
<форма>
  
     Полное имя 
      
        требуется
      
     
  
  
     Биография   
  
  
    
  
  
     Обязательное поле

  *: focus {
  контур: сплошной 2px;
}

.visually-hidden {
  позиция: абсолютная;
  ширина: 1 пиксель;
  высота: 1 пикс;
  слева: -10000 пикселей;
  переполнение: скрыто;
}

.контроль {
  маржа: 6px 0;
}

метка {
  дисплей: встроенный блок;
  ширина: 120 пикселей;
  вертикальное выравнивание: сверху;
}

svg # definition {
  дисплей: нет;
}

.значок {
  ширина: 0,5 мм;
  высота: 0,5 мм;
  заливка: красный;
  вертикальное выравнивание: сверху;
}

 ; (функция () {} .call (это))

Категория	Результат	Дата
Только клавиатура	✔ (пройти) пройти	–	-5-14 2018
NVDA 2018.1 + ФФ Квантум 59.0.2	✔ (пройти) пройти	–	2018-5-8
Челюсти 2018.3 + IE 11	✔ (пройти) пройти	–	5-20 2018
Челюсти 2018.3 + FF ESR 52.7.3	✔ (пройти) пройти	–	-5-7 2018

Чтобы Internet Explorer не делал SVG-файлы фокусируемыми, используется атрибут focusable = "false" .Вместо SVG вы также можете использовать традиционное изображение с пустым альтернативным текстом ( ).

И если вы действительно хотите сделать это необычным, вы можете объединить эту технику с всплывающей подсказкой, показывающей «Обязательно» при наведении: виджеты всплывающей подсказки (или: подсказка экрана, всплывающая подсказка).

Использование проверок на стороне клиента HTML 5

Вместо применения визуально скрытого текста «требуется» можно установить атрибут required для ввода: это заставляет программы чтения с экрана объявлять ввод как обязательный.

Обязательные входные данные с HTML 5 и ARIA

  <форма>
  
     Имя  
  
  
     Отчество  
  
  
     Фамилия

 .control, fieldset {
  маржа: 6px 0;
}

метка {
  дисплей: встроенный блок;
  ширина: 120 пикселей;
  вертикальное выравнивание: сверху;
}

.требуется {
  красный цвет;
}

Категория	Результат	Дата
Только клавиатура	✔ (пройти) пройти	–	2018-6-15
NVDA 2018.1 + FF Quantum 59.0.2	⚠ (пройти с комментариями) пройти	Имя недопустимого поля не объявляется автоматически.Это неприятно, но пользователь может найти эту информацию вручную.	-6-6 2018
Челюсти 2018.3 + IE 11	⚠ (пройти с комментариями) пройти	Имя недопустимого поля не объявляется автоматически. Это неприятно, но пользователь может найти эту информацию вручную.	5-20 2018
Челюсти 2018.3 + FF ESR 52.7.3	⚠ (пройти с комментариями) пройти	Имя недопустимого поля не объявляется автоматически.Это неприятно, но пользователь может найти эту информацию вручную.	-5-7 2018

Технически это намного проще и чище (подробнее здесь: проверки на стороне клиента HTML 5). Но поддержка браузеров по-прежнему довольно шаткая, и пользовательский опыт работы с программами чтения с экрана шатким.

И часто могут быть случаи, когда требуются другие тексты, кроме просто «обязательных» (и где нет стандартного HTML-атрибута), поэтому хорошо иметь более гибкое решение: а именно скрытые тексты.

Вас также может заинтересовать

Знание - сила! Наш гид может предложить больше:

Как использовать «обязательный» атрибут с полем ввода радио

Фрагменты
›
HTML
›
Как использовать атрибут «обязательный» с полем ввода радио

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

Хотя установка обязательного атрибута для всех входов более понятна, в этом нет необходимости (если вам не нужно динамически генерировать переключатели).

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

Создать HTML¶

Используйте элемент

.
Добавьте три элемента с атрибутами типа ввода радио, имени и значения.
Добавьте обязательный атрибут в первую <метку>.
Добавьте с типом «submit».

  <форма>
  Выберите пол:
  <метка>
     Мужской
  
  <метка>
     Женский
  
  <метка>
     Другое

Пример использования обязательного атрибута с полем ввода радио: ¶

  

  
     Название документа 
  
  
    
      Выберите пол:
      <метка>
         Мужской
      
      <метка>
         Женский
      
      <метка>
         Другое

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

Спасибо за ваш отзыв!

Считаете ли вы это полезным? Да Нет

Статьи по теме

Обязательные поля | База знаний Flowfinity

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

Поведение полей формы, помеченных как обязательные, зависит от типа поля:

Вложенный список, вложенная сетка, вложенная форма	Должна присутствовать хотя бы одна запись
Поиск пользователей, поиск ролей	Должен быть выбран хотя бы один пользователь или роль
Раскрывающееся меню, радио кнопки	Необходимо выбрать вариант с непустым «Значение»
Флажки	Необходимо выбрать хотя бы один вариант

Пример 1

Продавец заполняет формы заказа для клиента.Компания отправляет заказы напрямую клиентам, поэтому требуется указать адрес доставки. Продавец видит поле жирным шрифтом. После нажатия кнопки «Отправить» продавец видит сообщение об ошибке, если поле остается пустым.

Инструкции

Настройте приложение с полями, которые должен заполнять пользователь
В разделе Форма выберите поле, которое пользователь должен заполнить
Щелкните значок «X» в столбце «Обязательный» и выберите «Да».
Сохраните форму и опубликуйте заявку

Пример 2

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

Инструкции

Настройте приложение с полями, которые должен заполнять пользователь
В разделе «Форма» добавьте раскрывающееся поле. Для элемента в списке введите сообщение, например «-Выберите-» в поле «Отображаемое значение», и не забудьте оставить столбец «Данные» для этого элемента пустым.
Введите другие элементы в раскрывающемся списке (например, Visa, Mastercard)
Щелкните значок «X» в столбце «Обязательный» и выберите «Да»
Сохраните форму и опубликуйте заявку

Избегайте проверки полей по умолчанию | Адриан Роселли

20 февраля 2019 г. ; 4 комментария

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

Я сделал пример на CodePen, который использует поле электронной почты ( type = "email" ), является обязательным ( требуется ) и использует шаблон для ограничения адреса электронной почты доменом foo.com ( pattern = ". [email protected] ").

 
  
     Электронная почта

Затем я запустил три программы чтения с экрана Windows в четырех браузерах и записал результат. Обратите внимание, как в каждом случае браузер объявляет поле недействительным, как только оно получает фокус. Он также не определяет, что это за шаблон для поля, и когда поле стало действительным (что означает, что мы получили правильный формат).

К сожалению, ваш браузер не поддерживает встроенные видео, но не беспокойтесь, вы можете скачать его.Файл с субтитрами также доступен, если ваш видеоплеер может его импортировать.
Firefox 65 и NVDA 2018.3.2.
К сожалению, ваш браузер не поддерживает встроенные видео, но не беспокойтесь, вы можете скачать его. Файл с субтитрами также доступен, если ваш видеоплеер может его импортировать.
Internet Explorer 11 и JAWS 2018.
К сожалению, ваш браузер не поддерживает встроенные видео, но не беспокойтесь, вы можете скачать его. Файл с субтитрами также доступен, если ваш видеоплеер может его импортировать.Chrome 71 и JAWS 2018.
К сожалению, ваш браузер не поддерживает встроенные видео, но не беспокойтесь, вы можете скачать его. Файл с субтитрами также доступен, если ваш видеоплеер может его импортировать.
Edge и экранный диктор в Windows 10 по состоянию на февраль 2019 г.

Использование required само по себе не будет определять для всех пользователей в виде обычного текста, что поле является обязательным. Вам все равно нужно будет указать это в текстовой метке, иначе вы можете потерпеть неудачу. 3.3.1 Идентификация ошибки (A).

Если вы используете шаблон , вы не можете полагаться на браузер, чтобы показать пользователю, что это за шаблон.Если вы не объясните это как часть доступного имени, вы можете потерпеть неудачу в 3.3.2 Ярлыки или инструкции (A) и 3.3.3 Предложение ошибки (AA).

Индикатор ошибки браузера по умолчанию, когда он отображается, имеет тенденцию быть красным контуром. При коэффициенте контрастности по умолчанию 4,0: 1 на белом фоне , а не не сработает. 1.4.11 Нетекстовая контрастность (AA), как указано в комментарии Джона ниже, но это все равно не очень хорошо. Если полагаться только на схему, то не получится. 4.1.2 Имя, роль, значение (A).

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

Не воспринимайте мой пренебрежительный тон, чтобы означать, что написать свой собственный легко. Это требует некоторой строгости, поскольку этот пост на требует и aria-required демонстрирует. Но - это часть работы.

Другие сообщения

Предыдущий пост: Uncanny A11y

Более свежая публикация: F87: CSS-контент и соответствие WCAG

типов полей - формы ниндзя

Содержание

Общие поля

Поля макета

Разные поля

*** Поля информации о пользователе, мы вас не забыли.Каждое из этих полей - это общие поля, которые мы переименовали и специально предназначены для часто необходимой информации, чтобы вам не приходилось делать это.

Однострочный текст

Однострочные текстовые поля идеально подходят для кратких ответов пользователей. Поля информации о пользователе, предварительно созданные с использованием текстового поля в одну строку, включают поля «Имя», «Фамилия», «Адрес», «Город», «Почтовый индекс», «Электронная почта» и «Телефон».

Общие настройки

Этикетка

Имя поля, отображаемое для ваших пользователей.

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

Если включено, это поле необходимо заполнить перед отправкой формы.

Настройки дисплея

Значение по умолчанию

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

Заполнитель

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

Описание

Любой введенный здесь текст появится между меткой и полем.

Показать расширенные функции

Чтобы увидеть эти функции, вам нужно включить режим разработчика в настройках Ninja Forms.

Настройки ограничений

Ограничение ввода этого числа

Ограничивает количество символов или слов, которые пользователь может ввести в поле. Текст, введенный в поле «Текст, отображаемый после счетчика», будет отображаться рядом со счетчиком символов / слов.

Отключить вход

Запрещает пользователям вводить текст в поле.

Отключить автозаполнение в браузере

Запрещает браузеру рекомендовать ввод в поле при вводе пользователем.

Маска ввода

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

Телефон в США : только цифры, (___) ___-____
Дата : только цифры, __ / __ / ____
Валюта : только числа, $ __.__
Пользовательский : Определите собственные ограничения ввода с помощью пользовательской маски. Поддерживаются символы (например, косая черта / запятая, дефис и т. Д.), И при вводе здесь они отображаются на месте для пользователя. Предопределенные заполнители представляют один из трех типов символов: a = только буквенный символ , 9 = только цифровой символ , * = буквенно-цифровой символ . Пользователь может вводить символы только в пространстве, где существуют эти заполнители.
- Пример серверной части: 999-999-999
- Результат внешнего интерфейса: ___-___-___, где можно вводить только числовые символы

Настройки дисплея

Имена пользовательских классов

Контейнер : введенный здесь текст применяет пользовательский класс HTML к оболочке этого поля
Элемент : введенный здесь текст применяет пользовательский класс HTML к элементу этого поля

Текст справки

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

Расширенные настройки

Позиция этикетки

Изменяет ориентацию метки поля относительно элемента поля (сверху, снизу, слева, справа, скрыто)

Атрибут произвольного имени

Введенный здесь текст применяет настраиваемый атрибут «имя» ввода HTML.

Это поле - личные данные

При включении помечает поле как данные, позволяющие установить личность.При обработке действия «Запрос на удаление данных» или «Запрос на экспорт данных» поля, помеченные как данные, позволяющие установить личность, будут удалены, анонимизированы или помечены для экспорта для пользователя, отправившего запрос.

Настройки администрирования

Ключ поля

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

Наклейка администратора

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

[В начало]

Текст абзаца

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

Общие настройки

Этикетка

Имя поля, отображаемое для ваших пользователей.

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

Если включено, это поле необходимо заполнить перед отправкой формы.

Настройки дисплея

Значение по умолчанию

Заполнитель

Описание

Любой введенный здесь текст появится между меткой и полем.

Показать редактор форматированного текста

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

Показать расширенные функции

Чтобы увидеть эти функции, вам нужно включить режим разработчика в настройках Ninja Forms.

Настройки ограничений

Ограничение ввода этого числа

Ограничивает количество символов или слов, которые пользователь может ввести в поле.Текст, введенный в поле «Текст, отображаемый после счетчика», будет отображаться рядом со счетчиком символов / слов.

Отключить вход

Запрещает пользователям вводить текст в поле.

Отключить автозаполнение в браузере

Запрещает браузеру рекомендовать ввод в поле при вводе пользователем.

Настройки дисплея

Имена пользовательских классов

Контейнер : введенный здесь текст применяет пользовательский класс HTML к оболочке этого поля
Элемент : введенный здесь текст применяет пользовательский класс HTML к элементу этого поля

Текст справки

Расширенные настройки

Позиция этикетки

Изменяет ориентацию метки поля относительно элемента поля (сверху, снизу, слева, справа, скрыто)

Настройки администрирования

Ключ поля

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

Наклейка администратора

[В начало]

Список радио

В поле Radio List представлены параметры, из которых пользователь может сделать только один выбор.

Общие настройки

Этикетка

Имя поля, отображаемое для ваших пользователей.

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

Если включено, это поле необходимо заполнить перед отправкой формы.

Опции

Добавить новый: добавляет еще одну опцию в список
Метка: имя параметра списка, отображаемого пользователю
Столбец «Проверить»: любой вариант списка, отмеченный здесь, будет отображаться как вариант по умолчанию для пользователя.

Настройки дисплея

Описание

Любой введенный здесь текст появится между меткой и полем.

Показать расширенные функции

Чтобы увидеть эти функции, вам нужно включить режим разработчика в настройках Ninja Forms.

Общие настройки

Опции

Значение : Используйте это, чтобы изменить то, что будет отображаться в данных отправки, если этот параметр списка выбран пользователем. По умолчанию он соответствует метке списка. Здесь поддерживаются только определенные символы: a-z, 0-9, дефис -, подчеркивание _, @ и пробел.
Расчетное значение : При включении этого поля в расчет введенное здесь значение будет введено как часть этого расчета, если выбран данный параметр списка.

Настройки дисплея

Имена пользовательских классов

Контейнер : введенный здесь текст применяет пользовательский класс HTML к оболочке этого поля
Элемент : введенный здесь текст применяет пользовательский класс HTML к элементу этого поля

Текст справки

Расширенные настройки

Позиция этикетки

Изменяет ориентацию метки поля относительно элемента поля (сверху, снизу, слева, справа, скрыто)

Настройки администрирования

Ключ поля

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

Наклейка администратора

[В начало]

Выбрать

Поле «Выбрать» - это поле со списком, которое позволяет пользователю выбрать один вариант из раскрывающегося списка. Поля информации о пользователе, предварительно созданные с помощью поля «Выбрать», включают страну и штаты США.

Общие настройки

Этикетка

Имя поля, отображаемое для ваших пользователей.

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

Если включено, это поле необходимо заполнить перед отправкой формы.

Опции

Добавить новый: добавляет еще одну опцию в список
Метка: имя параметра списка, отображаемого пользователю
Столбец «Проверить»: любой вариант списка, отмеченный здесь, будет отображаться как вариант по умолчанию для пользователя.

Настройки дисплея

Описание

Любой введенный здесь текст появится между меткой и полем.

Показать расширенные функции

Чтобы увидеть эти функции, вам нужно включить режим разработчика в настройках Ninja Forms.

Общие настройки

Опции

Значение : Используйте это, чтобы изменить то, что будет отображаться в данных отправки, если этот параметр списка выбран пользователем. По умолчанию он соответствует метке списка. Здесь поддерживаются только определенные символы: a-z, 0-9, дефис -, подчеркивание _, @ и пробел.
Расчетное значение : При включении этого поля в расчет введенное здесь значение будет введено как часть этого расчета, если выбран данный параметр списка.

Настройки дисплея

Имена пользовательских классов

Контейнер : введенный здесь текст применяет пользовательский класс HTML к оболочке этого поля
Элемент : введенный здесь текст применяет пользовательский класс HTML к элементу этого поля

Текст справки

Расширенные настройки

Позиция этикетки

Изменяет ориентацию метки поля относительно элемента поля (сверху, снизу, слева, справа, скрыто)

Настройки администрирования

Ключ поля

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

Наклейка администратора

[В начало]

Мульти-выбор

Поле множественного выбора - это поле со списком, которое позволяет пользователю выбрать 2 или более вариантов из раскрывающегося списка.
(Обратите внимание, что для выбора нескольких элементов требуется щелчок + нажатие клавиши Command или Shift)

Общие настройки

Этикетка

Имя поля, отображаемое для ваших пользователей.

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

Если включено, это поле необходимо заполнить перед отправкой формы.

Опции

Добавить новый: добавляет еще одну опцию в список
Метка: имя параметра списка, отображаемого пользователю
Столбец «Проверить»: любой вариант списка, отмеченный здесь, будет отображаться как вариант по умолчанию для пользователя.

Настройки дисплея

Описание

Любой введенный здесь текст появится между меткой и полем.

Расширенные настройки

Размер коробки с несколькими вариантами выбора

Регулирует количество вариантов выбора списка, которые пользователь может просматривать одновременно / без прокрутки списка.

Показать расширенные функции

Чтобы увидеть эти функции, вам нужно включить режим разработчика в настройках Ninja Forms.

Общие настройки

Опции

Значение : Используйте это, чтобы изменить то, что будет отображаться в данных отправки, если этот параметр списка выбран пользователем.По умолчанию он соответствует метке списка. Здесь поддерживаются только определенные символы: a-z, 0-9, дефис -, подчеркивание _, @ и пробел.
Расчетное значение : При включении этого поля в расчет введенное здесь значение будет введено как часть этого расчета, если выбран данный параметр списка.

Настройки дисплея

Имена пользовательских классов

Контейнер : введенный здесь текст применяет пользовательский класс HTML к оболочке этого поля
Элемент : введенный здесь текст применяет пользовательский класс HTML к элементу этого поля

Текст справки

Расширенные настройки

Позиция этикетки

Изменяет ориентацию метки поля относительно элемента поля (сверху, снизу, слева, справа, скрыто)

Настройки администрирования

Ключ поля

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

Наклейка администратора

[В начало]

Выбрать изображение

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

Общие настройки

Этикетка

Имя поля, отображаемое для ваших пользователей.

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

Если включено, это поле необходимо заполнить перед отправкой формы.

Параметры изображения

Добавить новый: добавляет еще одну опцию в список
Метка: имя параметра списка, отображаемого пользователю. Метка будет предварительно заполнена именем файла изображения, но может быть изменена.
Изображение: Щелкните значок библиотеки мультимедиа в этом поле, чтобы выбрать изображение из библиотеки мультимедиа, которое будет отображаться для этого параметра списка.
Столбец «Проверить»: любой вариант списка, отмеченный здесь, будет отображаться как вариант по умолчанию для пользователя.

Параметры отображения изображений

Показать ярлыки: показать или скрыть ярлыки отдельных параметров списка
Разрешить множественный выбор: если он включен (зеленый), пользователи могут выбрать 2+ списка вместо 1
Ориентация списка: выберите, следует ли отображать параметры списка изображений по вертикали (вверх / вниз) или по горизонтали (влево / вправо).
Число столбцов: при выборе горизонтальной ориентации это число определяет максимальное количество столбцов, в которых будут отображаться изображения в поле. В зависимости от размера экрана (сколько места на самом деле существует для отображения слева направо) в поле может отображаться меньше столбцов, чем этот параметр.

Настройки дисплея

Описание

Любой введенный здесь текст появится между меткой и полем.

Расширенные настройки

Размер коробки с несколькими вариантами выбора

Показать расширенные функции

Чтобы увидеть эти функции, вам нужно включить режим разработчика в настройках Ninja Forms.

Общие настройки

Параметры изображения

Значение : Используйте это, чтобы изменить то, что будет отображаться в данных отправки, если этот параметр списка выбран пользователем. По умолчанию он соответствует метке списка. Здесь поддерживаются только определенные символы: a-z, 0-9, дефис -, подчеркивание _, @ и пробел.
Расчетное значение : При включении этого поля в расчет введенное здесь значение будет введено как часть этого расчета, если выбран данный параметр списка.

Настройки дисплея

Имена пользовательских классов

Контейнер : введенный здесь текст применяет пользовательский класс HTML к оболочке этого поля
Элемент : введенный здесь текст применяет пользовательский класс HTML к элементу этого поля

Текст справки

Расширенные настройки

Позиция этикетки

Изменяет ориентацию метки поля относительно элемента поля (сверху, снизу, слева, справа, скрыто)

Настройки администрирования

Ключ поля

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

Наклейка администратора

[В начало]

Одиночный флажок

Поле Single Checkbox помещает в форму единственный флажок.

Общие настройки

Этикетка

Имя поля, отображаемое для ваших пользователей.

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

Если включено, это поле необходимо заполнить перед отправкой формы.

Значение по умолчанию

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

Настройки дисплея

Описание

Любой введенный здесь текст появится между меткой и полем.

Показать расширенные функции

Чтобы увидеть эти функции, вам нужно включить режим разработчика в настройках Ninja Forms.

Общие настройки

Значения флажков

Проверяемое значение : текст, введенный здесь, будет отображаться в сообщениях для этой формы, если пользователь установит флажок. По умолчанию «Проверено»
Unchecked Value : Текст, введенный здесь, будет отображаться в сообщениях для этой формы, если пользователь не установит флажок. По умолчанию «Не установлен»

Настройки ограничений

Отключить вход

Запрещает пользователям вводить текст в поле.

Настройки дисплея

Имена пользовательских классов

Контейнер : введенный здесь текст применяет пользовательский класс HTML к оболочке этого поля
Элемент : введенный здесь текст применяет пользовательский класс HTML к элементу этого поля

Текст справки

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

Расширенные настройки

Позиция этикетки

Изменяет ориентацию метки поля относительно элемента поля (сверху, снизу, слева, справа, скрыто)

Проверенное расчетное значение

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

Непроверенное расчетное значение

Числовое значение, введенное здесь, будет использоваться при любых вычислениях, включая это поле, если это поле не отмечено пользователем.

Настройки администрирования

Ключ поля

Наклейка администратора

[В начало]

Список флажков

Поле списка флажков позволяет выбрать один или несколько флажков.

Общие настройки

Этикетка

Имя поля, отображаемое для ваших пользователей.

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

Если включено, это поле необходимо заполнить перед отправкой формы.

Опции

Добавить новый: добавляет еще одну опцию в список
Метка: имя параметра списка, отображаемого пользователю
Столбец «Проверить»: любой вариант списка, отмеченный здесь, будет отображаться как вариант по умолчанию для пользователя.

Настройки дисплея

Описание

Любой введенный здесь текст появится между меткой и полем.

Показать расширенные функции

Чтобы увидеть эти функции, вам нужно включить режим разработчика в настройках Ninja Forms.

Общие настройки

Опции

Значение : Используйте это, чтобы изменить то, что будет отображаться в данных отправки, если этот параметр списка выбран пользователем. По умолчанию он соответствует метке списка. Здесь поддерживаются только определенные символы: a-z, 0-9, дефис -, подчеркивание _, @ и пробел.
Расчетное значение : При включении этого поля в расчет введенное здесь значение будет введено как часть этого расчета, если выбран данный параметр списка.

Настройки дисплея

Имена пользовательских классов

Контейнер : введенный здесь текст применяет пользовательский класс HTML к оболочке этого поля
Элемент : введенный здесь текст применяет пользовательский класс HTML к элементу этого поля

Текст справки

Расширенные настройки

Позиция этикетки

Изменяет ориентацию метки поля относительно элемента поля (сверху, снизу, слева, справа, скрыто)

Настройки администрирования

Ключ поля

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

Наклейка администратора

[В начало]

Дата

Поле «Дата» представляет селектор даты Pikaday как поле, из которого пользователь может выбрать дату в представлении календаря.

Это то, что пользователь увидит при нажатии на поле:

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

Общие настройки

Этикетка

Имя поля, отображаемое для ваших пользователей.

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

Если включено, это поле необходимо заполнить перед отправкой формы.

По умолчанию на текущую дату

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

Формат

Изменяет формат даты, отображаемой в поле после того, как пользователь сделает свой выбор. По умолчанию mm / dd / yyyy, если здесь не указано иное.

Настройки дисплея

Заполнитель

Описание

Любой введенный здесь текст появится между меткой и полем.

Показать расширенные функции

Чтобы увидеть эти функции, вам нужно включить режим разработчика в настройках Ninja Forms.

Настройки дисплея

Имена пользовательских классов

Контейнер : введенный здесь текст применяет пользовательский класс HTML к оболочке этого поля
Элемент : введенный здесь текст применяет пользовательский класс HTML к элементу этого поля

Текст справки

Расширенные настройки

Позиция этикетки

Изменяет ориентацию метки поля относительно элемента поля (сверху, снизу, слева, справа, скрыто)

Год Диапазон

Год начала : ввод года здесь ограничит возможность выбора пользователем любого года, предшествующего этому году.
Конец года : ввод года здесь ограничит возможность выбора пользователем любого года позже этого года.

Настройки администрирования

Ключ поля

Наклейка администратора

[В начало]

Отправить

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

Общие настройки

Этикетка

Имя поля, отображаемое для ваших пользователей.

Этикетка обработки

Когда пользователь нажимает кнопку «Отправить», отображается «Обработка» до завершения отправки.Если вы хотите изменить этот язык, вы можете сделать это здесь.

Показать расширенные функции

Чтобы увидеть эти функции, вам нужно включить режим разработчика в настройках Ninja Forms.

Настройки дисплея

Имена пользовательских классов

Контейнер : введенный здесь текст применяет пользовательский класс HTML к оболочке этого поля
Элемент : введенный здесь текст применяет пользовательский класс HTML к элементу этого поля

Настройки администрирования

Ключ поля

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

[В начало]

HTML

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

Общие настройки

Этикетка

Имя поля, отображаемое для ваших пользователей.

Значение по умолчанию

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

Показать расширенные функции

Чтобы увидеть эти функции, вам нужно включить режим разработчика в настройках Ninja Forms.

Настройки дисплея

Имена пользовательских классов

Контейнер : введенный здесь текст применяет пользовательский класс HTML к оболочке этого поля
Элемент : введенный здесь текст применяет пользовательский класс HTML к элементу этого поля

[В начало]

Разделитель

Поле «Разделитель» просто добавляет горизонтальную линию поперек формы, где бы это поле не размещалось. Используется для разделения одной страницы на чистые разделы.

Показать расширенные функции

Чтобы увидеть эти функции, вам нужно включить режим разработчика в настройках Ninja Forms.

Имена пользовательских классов

Контейнер : введенный здесь текст применяет пользовательский класс HTML к оболочке этого поля
Элемент : введенный здесь текст применяет пользовательский класс HTML к элементу этого поля

[В начало]

Повторяемый полевой набор

Repeatable Fieldset или Repeater - это тип поля, в который вы можете перетаскивать другие поля:

Поле повторителя при первом добавлении в форму.

Обратите внимание, что в настоящее время поля можно перетаскивать в репитер только из списка полей в окне нового поля.

Поле повторителя, просматриваемое в конструкторе форм, содержащее имя и адрес электронной почты.

Когда пользователь просматривает форму на странице, он видит все поля, которые вы разместили внутри ретранслятора, как группу. Используя кнопку «Добавить», они могут добавить столько групп этих полей, сколько необходимо. Подпись поля повторителя и текст кнопки можно изменить, настроив параметр Ярлык поля.

Повторяемое поле, содержащее поле имени и адреса электронной почты на странице.

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

Показать расширенные функции

Чтобы увидеть эти функции, вам нужно включить режим разработчика в настройках Ninja Forms.

Имена пользовательских классов

Контейнер : введенный здесь текст применяет пользовательский класс HTML к оболочке этого поля
Элемент : введенный здесь текст применяет пользовательский класс HTML к элементу этого поля

[В начало]

Подтвердить

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

Общие настройки

Этикетка

Имя поля, отображаемое для ваших пользователей.

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

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

Подтвердить

Выберите поле в форме, для которого вы хотите, чтобы поле «Подтвердить» соответствовало / проверяло.

Настройки дисплея

Значение по умолчанию

Заполнитель

Описание

Любой введенный здесь текст появится между меткой и полем.

Показать расширенные функции

Чтобы увидеть эти функции, вам нужно включить режим разработчика в настройках Ninja Forms.

Настройки ограничений

Ограничение ввода этого числа

Отключить вход

Запрещает пользователям вводить текст в поле.

Настройки дисплея

Имена пользовательских классов

Контейнер : введенный здесь текст применяет пользовательский класс HTML к оболочке этого поля
Элемент : введенный здесь текст применяет пользовательский класс HTML к элементу этого поля

Текст справки

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

Расширенные настройки

Позиция этикетки

Изменяет ориентацию метки поля относительно элемента поля (сверху, снизу, слева, справа, скрыто)

Настройки администрирования

Ключ поля

Наклейка администратора

[В начало]

Скрытый

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

Общие настройки

Этикетка

Имя поля, которое будет отображаться в конструкторе Ninja Forms (не отображается для пользователей).

Значение по умолчанию

Показать расширенные функции

Настройки администрирования

Ключ поля

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

Наклейка администратора

[В начало]

Числовое поле

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

Общие настройки

Этикетка

Имя поля, отображаемое для ваших пользователей.

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

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

Номер Опции

Min: минимальное значение, которое пользователь может ввести в это поле
Max: максимальное значение, которое пользователь может ввести в это поле
Шаг: Ограничивает значения, которые могут быть введены в поле, введенным здесь приращением.Пример: Step = 1 допускает 1, 2, 3, 4, 5 и т. Д., Но не 1,5 или 4,3. Шаг = 10 позволит использовать 10, 20, 30, 40, 50 и т. Д., Но не 15 или 43. Введите здесь 0,01, чтобы разрешить такие числа, как 9,99, 15,49 и т. Д.

Настройки дисплея

Значение по умолчанию

Заполнитель

Описание

Любой введенный здесь текст появится между меткой и полем.

Показать расширенные функции

Чтобы увидеть эти функции, вам нужно включить режим разработчика в настройках Ninja Forms.

Настройки дисплея

Имена пользовательских классов

Контейнер : введенный здесь текст применяет пользовательский класс HTML к оболочке этого поля
Элемент : введенный здесь текст применяет пользовательский класс HTML к элементу этого поля

Текст справки

Расширенные настройки

Позиция этикетки

Изменяет ориентацию метки поля относительно элемента поля (сверху, снизу, слева, справа, скрыто)

Настройки администрирования

Ключ поля

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

Наклейка администратора

[В начало]

Рекапча

Поле Recaptcha связывает вашу форму с технологией reCAPTCHA Google, заставляя пользователя выполнить запрос reCAPTCHA, прежде чем форма будет успешно отправлена.

Чтобы это поле работало, вы должны привязать Ninja Forms к своей учетной записи Google (см. Раздел reCAPTCHA). В противном случае поле станет нефункциональным.

Общие настройки

Этикетка

Имя поля, отображаемое для ваших пользователей, если вы выбрали отображение reCAPTCHA.

Видимость

Выберите, отображать ли поле «Я не робот» или определять, является ли пользователь роботом в фоновом режиме.

Показать расширенные функции

Чтобы увидеть эти функции, вам нужно включить режим разработчика в настройках Ninja Forms.

Настройки дисплея

Имена пользовательских классов

Контейнер : введенный здесь текст применяет пользовательский класс HTML к оболочке этого поля
Элемент : введенный здесь текст применяет пользовательский класс HTML к элементу этого поля

[В начало]

Защита от спама

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

Общие настройки

Вопрос

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

Ответ

Ожидаемый ответ на заданный вопрос. Ответ пользователя должен точно соответствовать . Они чувствительны к регистру.

Настройки дисплея

Значение по умолчанию

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

Заполнитель

Описание

Любой введенный здесь текст появится между меткой и полем.

Показать расширенные функции

Чтобы увидеть эти функции, вам нужно включить режим разработчика в настройках Ninja Forms.

Настройки ограничений

Ограничение ввода этого числа

Отключить вход

Запрещает пользователям вводить текст в поле.

Настройки дисплея

Имена пользовательских классов

Контейнер : введенный здесь текст применяет пользовательский класс HTML к оболочке этого поля
Элемент : введенный здесь текст применяет пользовательский класс HTML к элементу этого поля

Текст справки

Расширенные настройки

Должность вопроса

Изменяет ориентацию вопроса относительно элемента поля (вверху, внизу, слева, справа, скрыто).

Настройки администрирования

Ключ поля

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

Наклейка администратора

[В начало]

звездный рейтинг

Поле «Звездный рейтинг» предлагает пользователю графическое изображение «линии звездочек», из которого он может выбрать рейтинг из любого диапазона по вашему выбору.

Общие настройки

Этикетка

Имя поля, отображаемое для ваших пользователей.

Количество звезд

Количество звезд, которые появятся на вашем графике «линия звезд».

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

Если включено, это поле необходимо заполнить перед отправкой формы.

Показать расширенные функции

Чтобы увидеть эти функции, вам нужно включить режим разработчика в настройках Ninja Forms.

Настройки дисплея

Значение по умолчанию

Если ввести здесь числовое значение, которое находится в диапазоне звездочек в поле (1–5, 1–10 и т. Д.), Это количество звездочек будет помечено по умолчанию при загрузке формы.

Имена пользовательских классов

Контейнер : введенный здесь текст применяет пользовательский класс HTML к оболочке этого поля
Элемент : введенный здесь текст применяет пользовательский класс HTML к элементу этого поля

Расширенные настройки

Позиция этикетки

Изменяет ориентацию метки поля относительно элемента поля (сверху, снизу, слева, справа, скрыто)

Настройки администрирования

Ключ поля

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

Share :

Апрель 2024
Пн	Вт	Ср	Чт	Пт	Сб	Вс
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Обязательное поле для заполнения html: Атрибут required | htmlbook.ru

Защита от дурака | htmlbook.ru

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

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

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

Как сделать поля в форме обязательными для заполнения за 1 минуту в HTML

Обязательные поля формы. Как сделать поля формы обязательными

PSD to HTML

Улучшаем обязательные поля формы при помощи CSS3

Демонстрация

Эффективные HTML-формы. Часть 2

Выделяйте обязательные поля

Помечайте ошибки

Отличный UX начинается с контента

Кнопки должны быть кнопками

aria-describedby или aria-labeledby

— HTML | MDN

Простое поле ввода пароля

Поддержка автозаполнения

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

Указание режима ввода

Настройка длины пароля

Выделение текста

HTML

JavaScript

Результат

Запрос номера социального страхования

HTML

JavaScript

Результат

Поля формы — Документация Django 1.9

Базовые аргументы поля

Классы встроенных полей

Создание собственных полей

Атрибут HTML: обязательный — HTML: язык разметки гипертекста

Первый подход: использование ARIA

Лучший подход: использование значка

Использование проверок на стороне клиента HTML 5

Вас также может заинтересовать

Как использовать «обязательный» атрибут с полем ввода радио

Создать HTML¶

Пример использования обязательного атрибута с полем ввода радио: ¶

Спасибо за ваш отзыв!

Статьи по теме

Обязательные поля | База знаний Flowfinity

Пример 1

Инструкции

Пример 2

Инструкции

Избегайте проверки полей по умолчанию | Адриан Роселли

Теги

Другие сообщения

типов полей - формы ниндзя

Содержание

Общие поля

Поля макета

Разные поля

Однострочный текст

Общие настройки

Настройки дисплея

Настройки ограничений

Настройки дисплея

Расширенные настройки

Настройки администрирования

Текст абзаца

Общие настройки

Настройки дисплея

Настройки ограничений

Настройки дисплея

Расширенные настройки

Настройки администрирования

Список радио

Общие настройки

Настройки дисплея

Общие настройки

Настройки дисплея

Расширенные настройки

Настройки администрирования

Выбрать

Общие настройки