Input type tel pattern: — HTML: HyperText Markup Language — Вебджем.рф | Создание и продвижение сайтов

Содержание

Полезные сниппеты на HTML5 / Хабр

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

Автозаполнение в текстовых полях

Используя HTML5-элемент datalist вы можете создать текстовое поле с автозаполнением. Очень удобно!

<input name="frameworks" list="frameworks" />
<datalist>
	<option value="MooTools">
	<option value="Moobile">
	<option value="Dojo Toolkit">
	<option value="jQuery">
	<option value="YUI">
</datalist>

Поля ввода email, url и tel

В HTML5 появилось множество новых типов для полей ввода, и среди них email, url и tel. Они позволяют писать более красивый код, делают за вас всю работу по валидации контента, а так же заставляют мобильные браузеры отображать сенсорную клавиатуру со специальными кнопками (вроде @ и .com) при заполнении этих полей.

<input type="url">
<input type="email">
<input type="tel">

Шаблоны на соответствие полей формы регулярному выражению

Раньше вам приходилось использовать JavaScript для валидации контента на фронтэнде.

@]+\.[a-zA-Z]{2,6}»> <input type=»password» pattern=»(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}» title=»Не менее восьми символов, содержащих хотя бы одну цифру и символы из верхнего и нижнего регистра»> <input type=»tel» pattern=»(\+?\d[- .]*){7,13}» title=»Международный, государственный или местный телефонный номер»>

Кастомное контекстное меню

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

<section contextmenu="mymenu"> 
<p>Да, можно кликнуть правой кнопкой прямо здесь.</p>
</section>
<menu type="context">
  <menuitem label="Пожалуйста, не воруйте наши изображения" icon="img/forbidden.png"></menuitem>
  <menu label="Социальные сети">
  <menuitem label="Поделиться на FaceBook">   </menuitem>
  </menu>
</menu>

Видео на HTML5, с резервным Flash-проигрывателем.

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

<video controls>
	<source src="__VIDEO__.MP4"  type="video/mp4">
	<source src="__VIDEO__.OGV"  type="video/ogg">
	<object type="application/x-shockwave-flash" data="__FLASH__.SWF">
		<param name="movie" value="__FLASH__.SWF">
		<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4">
		<img src="__VIDEO__.JPG" alt="__TITLE__"
		     title="Нет возможности воспроизведения видео в вашем браузере">
	</object>
</video>

Скрытые элементы в HTML5

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

Его действие аналогично CSS-свойству display:none.

<p hidden>Вы не увидите этот текст</p>

Автофокус для текстовых полей

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

<input autofocus="autofocus">

Предварительная загрузка в HTML5

Jean-Baptiste Jung написал подробную статью о предварительной загрузке в HTML5. Если в кратце — то это простой способ уведомить браузер о том, какие ресурсы скоро могут понадобиться, чтобы он загрузил их заранее (например картинки, подгружаемые аяксом). В приведенном ниже коде реализуется предварительная загрузка изображения.

<link rel="prefetch" href="http://www.catswhocode.com/wp-content/uploads/my_image.png">

Воспроизведение аудиофайлов на HTML5

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

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

<audio src="sound.mp3"></audio>
<div>
	<button>Play</button>
	<button>Pause</button>
	<button>Volume Up</button>
	<button>Volume Down</button>
</div>

html input

Поле ввода информации

autocomplete

Автозавершение

<input type="text" autocomplete="off" />

disabled

Отключает элемент формы

Данные элемента не уйдут с запросом

<input type="time" disabled />

form

Идентификатор формы, на которую ссылается элемент

<form></form>
<input type="text" form="form1" />

maxlength

Максимальная длина значения элемента

Применяется для text, password, url, search, telephone, email

min, max

Диапазон допустимых значений для дат, number и range.

<input type="time" min="17:00" max="22:00" />

pattern

Регулярка для валидации

<input
    type="color"
    pattern="#[0-9A-Fa-f]{6}"
    placeholder="#ffffff"
    title="color" />
<input
    type="text"
    pattern="[0-9]{13,16}"
    title="13 или 16 цифр кредитки"
    placeholder="номер карты" />

placeholder

Подсказка

<input type="time" placeholder="подсказка" />

readonly

Элемент доступен только для чтения

<input type="text" value="Not Editable" readonly />

required

Помечает поле как обязательное

Не используется для buttons, range, color, hidden

<input type="email" required />

step

Шаг для полей дат, number, range

<input type="number" step="5" />

type

Тип поля

button — кнопка, ничего не делает, используется для навешивания различных обработчиков
```
<input type="button" value="кнопка" />
```

checkbox — флажок

<input type="checkbox" name="remember" value="true" />

colour — поле выбора цвета

<input
    name="clr"
    type="color"
    placeholder="#0 00000"
    pattern="#[0-9A-Fa-f]{6}"
    required />

date — поле ввода даты

<input
    name="date"
    type="date"
    placeholder="YYYY-MM-DD"
    min="1900-01-01"
    required />

datetime — поле ввода даты со временем в системе utc

<input
    name="datetime"
    type="datetime"
    placeholder="YYYY-MM-DD"
    min="2010-01-01T00:00Z"
    max="2011-12-31T23:59Z"
    required />

datetime-local — поле ввода даты со временем
email — поле ввода электронной почты
Доступные атрибуты
```
<input type="email" name="email" />
```

file — поле для закачки файла

Доступные атрибуты:

<input type="file" name="image" accept="image/*" capture />
<input type="file" name="video" accept="video/*" capture />
<input type="file" name="audio" accept="audio/*" capture />

hidden — скрытое поле

<input type="hidden" name="user_id" value="1" />

image —

month — поле ввода месяца с годом

<input
    name="month"
    type="month"
    placeholder="YYYY-MM"
    min="2010-01"
    max="2020-01"
    step="6"
    required />

number — поле ввода числовых данных
```
<input type="number" min="0" step="5">
<input
    type="number" p
    laceholder="100 to 999"
    pattern="[1-9][0-9]{2}"
    min="100"
    max="999"
    required />
```

password — пароль

<input type="password" name="password" />

radio — переключатель

<input type="radio" name="color" value="red" />
<input type="radio" name="color" value="green" />

range — ползунок

reset — кнопка сброса

<input type="reset" value="Очистить эту форму" />

search — поле поиска

submit — кнопка отправки

<input type="submit" value="Отправить эту форму" />

tel — используется для ввода телефонного номера.
(http|https|ftp)\://[a-zA-Z0-9\-\.]+\.[a-zA-Z]*» placeholder=»http://www.domain.com» required />

week — поле ввода номера недели

<input
    type="week"
    name="week"
    min="2010-W01"
    max="2020-W02"
    required />

value

Значение поля

examples

<!-- использование с выпадающим списком -->
<input list="data-list-id" />
<datalist>
    <option value="1 элемент выпадающего списка" />
    <option value="2 элемент выпадающего списка" />
    <option value="3 элемент выпадающего списка" />
</datalist>

input type=tel – поле ввода телефонного номера (NEW)

ⓘ input type=tel – поле ввода телефонного номера NEW # T

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

Допустимое содержимое #

пустой (пустой элемент)

Разрешенные атрибуты #

глобальные атрибуты & имя & неполноценный & форма & тип★ и автозаполнение и автофокус & список & максимальная длина & шаблон и только для чтения & необходимый & размер & заполнитель & значение

