Pattern input type tel: — 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. Они позволяют писать более красивый код, делают за вас всю работу по валидации контента, а так же заставляют мобильные браузеры отображать сенсорную клавиатуру со специальными кнопками (вроде @ и . @]+\.[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 — Атрибут pattern

Описание

Указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы. Если присутствует атрибут pattern, то форма не будет отправляться, пока поле не будет заполнено правильно.

Синтаксис

<input type="email" pattern="выражение">
<input type="tel" pattern="выражение">
<input type="text" pattern="выражение">
<input type="search" pattern="выражение">
<input type="url" pattern="выражение">

Значения

Некоторые типовые регулярные выражения перечислены в табл. 1.

Табл. 1. Регулярные выражения
ВыражениеОписание
\d [0-9]Одна цифра от 0 до 9. [ 0-9]+$Любое число.
[0-9]{6}Почтовый индекс.
\d+(,\d{2})?Число в формате 1,34 (разделитель запятая).
\d+(\.\d{2})?Число в формате 2.10 (разделитель точка).
\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}IP-адрес
Пример
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут pattern</title>
 </head>
  <body>
   <form>
    <p>Введите телефон в формате 2-xxx-xxx, где вместо x
    должна быть цифра:</p>
    <p><input type="tel" pattern="2-[0-9]{3}-[0-9]{3}"></p>
    <p><input type="submit" value="Отправить"></p>
   </form>
  </body>
</html>

Браузеры: Настольные Мобильные    

?

Internet ExplorerChromeOperaSafariFirefox
1059. 64

AndroidFirefox MobileOpera MobileSafari Mobile
2.3410

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

html — проверка номера телефона HTML5 с шаблоном

Задавать вопрос

спросил

Изменено 1 год, 10 месяцев назад

Просмотрено 492k раз

Я использую проверку формы HTML5 для проверки телефонных номеров из Индии.

Телефонные номера из Индии состоят из 10 цифр и начинаются с 7, 8 или 9.

Например:

  1. 7878787878
  2. 9898989898
  3. 8678678878

Эти телефонные номера действительны, но

  1. 1212121212
  2. 3434545464
  3. 6545432322

недействительны.

Предложите шаблон, который может определять действительные телефонные номера в Индии.

Пока мой шаблон [0-9]{10} , но он не проверяет, является ли первая цифра 7, 8 или 9.

  • html
  • проверка

3

Как насчет

 
 

1

Как насчет этого? /(7|8|9)\d{9}/

Он начинается либо с поиска 7, либо 8, либо 9, а затем следуют 9 цифр.

7

9+91(7\d|8\d|9\d)\d{9}$/

Ваше исходное регулярное выражение не требует наличия «+» впереди.

Получите дополнительную информацию по ссылке ниже
w3schools.com/jsref/jsref_obj_regexp.asp

1

Попробуйте этот код:

 

Этот код будет вводиться только в следующем формате:

9238726384 (начиная с 9 или 8 или 7 и других 9 цифр с использованием любого числа)
8237373746
7383673874

Неправильный формат:
2937389471 (не с
777777 32777777889471 (не с
77777777777777777777777778889471 (
921543 (менее 10 цифр)

1

Этот код будет принимать все коды стран со знаком +

 
 

В некоторых странах допускается использование одного символа «0» вместо «+», а в других — использование двойного символа «0» вместо «+». Ни один из них не является стандартным.

1

Улучшение ответа @JamesPlayer:

С этого момента в Индии новая серия телефонных номеров начинается с 6 . Используйте этот 👇

 
 

Чтобы отобразить пользовательское сообщение об ошибке, используйте атрибут title . 9[789]\d{9,9}$

  • Минимум цифр 10
  • Максимальное количество цифр 10
  • номер начинается с 7,8,9

формы — Шаблон телефона для HTML

спросил

Изменено 2 года, 1 месяц назад

Просмотрено 436 раз

Итак, я попытался запустить следующий код, чтобы попрактиковаться в использовании HTML-форм и номера телефона.

часть дает проблемы. Когда я набираю любой номер телефона, который, по моему мнению, должен удовлетворять требованиям, он говорит: «Соответствуйте запрошенному формату». Я полагаю, что требования требуют десятизначного числа, каждое из которых может быть от 1 до 9. Я неправильно написал свои требования? Справка

 
<голова>
<название>
Формы в HTML5 :)


<тело>
Имя:

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

Дата создания:

Количество пройденных лет (от 1 до 100):

Рабочий номер телефона:

  • HTML
  • формы

4

вы написали '' вместо " в pattern="[0-9]{10}"

этот код работает:

  <голова> <название> Формы в HTML5 :)   <тело>Имя:

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

Дата создания:

Количество завершенных лет (от 1 до 100):

Рабочий номер телефона:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *