Html input только цифры: javascript — input поле только для цифр html

Если опустить атрибут value кнопки Submit, кнопка получит текст по умолчанию:

Пример

<form action=»/action_page.php»>
  First name:<br>
  <input type=»text» name=»firstname» value=»Mickey»><br>
  Last name:<br>
  <input type=»text» name=»lastname» value=»Mouse»><br><br>
  <input type=»submit»>
</form>

Сброс типа ввода

<input type="reset"> Определяет кнопку сброса , которая сбрасывает все значения формы в значения по умолчанию:

Пример

<form action=»/action_page. php»>
  First name:<br>
  <input type=»text» name=»firstname» value=»Mickey»><br>
  Last name:<br>
  <input type=»text» name=»lastname» value=»Mouse»><br><br>
  <input type=»submit» value=»Submit»>
  <input type=»reset»>
</form>

Таким образом, HTML-код выше будет отображаться в браузере:

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

Тип входного сигнала радио

<input type="radio"> Определяет переключатель.

Переключатели позволяют пользователю выбрать только одно из ограниченного числа вариантов:

Пример

<form>
  <input type=»radio» name=»gender» value=»male» checked> Male<br>
  <input type=»radio» name=»gender» value=»female»> Female<br>
  <input type=»radio» name=»gender» value=»other»> Other
</form>

Таким образом, HTML-код выше будет отображаться в браузере:

Male
Female
Other

Флажок «тип ввода»

<input type="checkbox"> Определяет CheckBox.

Флажки позволяют пользователю выбрать ноль или более вариантов ограниченного числа вариантов.

Пример

<form>
  <input type=»checkbox» name=»vehicle1″ value=»Bike»> I have a bike<br>
  <input type=»checkbox» name=»vehicle2″ value=»Car»> I have a car
</form>

Таким образом, HTML-код выше будет отображаться в браузере:

I have a bike
I have a car

Кнопка ввода типа

<input type="button"> Определяет кнопку:

Пример

<input type=»button» value=»Click Me!»>

Таким образом, HTML-код выше будет отображаться в браузере:

Типы входных данных HTML5

HTML5 добавил несколько новых типов ввода:

• color
• date
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

Новые типы ввода, которые не поддерживаются старыми веб-обозревателями, будут вести себя как <input type="text"> .

Цвет входного типа

<input type="color"> используется для полей ввода, которые должны содержать цвет.

В зависимости от поддержки обозревателя в поле ввода может отображаться палитра цветов.

Пример

<form>
  Select your favorite color:
  <input type=»color» name=»favcolor»>
</form>

Тип ввода Дата

<input type="date"> используется для полей ввода, которые должны содержать дату.

В зависимости от поддержки обозревателя в поле ввода может отображаться выбор даты.

Пример

<form>
  Birthday:
  <input type=»date» name=»bday»>
</form>

Можно также использовать атрибуты min и max для добавления ограничений дат:

Пример

<form>
  Enter a date before 1980-01-01:
  <input type=»date» name=»bday» max=»1979-12-31″><br>
  Enter a date after 2000-01-01:
  <input type=»date» name=»bday» min=»2000-01-02″><br>
</form>

Входной тип DateTime-локальный

<input type="datetime-local"> задает поле ввода даты и времени без часового пояса.

В зависимости от поддержки обозревателя в поле ввода может отображаться выбор даты.

Пример

<form>
  Birthday (date and time):
  <input type=»datetime-local» name=»bdaytime»>
</form>

Тип ввода электронной почты

<input type="email"> используется для полей ввода, которые должны содержать адрес электронной почты.

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

Некоторые смартфоны распознавать тип электронной почты и добавляет «. com» на клавиатуре для сопоставления ввода электронной почты.

Пример

<form>
  E-mail:
  <input type=»email» name=»email»>
</form>

Тип входного месяца

<input type="month"> позволяет пользователю выбрать месяц и год.

В зависимости от поддержки обозревателя в поле ввода может отображаться выбор даты.

Пример

<form>
  Birthday (month and year):
  <input type=»month» name=»bdaymonth»>
</form>

Тип входного номера

<input type="number"> определяет Числовое поле ввода.

Вы также можете установить ограничения на то, какие номера принимаются.

В следующем примере отображается числовое поле ввода, в котором можно ввести значение от 1 до 5:

Пример

<form>
  Quantity (between 1 and 5):
  <input type=»number» name=»quantity» min=»1″ max=»5″>
</form>

Ограничения ввода

Ниже приведен список некоторых распространенных ограничений ввода (некоторые из них являются новыми в HTML5):

Подробнее об ограничениях ввода вы узнаете в следующей главе.

В следующем примере отображается числовое поле ввода, в котором можно ввести значение от 0 до 100 в шагах 10. Значение по умолчанию равно 30:

Пример

<form>
  Quantity:
  <input type=»number» name=»points» min=»0″ max=»100″ step=»10″ value=»30″>
</form>

Диапазон входного типа

<input type="range"> определяет элемент управления для ввода числа, точное значение которого не имеет значения (например, элемент управления Slider). Диапазон по умолчанию — от 0 до 100. Однако можно установить ограничения на то, какие номера принимаются с атрибутами min, max и step:

Пример

<form>
  <input type=»range» name=»points» min=»0″ max=»10″>
</form>

Поиск типа ввода

<input type="search"> используется для полей поиска (поле поиска работает как обычное текстовое поле).

Пример

<form>
  Search Google:
  <input type=»search» name=»googlesearch»>
</form>

Тип ввода тел

<input type="tel"> используется для полей ввода, которые должны содержать телефонный номер.

Примечание: Тип Tel в настоящее время поддерживается только в Safari 8.

Пример

<form>
  Telephone:
  <input type=»tel» name=»usrtel»>
</form>

Время ввода типа

<input type="time"> позволяет пользователю выбрать время (без часового пояса).

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

Пример

<form>
  Select a time:
  <input type=»time» name=»usr_time»>
</form>

URL-адрес типа ввода

<input type="url"> используется для полей ввода, которые должны содержать URL-адрес.

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

Некоторые смартфоны распознают тип URL-адреса и добавляют «. com» к клавиатуре для сопоставления ввода URL-адреса.

Пример

<form>
  Add your homepage:
  <input type=»url» name=»homepage»>
</form>

Тип ввода неделя

<input type="week"> позволяет пользователю выбрать неделю и год.

В зависимости от поддержки обозревателя в поле ввода может отображаться выбор даты.

Пример

<form>
&nbspnbsp; Select a week:
  <input type=»week» name=»week_year»>
</form>

Атрибут типа ввода HTML

❮ Назад Дальше ❯

Валидация форм | Angular с примерами кода

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

Валидация форм Angular

Для того чтобы задать валидацию, используются стандартные атрибуты валидации форм HTML5 (required, minlength, max, pattern и т. д.).

<form>
  <div>
    <label>Bill Amount</label>
    <input type="number" max="100" required />
  </div>
</form>

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

<form>
  <div>
    <label>Bill Amount</label>
    <input
      type="number"
      [(ngModel)]="bill.amount"
      #amount="ngModel"
      max="100"
      required
    />
  </div>
</form>

Теперь переменная #amount содержит объект с информацией о поле, на которое оно ссылается. Список необходимых для валидации свойств объекта:

• dirty — true, если пользователь осуществлял ввод (выбор) значения;
• touched — true, если поле потеряло фокус;
• invalid — true, если поле невалидно;
• valid — true, если поле валидно;
• errors — содержит объект со свойствами тех атрибутов валидации, которые не удовлетворяют заданному условию.

Общепринято отображать ошибки только тогда, когда пользователь хоть как-то взаимодействовал с полем, то есть когда свойства invalid и dirty или touched ровно true. Вывод той или иной ошибки зависит от того, какой именно атрибут валидации не прошел проверку.

<form>
  <div>
    <label>Bill Amount</label>
    <input
      type="number"
      [(ngModel)]="bill.amount"
      #amount="ngModel"
      max="100"
      required
    />
    <div
      *ngIf="amount.invalid && (amount.dirty || amount.touched)"
    >
      <div *ngIf="amount.errors.required">
        Required field
      </div>
      <div *ngIf="amount.errors.max">
        Max possible value is 100
      </div>
    </div>
  </div>
</form>

Валидация реактивных форм Angular

Для реактивных форм вся валидация устанавливается в классе компонента при описании модели формы. Каждому полю задается свой массив валидаторов.

Список встроенных валидаторов (Angular validators):

• required — поле обязательно для заполнения;
• email — проверка валидности email;
• min(min: number) — минимальное возможное значение;
• max(max: number) — максимальное возможное значение;
• minLength(minLength: number) — минимальная длина вводимой строки;
• maxLength(maxLength: number) — максимальная длина вводимой строки;
• pattern(pattern: string | RegExp) — регулярное выражение, которому должно соответствовать вводимое значение. [0-9]+(?!.)/), ], ], }) } get _client() { return this.clientForm.get(‘client’) } get _clientAge() { return this.clientForm.get(‘clientAge’) } }

  reactive-form-validation.html

  <form [formGroup]="clientForm" novalidate>
    <div>
      <label>Client</label>
      <input type="text" formControlName="client" />
      <div
        *ngIf="_client.invalid && (_client.touched || _client.dirty)"
      >
        <span *ngIf="_client.errors?.required"
          >Field is required</span
        >
      </div>
    </div>
    <div>
      <label>Age</label>
      <input type="text" formControlName="clientAge" />
      <div
        *ngIf="_clientAge.invalid && (_clientAge.touched || _clientAge.dirty)"
      >
        <span *ngIf="_clientAge.errors?.required"
          >Обязательное поле</span
        >
        <span *ngIf="_clientAge.errors?.min"
          >Значение должно быть больше или равно
          {{_clientAge. [0-9]+(?!.)/']"
          >Разрешаются только цифры</span
        >
      </div>
    </div>
  </form>
  

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

  Свойства полученного объекта поля, используемые для валидации:

  • dirty — true, если пользователь осуществлял ввод (выбор) значения;
  • touched — true, если поле потеряло фокус;
  • invalid — true, если поле невалидно;
  • valid — true, если поле валидно;
  • errors — содержит объект со свойствами тех атрибутов валидации, которые не удовлетворяют заданному условию.

  Остановимся на поле errors. Многие Angular validators принимают входные параметры (maxLength, pattern и др. ), поэтому для получения исчерпывающей информации о неправильном заполнении полей, к которым они применены, их значения в errors реализованы в виде объектов. В таком объекте содержатся данные о текущем значении и ограничения, накладываемые на это значение (см. пример выше).

  Например, ключи объекта ошибки валидатора pattern — сами регулярные выражения. Что позволяет однозначно идентифицировать ошибку и отобразить пользователю соответствующее сообщение.

  Более подробное описание можно найти в документации.

  Для работы с ошибками в реактивных формах предусмотрены прикладные методы:

  • setErrors(errors: ValidationErrors) — используется для того, чтобы задать ошибку вручную;
  • getError(errorCode: string) — вернет объект с данными о запрашиваемой ошибке, если поле валидно, то вернется null или undefined;
  • hasError(errorCode: string) — вернет true, если поле имеет указанную ошибку.

  this.clientForm.get('client').hasError('required')
  

  Для динамического добавления полю валидаторов используется метод setValidators().

  this.clientForm
    .get('client')
    .setValidators([Validators.maxLength(100)])
  

  Чтобы удалить все привязанные к полю Angular validators, необходимо вызвать метод clearValidators().

  this.clientForm.get('client').clearValidators()
  

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

  this.clientForm.get('clientAge').updateValueAndValidity()
  

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

  account.validator.ts

  export function accountValidator(): ValidatorFn {
    return (
      control: AbstractControl
    ): { [key: string]: boolean } | null => {
      let accountRgEx: RegExp = /^[0-9]{20}(?!. )/
      let valid =
        !control.value || accountRgEx.test(control.value)
      return valid ? null : { account: true }
    }
  }
  

  import {accountValidator} from './validators/account.validator.ts';
  //
  accountNumber: ['', [accountValidators()]],
  //
  

  В примере accountValidator() проверяет корректность номера банковского счета (20 цифр — проверка условная). Если номер введен не верно, тогда для поля accountNumber будет установлена ошибка account со значением true.

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

  Асинхронные валидаторы Angular

  Использование механизма асинхронной валидации (Angular async validators) позволяет проверять введенное значение на удаленном сервере. Например, проверка уникальности имени пользователя при регистрации.

  Перейдем к практике. Допустим, имеется форма заказа какого-либо товара, где пользователь указывает желаемое его количество. Создадим валидатор checkGoodsLeftValidator(), который будет проверять, имеется ли запрошенное покупателем количество товара.

  goods.service.ts

  @Injectable({ providedIn: 'root' })
  export class GoodsService {
    constructor(private http: HttpClient) {}
    checkGoodsLeft(count: number | string): Observable<any> {
      return this.http.get('/api/goods/left')
    }
  }
  

  check-goods-left.validator.ts

  export function checkGoodsLeftValidator(
    control: AbstractControl
  ) {
    return this.checkGoodsLeft(control.value).pipe(
      tap((response) => {
        return response ? null : { goodsLeft: true }
      })
    )
  }
  

  check-goods-left-validator-example.component.ts

  @Component({
    selector: 'check-goods-left-validator-example',
    templateUrl:
      './check-goods-left-validator-example.component.html',
  })
  export class CheckGoodsLeftValidatorExampleComponent {
    orderForm: FormGroup
    constructor(
      private fb: FormBuilder,
      private goodsService: GoodsService
    ) {
      this. _createForm()
    }
    private _createForm() {
      this.orderForm = this.fb.group({
        client: ['', [Validators.required]],
        goodsCount: [
          '',
          [Validators.required],
          [checkGoodsLeftValidator.bind(this.goodsService)],
        ],
      })
    }
  }
  

  Поскольку наш Angular async validator обращается к методу сервиса, а сам валидатор вызывается в контексте компонента, который его использует, здесь используется привязка контекста сервиса GoodsService с помощью bind().

  Все асинхронные валидаторы указываются в массиве третьим параметром.

  Стилизация формы

  В зависимости от состояния и статуса валидации, форме и ее полям устанавливаются соответствующие CSS-классы, которые можно использовать для стилизации элементов.

  • ng-valid;
  • ng-invalid;
  • ng-pending;
  • ng-pristine;
  • ng-dirty;
  • ng-untouched;
  • ng-touched.

  Ссылки

  • Form Validation

  HTML5 | Новые типы элемента

  116

  Веб-программирование — HTML5 — Новые типы элемента <input>

  Одной из странных особенностей HTML-форм является использование одного элемента с расплывчатым названием <input> для создания разнообразных элементов управления, от флажков до текстовых полей и кнопок. Конкретный вид элемента управления зависит от атрибута type элемента <input>.

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

  <input type="text">
  <input type="странный-тип-input">
  <input>

  В HTML5 из этого поведения извлекается польза. А именно, в элемент <input> было добавлено несколько новых типов, и если какой-либо браузер не поддерживает их, он будет обрабатывать их как обычные текстовые поля. Например, для ввода адреса электронной почты можно создать поле <input> нового типа email:

  <input type="email"><br>

  Если просматривать страницу с этим кодом в браузере, который не поддерживает тип email для элемента <input> (например, Internet Explorer), то это поле отобразится как обычное текстовое поле. Но браузеры, поддерживающие формы HTML5 немного умнее могут делать следующее:

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

  • Предотвратить возможные ошибки. Например, браузер может не принимать буквы при вводе в поле типа number, или не принимать недопустимые даты, или вообще заставить пользователя выбирать даты из мини-календаря, что легче и безопаснее.

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

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

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

  К сожалению, не все современные браузеры удовлетворяют этим требованиям. Некоторые распознают новые типы данных и предоставляют кое-какие возможности редактирования, но не проверки. Многие браузеры понимают один тип данных, но не другой. Особенно проблемные в этом отношении мобильные браузеры — они предоставляют некоторые удобства редактирования, но никаких возможностей проверки.

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

  Поддержка новых типов данных основными браузерами

  Тип данных	IE	Firefox	Chrome	Safari	Opera	Safari iOS	Android
  email	—	4	10	5	10.6	—	—
  url	—	4	10	5	10.6	—	—
  search (без проверки)
  tel (без проверки)
  number	—	—	10	5	—	—	—
  range	—	—	6	5	11	—	—
  datetime, date, month, week, time	—	—	10	—	11	—	—
  color	—	—	—	—	11	—	—

  Хотя мобильные браузеры Safari для iOS и Android не поддерживают проверку, предоставление этими браузерами специализированных клавиатур является значительным удобством, поэтому в приложениях для этих веб-обозревателей стоит использовать специальные типы данных.

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

  Тип данных email используется для полей, предназначенных для ввода адресов электронной почты. В общем, адрес электронной почты состоит из строки символов (использование некоторых символов не допускается). Допустимый адрес должен содержать символ @ и точку, между которыми должен быть минимум один символ, а после точки — минимум два символа:

  Тип email поддерживает атрибут multiple, который позволяет вводить несколько адресов в поле. Но эти несколько адресов все равно выглядят, как одна строка текста, только разделены запятыми.

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

  URL-адреса

  Тип url применяется для полей ввода URL-адресов. Вопрос, что является допустимым URL, продолжает горячо обсуждаться. Но большинство браузеров применяет сравнительно нестрогий алгоритм проверки. Адрес должен содержать префикс (который может быть как настоящим, типа http://, так и выдуманным, типа bonk//) и позволяет вводить пробелы и большинство специальных символов, за исключением двоеточия.

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

  Поля поиска

  Тип search применяется для полей поиска. Они обычно предназначены для ввода ключевых слов, по которым потом выполняется какой-либо вид поиска. Это может быть поиск по всему Интернету (как в Google), поиск по одной странице или же специальная поисковая процедура, которая исследует каталог информации. В любом случае поле поиска выглядит и ведет себя почти точно так же, как и обычное текстовое поле.

  В некоторых браузерах, например Safari, поле поиска выглядит слегка по-другому и имеет скругленные углы. Кроме этого, когда пользователь начинает вводить данные в поле поиска в браузере Safari или Chrome, с правой стороны поля выводится небольшой значок в виде X, щелкнув по которому можно очистить поле.

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

  Телефонные номера

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

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

  Числа

  В HTML5 определяются два числовых типа данных. Тип number предназначен для обычных чисел.

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

  <label for="age">Возраст<em>*</em></label>
  <input type="number"><br>

  Конечно же, есть много чисел, которые не подходят для каждого типа числовых данных. Например, в приведенной выше разметке разрешается возраст наподобие 43 000 или -6 лет, что несколько не соответствует реальности. Эта проблема решается с помощью атрибутов min и max. В следующем коде представлен пример ограничения возраста разумным диапазоном:

  <input type="number" min="18" max="120"><br>

  Обычно поля типа number принимают только целые числа, а дроби, например 30. 5 не разрешаются. (Более того, некоторые браузеры даже не позволят ввести десятичный знак.) Но это поведение также можно изменить с помощью атрибута step, который указывает шаг изменения числа (в большую или меньшую сторону). Например, установив значение step в 0.1, можно вводить такие значения, как 0.1, 0.2 0.3 и т. д. Но попробуйте отправить форму со значением 0.15 и вы получите знакомое всплывающее сообщение об ошибке. По умолчанию значение шага равно 1.

  <input type="number" min="18" max="120" step="0.1"><br>

  Атрибут step также влияет на работу кнопок поля со счетчиком:

  Ползунки

  Другим числовым типом HTML5 является range. Подобно типу number, этот тип может представлять целые и дробные значения. Также поддерживает атрибуты min и max для установки диапазона значений. Далее показан пример кода для создания поля этого типа:

  <label for="age">Возраст<em>*</em></label>
  <input type="range" min="0" max="120" value="30"><br>

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

  Чтобы установить значение типа range, нужно просто перетянуть ползунок в требуемую позицию между минимальным и максимальным значениями. Но браузеры, поддерживающие этот тип поля, не предоставляют никакой обратной информации об установленном значении. Чтобы получить эти сведения, в разметку нужно добавить процедуру JavaScript, которая реагирует на изменения положения ползунка (возможно, посредством обработки события onChange), а потом отображает эту формацию рядом с полем.

  Дата и время

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

  Ниже показан пример использования дат:

  <label for="age">Дата рождения<em>*</em></label>
  <input type="date" min="1920-01-01" max="2000-01-01"><br>

  В таблице ниже перечислены шесть новых форматов HTML5 для дат и времени, дано их краткое описание:

  Типы данных <input> для дат и времени

  Тип данных	Описание
  date	Дата по шаблону ГГГГ-ММ-ДД
  time	Время в 24-часовом формате с необязательными секундами, по шаблону чч:мм:сс.сс
  datetime-local	Дата и время, разделенные прописной английской буквой T (по шаблону ГГГГ-ММ-ДДTчч:мм:сс)
  datetime	Дата и время, как и для типа datetime-local, но со смещением временного пояса. Используется такой же шаблон (ГГГГ-ММ-ДДTчч:мм:сс-чч:мм), как и для элемента <time>
  month	Год и номер месяца по шаблону ГГГГ-ММ
  week	Год и номер недели по шаблону ГГГГ-Номер недели

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

  Цвет

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

  <fieldset>
       <legend>Выберите любимый цвет</legend>
       <label for="mycolor">Цвет</label>
       <input type="color"><br>
  </fieldset>

  Несколько необычных атрибутов элемента <input>

  Стандарт HTML5 признает еще несколько атрибутов, используемых для управления браузером при заполнении форм. Не все эти атрибуты поддерживаются всеми браузерами. Тем не менее, с ними хорошо экспериментировать:

  Атрибут spellcheck

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

  По умолчанию разные браузеры действуют по-разному в отношении проверки орфографии, а установка атрибута spellcheck приводит к единообразному поведению.

  <textarea oninput="validateComments(this)" spellcheck="false"></textarea>

  Атрибут autocomplete

  Некоторые браузеры пытаются сэкономить время пользователя, предлагая при вводе информации в поле значения, которые вводились в это поле ранее. Такое поведение не всегда желательно — как указывается в спецификации HTML5, некоторая информация может быть конфиденциальной (например, коды для запуска ядерных ракет 😉 или оставаться актуальной только непродолжительное время (например, одноразовый пароль входа в банковскую систему самообслуживания). Для таких полей установите значение атрибута autocomplete в off, чтобы браузер не предлагал возможных вариантов завершения вводимого в поле текста. А чтобы выполнять автозаполнение для определенного поля, установите значение его атрибута autocomplete в on.

  Атрибуты autocorrect и autocapitalize

  Эти атрибуты применяются для управления возможностями автоматического исправления и капитализации на некоторых мобильных браузерах, а именно в версиях Safari для iPad и iPhone

  Атрибут multiple

  Веб-разработчики использовали атрибут multiple с элементом <select> для создания списков с множественным выбором с незапамятных времен. Но сейчас они могут использовать этот атрибут с определенными типами элемента <input>, включая тип file (для закачивания файлов) и email. В браузере, поддерживающем этот атрибут, пользователь может выбрать сразу несколько файлов закачивания на сервер или вставить несколько адресов электронной почты в одно поле.

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

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

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

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

  Разметка

  <form>
    <label for="age">Enter your age</label>
    <input type="number" name="age">
  </form>
  

  Просто форма с вводом числовых данных, в демонстрациях на странице я добавил немного CSS, но базовая разметка будет везде одинаковой.

  Как это делает Internet Explorer

  Internet Explorer дает самое простое отображение по умолчанию среди всех браузеров. Инпут для чисел выглядит также как и простой текстовый инпут. Фактически, Internet Explorer не предлагает нам какой-либо пользовательский интерфейс, за исключением возможности очистить поле ввода от данных. Это достаточно удобная вещь, к сожалению, отсутствующая в других браузерах (иногда встречается в поле поиска type="search").

  Как это делает Firefox

  В Firefox появляется элемент, отсутствующий в ИЕ: кнопка для пошагового изменения значений или спиннер. В спиннере есть стрелки вниз и вверх, позволяющие соответственно, уменьшать и увеличивать значение.

  Удаляется спиннер путем добавления CSS с использованием свойства appearance:

  /* Remove controls from Firefox */
  input[type=number] {
    -moz-appearance: textfield;
  }
  

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

  Как это делает Safari

  Firefox и Safari похожи в обработке числового ввода. И там, и там есть спиннер и нет возможности быстрой очистки поля.

  Мы также можем удалить спиннер из Safari, но другим способом, используя Shadow DOM:

  /* Remove controls from Safari and Chrome */
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: None;
    margin: 0; /* Removes leftover margin */
  }
  

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

  /* Adds a box around the numeric value in Safari and Chrome */
  input[type=number]::-webkit-textfield-decoration-container {
    border: 1px #ccc solid;
    background: #efefef;
  }
  

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

  Как это делает Opera

  Также как Firefox и Safari, в Opera есть управляющие элементы для изменения числа. Но Opera отображает их по-другому.

  В Firefox и Safari (а также в Chrome) спиннер располагается внутри поля ввода, а в Opera он полностью выносится за его пределы. Еще более примечательным является внешний вид спиннера — две крупные кнопки с раздельными границами. Это уже самостоятельный интерфейс пользователя, расширяющий ширину поля ввода.

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

  <form>
    <label for="age">Enter your age</label>
    <input type="text" pattern="[0-9]*" name="age">
  </form>
  

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

  Последняя деталь, которую стоит запомнить это подсветка, срабатывающая при :focus. Большое количество стилей в Opera применяется к выбранным полям, вплоть до изменения вида спиннера, у которого тоже есть свое активное состояние, активируемое при нажатии.

  Как это делает Chrome

  Chrome оказывается где-то посередине. На первый взгляд, он отображает простое поле ввода, но если перевести курсор в правую часть этого поля, в нем появится спиннер, также как в Firefox и Safari.

  Интересно, что Firefox, Safari, Chrome и Opera решили, что инструмент для количественного контроля нужен в пользовательском интерфейсе, в то время как IE не видит в этом необходимости. Chrome выделяется тем, что показывает спиннер только при наведении, скрывая его по умолчанию.

  А если мы захотим придать такое же поведение Firefox? Нужно просто удалить элементы управления по умолчанию, как мы делали раньше и затем применить их с псевдо-классами :hover и :focus:

  /* Remove controls from Firefox */
  input[type=number] {
    -moz-appearance: textfield;
  }
  /* Re-applies the controls on :hover and :focus */
  input[type="number"]:hover,
  input[type="number"]:focus {
    -moz-appearance: number-input;
  }
  

  Хотя Chrome и Safari не настолько похожи между собой, как этого можно было ожидать, оба браузера используют теневой DOM для стилизации и манипуляции полем ввода. Поэтому все манипуляции со стилями поля ввода, которые были упомянуты в разделе о Safari, работают и в Chrome.

  Как это делают Mobile Safari и Android

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

  Но они распознают type="number" и после фокуса на поле ввода, сразу предлагают цифровую клавиатуру. Это уже неплохо и показывает важность указания правильного типа вводимых данных для упрощения жизни пользователей.

  Результаты

  Вот итоговая таблица со сравнением всех браузеров:

  Название свойства	IE	Safari	Firefox	Opera	Chrome	iOS	Android
  Спиннер	Нет	Да	Да	Да, при наведении	Нет	Нет
  Очистка Да	Нет	Нет	Нет	Нет	Нет	Нет
  Выравнивание слева	Да	Да	Да	Нет	Да	Да	Да
  Стили при фокусе	при наведении	Да	Да	Да	Да	Нет	Нет
  Команды с клавиатуры	Да	Да	Да	Да	Да	Нет	Нет
  Управление Shadow DOM	Нет	Да	Нет	Нет	Да	Нет	Нет

  Заключение

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

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

  Используйте его для добавления базовой проверки данных в HTML5 »

  В HTML-атрибуты, новые

  Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнайте больше

  Атрибут

  Как использовать ввод для создания полей формы в HTML: Easy Tutorial

  Что делает шаблон ввода : используйте его для добавления базовой проверки данных в HTML5 ?

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

  Содержание

  • 1 Пример кода
  • 2 Проверка данных с регулярными выражениями
    • 2.1 Пример шаблоны
      • 2.1.1. Расширение имени пользователя
      • 2,1.2 За шаблон платежей
    • 2.2 А. проблемы
      • 2.2.1 Кроме того, не используйте регулярное выражение для адресов электронной почты
      • 2.2.2 Или дат
      • 2.2.3 Или что-нибудь еще, что вы могли бы сделать с чем-то еще
    • 2.3 Проверка переднего плана недостаточна
  • 3 Поддержка браузером шаблона

  Пример кода

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

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

  Проверка данных с помощью регулярных выражений

  9Атрибут 0014 pattern элемента позволяет добавить базовую проверку данных, не прибегая к JavaScript. Он работает, сопоставляя входное значение с регулярным выражением. Регулярное выражение — это формализованная строка символов, определяющая шаблон. Например, [a-zA-Z0-9]+ — это шаблон, который соответствует строке любой длины, если строка содержит только строчные буквы ( a-z ), прописные буквы ( A-Z ) или цифры ( 0-9 ).

  • MATCH [A-ZA-Z0-9]+
    • HTMLCODETUTURIOL
    • MISSISSIPPI
    • .
      • https://html.com
      • Миссис Иппи
      • 1, 2, Пристегни мой ботинок!
      • (321) 867-4309

    Шаблоны примеров

    Шаблоны имен пользователей

     Только буквы (в любом случае), цифры и знак подчеркивания; не более 15 символов. [A-Za-z0-9_]{1,15} 

     Только строчные буквы и цифры; не менее 5 символов, но без ограничений. [a-zd.]{5,} 

     Только буквы (в любом случае), цифры, дефисы, символы подчеркивания и точки.  (Не символ косой черты, который используется для выхода из точки.) Имя пользователя должно начинаться с буквы и должно содержать от 1 до 20 символов (включительно). [a-zA-Z][a-zA-Z0-9-_.]{1,20} 

    Шаблоны платежной информации

     Формат цены в долларах США (1,00) d+(.d{2})? 

     Формат кредитной карты — только цифры, длина от 13 до 16 цифр. [0-9]{13,16} 

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

    Заметка о шаблоне

    и распространенных проблемах проверки

    Среди программистов есть старая пословица:

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

    Джейми Завински говорил об Perl в 1997 году, но это верно и в других контекстах. Самая распространенная проблема, с которой вы столкнетесь при использовании атрибута шаблона , — это плохо написанные (или плохо протестированные) регулярные выражения. Они немного жесткие и неочевидные. Так что самая большая проблема — это просто ошибки — регулярное выражение, которое на самом деле не проверяет то, что вы хотите проверить. Но это можно довольно легко исправить, задав вопрос на StackExchange. Более сложная проблема — тестирование неправильных вещей. В качестве примера рассмотрим шаблон кредитной карты, показанный выше. Если бы вы использовали это в поле фактического платежа, оно совпало бы с MasterCard и Visa, но не сработало бы с American Express. Вы хотите, чтобы ваш пользователь мог платить вам своей картой AmEx? такое бывает все время , особенно когда вы начинаете работать вне культур и национальных границ: каждая страна по-разному форматирует адреса, даты форматируются по-разному, номера телефонов и цены. Номера номерных знаков различаются в зависимости от штата в США и сильно различаются в зависимости от страны. Номера VIN разные для разных классов и типов автомобилей, а также для годов выпуска. Вы можете захотеть проверить стили имени пользователя в сторонней системе, но сторонняя система может измениться в будущем или могла быть изменена в прошлом. Вы должны очень внимательно относиться к тому, какие ограничения на ввод вы накладываете на поля формы. Это может быть образец слишком тупой инструмент для ваших нужд. Вам может понадобиться более мощный и точный инструмент проверки формы.

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

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

    Или даты

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

     ГГГГ-ММ-ДД, допускает только даты в 20-м и 21-м веках (?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]| 2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578 ]|1[02])-31)) 

    Но это может вызвать всевозможные проблемы. Людям нравится форматировать даты по-разному (ММ/ДД/ГГ, ДД НАЗВАНИЕ МЕСЯЦА ГГГГ и т.  д.), и они, вероятно, не будут читать ваши инструкции по правильному форматированию в первые несколько раз, когда попробуют. Кроме того, ничто не остановит недопустимые даты, такие как 31 февраля, или даты, находящиеся слишком далеко в будущем, такие как 2099-12-31 . Вдобавок ко всему, вы должны разобрать строку в пригодный для использования объект даты, как только вы получите ее на сервере. Вместо всего этого просто используйте дата ввод. Или дата-время .

    Или что-то еще, что вы могли бы сделать с чем-то еще

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

    Фронтальной проверки недостаточно

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

    Адам Вуд

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

    Browser Support for pattern

    10	43	45	12	9	34

    input(type-number) _элемент (html) | Поддержка специальных возможностей

    Уровень поддержки чтения с экрана: частичный (51/56)

    Уровень поддержки голосового управления: частичный (12/15)

    На этой странице

    Об этой функции

    Возраст результатов

    Результаты всех тестов этой функции варьируются от года до 3 лет назад. Подробные даты и информацию о версии можно найти в соответствующих тестах.

    Осторожно

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

    Ожидания

    Что такое ожидания?

    Screen Reader support by expectation

    Expectation	JAWS			Narrator	NVDA			Orca	TalkBack	VoiceOver (iOS)	VoiceOver (macOS)
    	Chrome	Edge	Firefox	Edge	Chrome	Edge	Firefox	Firefox	Chrome	Safari	Safari
    MUST convey its name	supported	supported	supported	supported	supported	supported	partial	supported	supported	supported	supported
    ДОЛЖЕН передать свою роль0188 supported	supported	supported	supported	supported	supported
    MUST convey the current value	supported	supported	supported	supported	partial	partial	supported	supported	нет	поддерживается	поддерживается
    ДОЛЖЕН передавать изменения значения	поддерживается	supported	supported	supported	supported	supported	supported	supported	supported	supported	supported
    SHOULD provide shortcuts to jump to this role	supported	supported	поддерживается	поддерживается	поддерживается	поддерживается	поддерживается	поддерживается	поддерживается	supported	supported
    MAY allow incrementing and decrementing the value	supported	supported	supported	none	none	none	supported	supported	not applicable	not applicable	поддерживается
    ДОЛЖЕН передаваться при отклонении ввода	поддерживается	поддерживается	поддерживается	supported	supported	supported	supported	supported	supported	supported	supported

    Voice Control support by expectation

    Expectation	Dragon Naturally Речь	Голосовой доступ (Android)	Голосовое управление (iOS)	Голосовое управление (MacOS)	Распознавание речи Windows
    	Chrome	Chrome	Safari	Safari	Chrome
    MUST convey its name	supported	none	supported	supported	supported
    MUST convey its role	поддерживается	поддерживается	неприменимо	поддерживается	поддерживается
    МОЖЕТ разрешать увеличение и уменьшение значения	supported	not applicable	not applicable	not applicable	not applicable
    MUST allow data entry	supported	supported	supported	supported	none

    Expectation: convey его имя

    Обоснование:

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

    Сила этого ожидания для различных типов вспомогательных технологий:

    • Программы чтения с экрана: НЕОБХОДИМО
    • Голосовое управление: НЕОБХОДИМО

    Примечания:

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

    Примеры:

    • Программа чтения с экрана объявит имя (метку).
    • Программное обеспечение для голосового управления позволяет пользователю сказать что-то вроде «нажмите <имя>«, чтобы активировать управление.

    Screen Reader support for ‘MUST convey its name’

    Test	JAWS			Narrator	NVDA			Orca	TalkBack	VoiceOver (iOS)	VoiceOver (macOS)
    	Chrome	Edge	Firefox	Edge	Chrome	Edge	Firefox	Firefox	Chrome	Safari	Safari
    Basic html number input test	поддерживается	поддерживается	поддерживается	поддерживается	поддерживается	поддерживается	частично	поддерживается	supported	supported	supported

    Voice Control support for ‘MUST convey its name’

    Test	Dragon Naturally Speaking	Voice Access (Android)	Voice Управление (iOS)	Голосовое управление (MacOS)	Распознавание речи Windows
    	Chrome	Chrome	Safari	Safari	Chrome
    Basic html number input test	supported	none	supported	supported	supported

    Expectation: convey its role

    Rationale:

    A screen reader user needs to know как они могут взаимодействовать с элементом. Программное обеспечение голосового управления может использовать эту роль, чтобы помочь пользователям активировать элементы управления, не имеющие видимого имени.

    Сила этого ожидания для различных типов вспомогательных технологий:

    • Программы чтения с экрана: НЕОБХОДИМО
    • Голосовое управление: НЕОБХОДИМО

    Примеры:

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

    Программа чтения с экрана поддерживает фразу «ДОЛЖЕН передать свою роль»

    Test	JAWS			Narrator	NVDA			Orca	TalkBack	VoiceOver (iOS)	VoiceOver (macOS)
    	Chrome	Edge	Firefox	Edge	Chrome	Edge	Firefox	Firefox	Chrome	Safari	Safari
    Базовый тест ввода числа html	supported	supported	supported	supported	supported	supported	supported	supported	supported	supported	supported

    Voice Control support for ‘MUST convey its role’

    Тест	Dragon Naturally Talking	Голосовой доступ (Android)	Голосовое управление (iOS)	Voice Control (MacOS)	Windows Speech Recognition
    	Chrome	Chrome	Safari	Safari	Chrome
    Basic html number input test	supported	supported	not applicable	поддерживаемый	поддерживаемый

    Ожидание: передать текущее значение

    Обоснование:

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

    Прочность этого ожидания для различных типов вспомогательных технологий:

    • Сборы экрана: Должен
    • . Тест JAWS Экранный диктор NVDA Orca TalkBack VoiceOver (iOS) VoiceOver0187 Chrome Edge Firefox Edge Chrome Edge Firefox Firefox Chrome Safari Safari Basic html number input test supported supported поддерживается поддерживается частично частично поддерживается поддерживается нет поддерживается поддерживается

      Ожидание: передать изменения в значении

      Обоснование:

      Пользователь должен знать, что значение было успешно изменено.

      Сила этого ожидания для различных типов вспомогательных технологий:

      • Программы чтения с экрана: НЕОБХОДИМО
      • Голосовое управление: НЕТ

      Примеры:

      • Когда пользователь вводит текст, программа чтения с экрана сообщит ему об этом.
      9 Firefox

      Screen Reader support for ‘MUST convey changes in value’

      Test	JAWS			Narrator	NVDA			Orca	TalkBack	VoiceOver (iOS)	VoiceOver (macOS
      	Chrome	Edge	Firefox	Edge	Chrome	Edge	Firefox	2	2	2	2	2	Safari	Safari
      Basic html number input test	supported	supported	supported	supported	supported	supported	supported	supported	supported	supported	supported

      Ожидание: предоставьте ярлыки для перехода к этой роли

      Обоснование:

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

      Сила этого ожидания для различных типов вспомогательных технологий:

      • Программы чтения с экрана: СЛЕДУЕТ
      • Голосовое управление: НЕТ Тест JAWS Рассказчик NVDA ORCA Talkback5.0252 Chrome Edge Firefox Edge Chrome Edge Firefox Firefox Chrome Safari Safari Basic html number input test supported supported поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается

        Ожидание: разрешить увеличение и уменьшение значения

        Обоснование:

        пользователи могут захотеть увеличивать и уменьшать значение

        Экран

        : Читатели: МАЙ
      • Голосовое управление: МАЙ

      Примеры:

      • Программы чтения с экрана для настольных ПК могут позволить пользователям регулировать значение, нажимая стрелки вверх и вниз
      • Мобильные программы чтения с экрана могут позволять пользователям изменять значение, проводя пальцем вверх или вниз the value’ Test JAWS Narrator NVDA Orca TalkBack VoiceOver (iOS) VoiceOver (macOS) Chrome Edge Firefox Edge Chrome Edge Firefox Firefox Chrome Safari Safari Basic html number input test поддерживается поддерживается поддерживается нет нет нет поддерживается поддерживается неприменимо not applicable supported

        Voice Control support for ‘MAY allow incrementing and decrementing the value’

        Test	Dragon Naturally Speaking	Voice Access (Android)	Голосовое управление (iOS)	Голосовое управление (MacOS)	Распознавание речи Windows
        	Chrome	Chrome	Safari	Safari	Chrome
        Basic html number input test	supported	not applicable	not applicable	not applicable	not applicable

        Expectation: allow data entry

        Rationale:

        Пользователи должны иметь возможность вводить данные

        Сила этого ожидания для различных типов вспомогательных технологий:

        • Программы чтения с экрана: нет данных
        • Голосовое управление: НЕОБХОДИМО

        Примеры:

        • Программное обеспечение голосового управления может позволять кому-либо диктовать данные в поле, когда оно сфокусировано.
        • средства чтения с экрана могут подразумевать, что ввод был отклонен, не объявляя ничего, когда пользователь пытается ввести данные (обычно нажатие клавиши воспроизводится эхом).0200 Chrome Edge Firefox Edge Chrome Edge Firefox Firefox Chrome Safari Safari Basic html number input test supported supported поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается

          Проверка ввода | Инициатива веб-доступности (WAI)

          в учебнике по формам

          Обзор

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

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

          Проверка требуемого ввода

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

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

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

          Пример

          Имя (обязательно):

          Фрагмент кода

           Имя (обязательно): 
          
           

          Примечание

          Примечание: Атрибут aria-required информирует вспомогательные технологии о необходимых элементах управления, чтобы они были должным образом объявлены пользователям (в отличие от проверки ввода). Большинство современных веб-браузеров автоматически устанавливают его значение равным true , когда HTML5 обязательный атрибут присутствует. В этом примере он предоставляется избыточно для поддержки веб-браузеров, которые не передают обязательный атрибут вспомогательным технологиям.

          Проверка общего входа

          HTML5 также предоставляет типы ввода для других данных, в том числе электронная почта , URL , номер , диапазон , дата или время . Большинство современных веб-браузеров поддерживают эти функции и обрабатывают проверку ввода. Кроме того, проверка HTML5 помогает пользователям вводить данные, предоставляя специальные элементы управления, такие как средства выбора даты и настраиваемые экранные клавиатуры. Типы ввода HTML5 отображаются как простые text поля ввода в старых веб-браузерах, которые не поддерживают эти функции HTML5.

          В приведенном ниже примере показаны эти типы ввода HTML5 в действии. В зависимости от вашего веб-браузера поле ввода «Диапазон» будет отображаться в виде ползунка, чтобы упростить ввод данных пользователями. Точно так же поле ввода «Число» может отображаться с кнопками для постепенного увеличения или уменьшения числа. Ошибки ввода, такие как неправильный адрес электронной почты, будут отображаться в диалоговых окнах веб-браузера, как и в предыдущем примере.

          Пример

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

          Веб-сайт:

          Номер:

          Диапазон:

          Фрагмент кода

           
          
          Электронная почта: 
          
          
          <дел>
          Веб-сайт: