Формат телефонного номера html

Как использовать ссылки mailto: и tel:

Ссылки tel: нужны, чтобы сделать кликабельным номер телефона на сайте, а через mailto: можно отправить целое письмо, в котором сразу будут заполнены и адрес, и тема, и даже какой-нибудь текст. Иногда это удобно — пользователю не нужно набирать номер телефона вручную, а письмо в службу поддержки можно начать сразу с конкретной темы.

Такие форматы ссылок поддерживаются всеми браузерами, так что вы можете по необходимости использовать их в своих проектах не переживая, что где-то они не сработают.

mailto:

Ссылка формируется из нескольких частей. Сначала в адресе ставится префикс mailto: , после которого указывается адрес почты. Это самый простой вариант.

Текст письма указывается с помощью параметра body .

За тему письма отвечает параметр subject .

Можно даже указать кого-то в копии, для этого используются параметры cc и bcc .

Что произойдёт, если кликнуть на ссылку с mailto

Откроется почтовая программа, в которой уже будут заполнены все нужные поля. Например, так ссылку выше обработает программа «Почта» в OS X:

Если почтовая программа по умолчанию не установлена, появится окно выбора программы.

Обратите внимание, что адреса с нестандартными символами, например, кавычками или дополнительными знаками @, нужно записывать особым образом. Подробнее об этом и других сложных случаях читайте в RFC 6068.

Как стилизовать mailto

Для стилизации ссылки на электронную почту можно воспользоваться CSS-селектором a[href^=»mailto:»] .

tel:

Ссылка на номер телефона размечается с помощью специального префикса перед номером телефона — tel: .

Хорошим тоном считается указание в href кода страны. При этом в тексте ссылки номер может быть указан в любом удобном формате. Например, добавляем городской номер на сайте фирмы из Санкт-Петербурга:

В href указан номер с кодом страны и города, в тексте ссылки есть код города 812, по которому понятно, что речь о Питере.

В этом случае жители всех городов смогут дозвониться до компании, а короткий номер будет понятен и местным. Случай перейдёт в категорию «плохо», если по сайту непонятно, из какого города компания.

Телефоны с питерскими сим-картами дозвонятся по этому городскому номеру, но жители других городов попадут куда-то ещё.

Другое обязательное требование RFC 3966 — номер телефона, указанный в href , должен быть явно виден на странице.

Номер видно в тексте ссылки.

Номер не видно в тексте ссылки, непредсказуемое поведение.

Что произойдёт, если кликнуть на ссылку с tel

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

• Android, iOS — откроется звонилка по умолчанию.
• Chrome, Edge, Firefox на Windows — откроется предложение использовать какую-нибудь программу для звонка.
• Safari — если номера нет в списке контактов, то появится подтверждение вызова, после этого откроется FaceTime.

Например, Chrome на OS X предложить открыть FaceTime для звонка, так как эта программа установлена по умолчанию. Вместо неё легко может быть Skype или любая другая звонилка.

Windows на ноутбуке предложит выбрать, с помощью какой программы открывать ссылки tel:

Как стилизовать

С помощью CSS-селектора a[href^=»tel:»] .

А так можно добавить иконку телефона из Unicode, которая есть во всех системах:

Получится такой результат:

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

Ещё о вёрстке

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

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

В последнее время нельзя пренебрегать кликабельными номерами телефонов т.к. количество клиентов, использующих мобильные телефоны превысило десктопы. И чтобы не потерять своего клиента, необходимо предоставить посетителю возможность беспрепятственно позвонить.

Оформление ссылки tel

По умолчанию на мобильных телефонах номера телефона распознается автоматически и преобразуются в ссылки.

До:

После:

Чтобы задать нормальные стили на мобильных, нужно писать два правила.

Отключить распознавание телефонов

Автоматическое распознавание телефонов работает не всегда корректно и срабатывает на большие цены. Его можно отключить, добавив метатег в страницы и прописать ссылки у телефонов вручную.

Оборачивание телефонов ссылками

Замечена одна особенность – на андроид устройствах не всегда срабатывает клик по ссылке если в атрибуте href форматированный номер телефона.

Обвернуть телефон регулярным выражением

Если телефонов много, то лучше автоматизировать замену с помощью регулярного выражения.

function replace_phone_call($matches) < $tel = str_replace(array('-', ' ', '(' , ')'), '', $matches[0]); $tel = str_replace('+7', '8', $tel); return '' . $matches[0] . ''; > function replace_phone($text) < return preg_replace_callback('/(?:\+|\d)[\d\-\(\) ]\d/', 'replace_phone_call', $text); > $text = 'Позвоните по телефону +7 (495) 123-45-67, или 88001234567'; echo replace_phone($text);

Результат:

Также можно добавить проверку мобильных с помощью mobiledetect и на десктопе ссылки не выводить.

require_once 'Mobile_Detect.php'; $detect = new Mobile_Detect; define('IS_MOBILE', $detect->isMobile() && !$detect->isTablet()); function replace_phone_call($matches) < $tel = str_replace(array('-', ' ', '(' , ')'), '', $matches[0]); $tel = str_replace('+7', '8', $tel); return '' . $matches[0] . ''; > function replace_phone($text) < if (IS_MOBILE) < return preg_replace_callback('/(?:\+|\d)[\d\-\(\) ]\d/', 'replace_phone_call', $text); > else < return $text; >> $text = 'Позвоните по телефону +7 (495) 123-45-67, или 88001234567'; echo replace_phone($text);

Или сделать на мобильных ссылку с номером телефона, а на десктопе ссылку на форму обратного звонка.

require_once 'Mobile_Detect.php'; $detect = new Mobile_Detect; define('IS_MOBILE', $detect->isMobile() && !$detect->isTablet()); function replace_phone_call($matches) < if (IS_MOBILE) < $tel = str_replace(array('-', ' ', '(' , ')'), '', $matches[0]); $tel = str_replace('+7', '8', $tel); return '' . $matches[0] . ''; > else < return '' . $matches[0] . ''; > > function replace_phone($text) < return preg_replace_callback('/(?:\+|\d)[\d\-\(\) ]\d/', 'replace_phone_call', $text); > $text = 'Позвоните по телефону +7 (495) 123-45-67, или 88001234567'; echo replace_phone($text);

Результат на десктопе и планшетах:

На мобильных:

Источник

Значение tel

Тип tel (от англ. » tel ephone» ‒ «телефон») создаёт поле ввода телефонного номера.

Внешний вид

• ‒ телефонное поле;
• ‒ наведение курсора;
• ‒ фокус.

Примечание

HTML спецификация не устанавливает определённый синтаксис телефонного номера для данного поля (в отличие от « url » и « email » полей). Это сделано намеренно, так как на практике, поля телефонных номеров, как правило, имеют свободную форму, потому что существует большое разнообразие допустимых телефонных номеров. (Установить необходимый синтаксис телефонного номера можно с помощью атрибута « pattern ».)

Поддержка браузерами

Спецификация

Верс.	Раздел
HTML
2.0	Input Field: INPUT
3.2	INPUT text fields, radio buttons, check boxes, .
4.01	17.4.1 Control types created with INPUT
5.0	4.10.5.1.3 Telephone state (type=tel)
5.1	4.10.5.1.3. Telephone state (type=tel)
XHTML
1.0	Extensible HyperText Markup Language
1.1	Extensible HyperText Markup Language

Сопутствующие атрибуты

autocomplete Автозаполнение значения поля телефона. autofocus Автоматческая фокусировка на телефонном поле после полной загрузки страницы. disabled Блокировка поля телефона.

disabled=»disabled»

form Присоединение телефонного поле к форме. list Создание списка рекомендованных вариантов телефонных номеров.

maxlength Задаёт максимально-допустимое количество вводимых символов. minlength Задаёт минимально-допустимое количество вводимых символов. name Присваивает имя телефонному полю. pattern Устанавливает критерий/шаблон ввода. placeholder Указывает текст-подсказку для пустого поля.

placeholder=»Текст-подсказка»

readonly Указывает, что поле телефона доступно только для чтения (изменение/редактирование запрещено). required Указывает, что поле телефона обязательно для заполнения. size Задаёт ширину телефонного поля по количеству вводимых символов.

size=»10″

value Указывает значение телефонного поля (отправляется на сервер или используется скриптами).

Примечание: Данный атрибут должен иметь значение, которое не содержит символов «LF» ПЕРЕВОД СТРОКИ [ U+000A ] или «CR» ВОЗВРАТ КАРЕТКИ [ U+000D ].

value=»+7 (900) 123-45-67″

Источник

Как правильно ввести в html5 pattern телефонного номера?

Сегодня у меня заметка совсем под узкий круг читателей. А именно, я расскажу, как правильно записать в html5 pattern телефонного номера.

Что такое pattern вообще? Это своего рода формула, которой вы задаете, как именно пользователь должен заполнить поле. Если он заполняет не так, как указано вами в паттерне, форма не отправится и человеку придется исправить ошибку.

Наверняка вы знаете, что в html5 появилось поле для ввода телефона, но его минус в том, что нет встроенной валидации и туда на самом деле можно вписать все, что душе угодно, в том числе и буквы.

Чтобы исправить это, как раз придется использовать атрибут pattern . Давайте посмотрим, как его прописывать на примере российского номера:

В формате: 7-ххх-ххх-хххх-2-3">

Больше всего здесь нас должен интересовать этот атрибут. Во-первых, давайте сразу проверим его работу. О placeholder я написал в этой статье.

Теперь видно, что форма не отправляется, если поле заполнено не по требуемому формату. Для удобства пользователей подскажите им этот самый формат. При таком значении формат соблюден и форма успешно отправится:

Ну а теперь подробнее о значении pattern = «7-9-9-9» . Семерка вначале означает, что первой цифрой обязательно должна быть 7 и ничто другое. Далее нужно поставить дефис и ввести три цифры от 0 до 9, опять поставить дефис и ввести еще 3 цифры, после чего вновь дефис и последние 4 цифры.

Кстати, в этом варианте если заполнить все без дефисов, то форма посчитает, что вы ввели значение, не соответствующее формату, поэтому их, если что, можете удалить из значения. В таком случае pattern можно существенно сократить:
pattern = «79»

Это если совсем без дефисов. В общем, суть, я думаю, вы поняли, и теперь можете составить свою формулу и для проверки правильности ввода любых других телефонных номеров.

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший — HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей — 4.8 из 5. Пусть вашим сайтам будет хорошо.

Еще материалы по HTML

Источник