Можностей, предоставляемых веб-разработчикам

жүктеу/скачать 5,47 Mb.

Pdf көрінісі

бет	124/232
Дата	06.01.2022
өлшемі	5,47 Mb.
	#12231

1 ... 120 121 122 123 124 125 126 127 ... 232

Байланысты:
[Bryus Louson, Remi SHarp] Izuchaem HTML5. Bibliot(z-lib.org)

АТРИБУТ REQUIRED
Новый атрибут
required
можно использовать для

и большинства полей ввода 
 (кроме случаев, когда атрибут 
 type
  принимает значения 
 hidden
 , 
 image
  или задает кнопоч-
 ный тип, такой как 
 submit
 ). Браузер не разрешит пользователю отправить форму, если 
 обязательные поля будут пустыми, и вернет ошибку.
 Также мы рекомендуем добавлять к таким полям ARIA-атрибут 
 aria-required
 , который 
 будет полезен для вспомогательных технологий (ARIA подробно обсуждалась в главе 2).
 АТРИБУТ MULTIPLE
 Тип 
 <input
  
 type=file>
  не является новым в HTML5, но теперь благодаря атрибуту 
 multiple
  
 пользователь может загружать несколько файлов.
 <input type=file multiple>
 В HTML 5 так было делать нельзя, поэтому разработчикам для достижения того же эффекта 
 приходилось прибегать к помощи Java-апплетов и Flash.
 </div> <style type="text/css"> </style> <hr /><div id="page111-div" > 
 Формы  •  111
 Этот атрибут можно добавлять и к другим типам ввода данных: например, 
 <input
  
 type=email
  
 multiple>
  позволяет вводить несколько адресов электронной почты.
 АТРИБУТ PATTERN
 Некоторые типы ввода данных, о которых говорилось выше, — 
 email
 , 
 number
 , 
 url
  и т. д. — 
 на самом деле являются «встроенными» регулярными выражениями, так как браузер про-
 сто проверяет, что введенные данные выглядят так, как должны.
 А что если вы хотите использовать другой шаблон? Атрибут 
 pattern
  позволяет вам самим 
 создавать регулярные выражения, которым должны соответствовать вводимые данные. 
 Так что если пользователь должен ввести одну цифру и три заглавных символа алфавита, 
 регулярное выражение будет содержать одно число [0–9] и три буквы [A–Z]{3}, каждая из 
 которых должна быть в верхнем регистре; тогда для элемента ввода будет использоваться 
 такой код.
 <input pattern="[0-9][A-Z]{3}" name=part
     ¬ title="A part number is a digit followed by three
     ¬ uppercase letters."> 
 Можно, кстати, добавить 
 placeholder="1ABC"
  или другую короткую подсказку.
 В <a href="/teksta-eto-to-o-kom-ili-o-chem-govoritsya-v-tekste.html">спецификации говорится</a>, что регулярные выражения атрибута 
 pattern
  строятся в со-
 ответствии с синтаксисом регулярных выражений в JavaScript за исключением того, что 
 в них подразумевается наличие 
 ^(:?
  в начале и 
 )$
  в конце.
 Так что если вы привыкли работать с регулярными выражениями, вы, скорее всего, уже 
 знаете, что нужно делать. Если нет, перед вами открывается интереснейший мир регуляр-
 ных выражений.
 В <a href="/obshaetese-s-lyudemi.html">Интернете вы почти всегда сможете</a> найти то регулярное выражение JavaScript, которое 
 вам нужно. Но с регулярными выражениями на самом деле довольно легко работать, если 
 смотреть на это проще.
 Например, для поля ввода ZIP-кода в формате 99999 или 99999-9999 (считая, что 9 соот-
 ветствует любой цифре) можно использовать такой код.
 <input pattern="[0-9]{5}(\-[0-9]{4})?" title="A zip code in
 ¬ the format of 99999 or 99999-9999">
 Это <a href="/metodi-razlojeniya-na-mnojiteli.html">регулярное выражение ищет</a> последовательности из пяти цифр с необязательным 
 суффиксом — дефисом и еще одной последовательностью из <a href="/konkurs-prezentacij-i-sajtov.html">четырех цифр</a>.
 Можно расширить наш шаблон так, чтобы он позволял вводить почтовые коды 
 Соединенного Королевства (используя упрощенный вариант).
 <input required pattern="[0-9]{5}(\-[0-9]{4})?|[a-zA-Z]
 ¬ {1,2}\d{1,2}\s?\d[a-zA-Z]{1,2}" name=part title="A valid
 ¬ zip code or UK postcode">
 Теперь наше регулярное выражение стало гораздо более сложным и поэтому проверить его 
 в большой форме на веб-странице будет не очень просто. Но так как здесь используется 
 тот же синтаксис, что и в JavaScript, мы можем выполнить проверку в <a href="/kak-uznate-kakaya-u-menya-versiya-brauzera.html">консоли браузера 
</a> (например, в Firebug или Opera Dragonfly), используя чистый JavaScript. Приведенный ниже 
 пример — тест, определяющий правильность проверки почтового кода Соединенного 
 </div> <style type="text/css"> </style> <hr /><div id="page112-div" > 
 112  •  Глава 3
 Королевства; в нем используется JavaScript-метод 
 test
 . Обратите внимание на то, что 
 я добавил 
 ^(?:
  в начало и 
 )$
  в конец тестов (об этом говорится в спецификации HTML5).
 /^(:?[a-zA-Z]{1,2}\d{1,2}\s?\d[a-zA-Z]{1,2})$/.test
 ¬ ("bn14 8px")
 > true
 /^(:?[a-zA-Z]{1,2}\d{1,2}\s?\d[a-zA-Z]{1,2})$/.test
 ¬ ("bn149 8px")
 > false
 Эти результаты верны, поскольку «bn149» не соответствует стандарту почтовых кодов 
 (и, безусловно, недопустим с <a href="/kapital-i-ego-formi.html">точки зрения нашего надуманного</a> примера). Наконец, стоит 
 отметить, что атрибут 
 pattern
  восприимчив к регистру, и так как у нас нет возможности 
 переключить его в режим невосприимчивости, в этом примере нам приходится явно ука-
 зывать символы в <a href="/promejutochnoe-zadanie-2-chaste-1.html">нижнем и верхнем регистре</a> (отсюда и запись [a-zA-Z] ).
 </input></input></input></input></input></input>

жүктеу/скачать 5,47 Mb.

Достарыңызбен бөлісу:

1 ... 120 121 122 123 124 125 126 127 ... 232