ⓘ глобальные атрибуты: Любые атрибуты, разрешенные глобально.
ⓘ имя = строка #: Часть имени пары имя/значение, связанная с этим элемент для отправки формы.
ⓘ отключен = «неполноценный» или «» (пустая строка) или пустая #: Указывает, что элемент представляет отключенный контроль.
ⓘ форма = Идентификационная ссылка НОВЫЙ #: Значение идентификатор атрибут на форма с которым связать элемент.
ⓘ тип = «тел» #: Указывает, что его вход элемент однострочный текстовый элемент управления для ввода номер телефона.
ⓘ автозаполнение = «включено» или «выключено» НОВЫЙ #: Указывает, представляет ли элемент ввод элемент управления, для которого UA предназначен для хранения введенного значения пользователем (чтобы UA мог предварительно заполнить форму позже).
ⓘ автофокус = «автофокус» или «» (пустая строка) или пустая НОВЫЙ #: Указывает, что элемент представляет элемент управления, к которому UA предназначен для того, чтобы сосредоточить внимание, как только документ загружен.
ⓘ список = Идентификационная ссылка НОВЫЙ #: Значение идентификатор атрибут на список данных с которым связать элемент.
ⓘ максимальная длина = положительное число #: Максимально допустимая длина значения элемента.
ⓘ шаблон = шаблон НОВЫЙ #: Указывает регулярное выражение, по которому UA предназначен для проверки значения элемента управления, представленного его элемент.; Регулярное выражение, которое должен соответствовать JavaScript Узор производства, как указано в [ECMA 262].
ⓘ только для чтения = «только для чтения» или «» (пустая строка) или пустая #: Указывает, что элемент представляет элемент управления, значение которого не предназначен для редактирования.
ⓘ требуется = «необходимый» или «» (пустая строка) или пустая НОВЫЙ #: Указывает, что элемент является обязательной частью формы подчинение.
ⓘ размер = положительное число #: Количество опций, предназначенных для отображения элементом управления представлена его элементом.
tel.attrs.placeholder»> ⓘ заполнитель = строка NEW #: Краткая подсказка (одно слово или короткая фраза), предназначенная для помочь пользователю при вводе данных в элемент управления представлена его элементом.
ⓘ значение = строка #: Указывает значение для этого вход элемент.

Дополнительные ограничения и предупреждения #

Ввод интерактивного элемента не должен появляются как потомки элемента a.
Ввод интерактивного элемента не должен отображаться как потомок элемента кнопки.
Любой элемент ввода, потомок элемента метки с атрибутом for должен иметь Значение идентификатора, которое соответствует этому атрибуту.
Атрибут списка элемента ввода должен ссылаться на элемент списка данных.
Ввод элемента с типом атрибута чье значение «кнопка» должно иметь непустое значение атрибута.
Атрибут usemap в элементе ввода устарел. Используйте элемент img вместо элемента ввода для карт изображений.
Атрибут align элемента ввода устарел. Вместо этого используйте CSS.

Отсутствие тега #

вход элемент является пустым элементом. Вход элемент должен иметь начальный тег но не должен иметь конечный тег.

Разрешенные родительские элементы #

любой элемент, который может содержать элементы фразировки

Номер телефона | Система веб-дизайна США (USWDS)

Шаблоны: создание профиля пользователя

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

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

Об этом шаблоне

Какую проблему он решает?

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

Когда использовать этот шаблон

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

Какое решение?

Помогите пользователям вводить свои телефонные номера в согласованном, правильном и удобном формате. Используйте метку формы и текст подсказки, чтобы показать пользователям ожидаемый формат, а также если вам конкретно нужен номер мобильного телефона в США или с поддержкой SMS. По возможности используйте маскирование ввода и проверку как на стороне клиента, так и на стороне сервера, чтобы убедиться, что введенный ими номер телефона может быть успешно использован для связи с ними в случае необходимости.

Руководство

Что делать

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

Чего не делать

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

Номер телефона Основной номер телефона

10-значный, только для США, например 999-999-9999

Потенциально конфиденциальная информация

Да, вы можете оставить конфиденциальную информацию в голосовой почте или текстовом сообщении

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

Дополнительный номер телефона