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

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

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

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

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

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

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

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

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

 <набор полей>
  Номер телефона
  
  
10-значный, только для США, например 999-999-9999
<набор полей> Потенциально конфиденциальная информация <дел>
<дел>
10-значный, только для США, например 999-999-9999
<набор полей> Потенциально конфиденциальная информация <дел>
<дел>