Можностей, предоставляемых веб-разработчикам
жүктеу/скачать
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
АТРИБУТ MULTIPLE
АТРИБУТ PATTERN
АТРИБУТ REQUIRED
Новый атрибут
required
можно использовать для
<br /> и большинства полей ввода <br />(кроме случаев, когда атрибут <br />type <br /> принимает значения <br />hidden <br />, <br />image <br /> или задает кнопоч- <br />ный тип, такой как <br />submit <br />). Браузер не разрешит пользователю отправить форму, если <br />обязательные поля будут пустыми, и вернет ошибку. <br />Также мы рекомендуем добавлять к таким полям ARIA-атрибут <br />aria-required <br />, который <br />будет полезен для вспомогательных технологий (ARIA подробно обсуждалась в главе 2). <br /><b><span id='АТРИБУТ_MULTIPLE'>АТРИБУТ MULTIPLE</span></b> <br />Тип <br /><input <br /> <br />type=file> <br /> не является новым в HTML5, но теперь благодаря атрибуту <br />multiple <br /> <br />пользователь может загружать несколько файлов. <br /><input type=file multiple> <br />В HTML 5 так было делать нельзя, поэтому разработчикам для достижения того же эффекта <br />приходилось прибегать к помощи Java-апплетов и Flash. <br /></div> <style type="text/css"> </style> <hr /><div id="page111-div" > <br />Формы<b> • 111</b> <br />Этот атрибут можно добавлять и к другим типам ввода данных: например, <br /><input <br /> <br />type=email <br /> <br />multiple> <br /> позволяет вводить несколько адресов электронной почты. <br /><b><span id='АТРИБУТ_PATTERN'>АТРИБУТ PATTERN</span></b> <br />Некоторые типы ввода данных, о которых говорилось выше, — <br />email <br />, <br />number <br />, <br />url <br /> и т. д. — <br />на самом деле являются «встроенными» регулярными выражениями, так как браузер про- <br />сто проверяет, что введенные данные выглядят так, как должны. <br />А что если вы хотите использовать другой шаблон? Атрибут <br />pattern <br /> позволяет вам самим <br />создавать регулярные выражения, которым должны соответствовать вводимые данные. <br />Так что если пользователь должен ввести одну цифру и три заглавных символа алфавита, <br />регулярное выражение будет содержать одно число [0–9] и три буквы [A–Z]{3}, каждая из <br />которых должна быть в верхнем регистре; тогда для элемента ввода будет использоваться <br />такой код. <br /><input pattern="[0-9][A-Z]{3}" name=part <br /> ¬ title="A part number is a digit followed by three <br /> ¬ uppercase letters."> <br />Можно, кстати, добавить <br />placeholder="1ABC" <br /> или другую короткую подсказку. <br />В спецификации говорится, что регулярные выражения атрибута <br />pattern <br /> строятся в со- <br />ответствии с синтаксисом регулярных выражений в JavaScript за исключением того, что <br />в них подразумевается наличие <br />^(:? <br /> в начале и <br />)$ <br /> в конце. <br />Так что если вы привыкли работать с регулярными выражениями, вы, скорее всего, уже <br />знаете, что нужно делать. Если нет, перед вами открывается интереснейший мир регуляр- <br />ных выражений. <br />В Интернете вы почти всегда сможете найти то регулярное выражение JavaScript, которое <br />вам нужно. Но с регулярными выражениями на самом деле довольно легко работать, если <br />смотреть на это проще. <br />Например, для поля ввода ZIP-кода в формате 99999 или 99999-9999 (считая, что 9 соот- <br />ветствует любой цифре) можно использовать такой код. <br /><input pattern="[0-9]{5}(\-[0-9]{4})?" title="A zip code in <br />¬ the format of 99999 or 99999-9999"> <br />Это регулярное выражение ищет последовательности из пяти цифр с необязательным <br />суффиксом — дефисом и еще одной последовательностью из четырех цифр. <br />Можно расширить наш шаблон так, чтобы он позволял вводить почтовые коды <br />Соединенного Королевства (используя упрощенный вариант). <br /><input required pattern="[0-9]{5}(\-[0-9]{4})?|[a-zA-Z] <br />¬ {1,2}\d{1,2}\s?\d[a-zA-Z]{1,2}" name=part title="A valid <br />¬ zip code or UK postcode"> <br />Теперь наше регулярное выражение стало гораздо более сложным и поэтому проверить его <br />в большой форме на веб-странице будет не очень просто. Но так как здесь используется <br />тот же синтаксис, что и в JavaScript, мы можем выполнить проверку в консоли браузера <br />(например, в Firebug или Opera Dragonfly), используя чистый JavaScript. Приведенный ниже <br />пример — тест, определяющий правильность проверки почтового кода Соединенного <br /></div> <style type="text/css"> </style> <hr /><div id="page112-div" > <br /><b>112 • </b>Глава 3 <br />Королевства; в нем используется JavaScript-метод <br />test <br />. Обратите внимание на то, что <br />я добавил <br />^(?: <br /> в начало и <br />)$ <br /> в конец тестов (об этом говорится в спецификации HTML5). <br />/^(:?[a-zA-Z]{1,2}\d{1,2}\s?\d[a-zA-Z]{1,2})$/.test <br />¬ (<b>"</b>bn14 8px") <br />> true <br />/^(:?[a-zA-Z]{1,2}\d{1,2}\s?\d[a-zA-Z]{1,2})$/.test <br />¬ (<b>"</b>bn149 8px") <br />> false <br />Эти результаты верны, поскольку «bn149» не соответствует стандарту почтовых кодов <br />(и, безусловно, недопустим с точки зрения нашего надуманного примера). Наконец, стоит <br />отметить, что атрибут <br />pattern <br /> восприимчив к регистру, и так как у нас нет возможности <br />переключить его в режим <i>невосприимчивости</i>, в этом примере нам приходится явно ука- <br />зывать символы в нижнем и верхнем регистре (отсюда и запись [a-zA-Z] ). <br /></input></input></input></input></input></input>
жүктеу/скачать
5,47 Mb.
Достарыңызбен бөлісу:
1
...
120
121
122
123
124
125
126
127
...
232
©emirsaba.org 2024
әкімшілігінің қараңыз
Басты бет
Lessons
Curriculum vitae
Documents
