Тег для телефона html5 – Как сделать номер телефона ссылкой сразу на звонок, при открытии сайта с мобильного устройства? — Вебджем.рф

Содержание

Полезные сниппеты на HTML5 / Habr

Эта подборка полезных сниппетов, использующих 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 для валидации контента на фронтэнде. Теперь, с HTML5-атрибутом pattern, вы можете просто указать регулярное выражение, которому должны соответствовать вводимые данные!

<input type="email" pattern="[^@]+@[^@]+\.[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>

10 полезных тегов и атрибутов HTML5, которые вы должны знать! | XoZblog

Здравствуйте, уважаемые читатели XoZbloga! HTML5 в настоящее время уже достаточно активно используется при разработке веб интерфейсов и приложений. Мы все знаем, что HTML5 привнес много новых тегов, атрибутов и элементов. Некоторые из них действительно полезны для наших сайтов. Таким образом, в этой статье, я кратко расскажу о нескольких полезных и важных HTML5 тегах и атрибутах, которые вы должны знать и использовать на практике!

Структурная разметка HTML5

В HTML5 появилось несколько новых тегов, которые призваны заменить уже прижившиеся блоки div (не все конечно 🙂 ). Внешне, так сказать, ничего не изменилось, но в сущности новые теги несут в себе смысловую (семантическую) нагрузку, и строго определяют для каждого блока его место и роль:

<header> </header> — Определяет область «шапки» сайта с логотипом, первичной навигацией и тд.;
<footer> </footer> — Определяет «подвал», колонтитул веб страницы сайта или раздела, в котом обычно размещается дополнительная информация;
<section> </section> — Определяет блок, который служит для группировки однотипных объектов, или для разделения текста на разделы;
<article> </article> — Определяет автономную часть страницы, это может быть сообщение форума, журнала или газетную статью, запись в блоге и тд.;

<nav> </nav> — Определяет область навигации, как правило список ссылок;

Форма

Новые типы input полей

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

1
2
3
4
5
6
7
8
9
10
11
12
13

Регулярные выражения для валидации

До появления HTML5, при использовании формы на вашем сайте, вы должны были пропускать введенный текст через JavaScript для проверки. Теперь с HTML5 и атрибутом pattern, вы можете определить шаблон регулярного выражения для проверки данных.

1
2
3
4
5
6

<!— для проверки адресов электронной почты —>
<input type=»text» title=»электронный адрес» required pattern=»[^@]+@[^@]+\.[a-zA-Z]{2,6}» />
<!— для паролей —>
<input type=»text» title=»по крайней мере восемь символов, содержащих хотя бы одну цифру, один символ нижнего и верхнего регистра» required pattern=»(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}» />
<!— для проверки телефонного номера —>
<input type=»text» required pattern=»(\+?\d[- .]*){7,13}» title=»интернациональный, национальный или местный номер телефона»/>

Автозаполнение с HTML5 datalist

Использование dataList элемента HTML5, позволяет создавать список данных для автозаполнения полей ввода. Супер полезно!

1
2
3
4
5
6
7
8
9

input name=»frameworks» list=»frameworks» />

Автофокус полей формы

Атрибут autofocus позволит вам установить фокус на любой элемент формы (в том числе кнопку).

1	<input type=»text» autofocus=»autofocus» />

Замещающий текст поля

Это тот самый (серенький) текст который находится к примеру в поле поиска и призывает ввести искомое слово и нажать Enter. В HTML5 замещающий текст реализуется вот-так:

1	<input type=»search» placeholder=»Поиск на сайте» />

Скрытые элементы с помощью HTML5

В HTML5 введен атрибут hidden, который позволяет скрыть определенный элемент, на подобии того как это применяется в CSS с использованием dispaly: none

1	<p hidden>Здесь находится текст, который скрыт с помощью HTML5!</p>

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

С помощью этого механизма можно заранее кэшировать указанный ресурс (картинку, страницу или файл), например сразу подгрузить стили которые будут использованы на сайте:

1	<link rel=»prefetch» href=»style_dark.css»>

HTML5 <details> и <summary> теги

C помощью этих тегов пользователь может манипулировать отображением (раскрывать и скрывать снова), какой либо дополнительной информации.

1
2
3
4
5
6
7
8

<details>
<summary>Заголовок 1</summary>
<p>Pellentesque habitant morbi tristique senectus et netus ….</p>
</details>
<details>
<summary>Заголовок 2</summary>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada …</p>
</details>

Создаем аккордеон для сайта — https://xozblog.ru/2012/06/accordions/

Атрибут download

В HTML5 появился новый атрибут для ссылок. Теперь чтобы указать браузеру, что ссылку надо загружать, а не открывать достаточно использовать данный атрибут.

1 2	<!— имя в диалоге будет muzika.mp3—> <a href=»sound.mp3″ download=»muzika»>Скачать песню</a>

Чтобы оставаться в курсе свежих статей и уроков следите за XoZblog в Facebook или добавляйте в круги на Google+. Не забывайте оставлять комментарии к статьям и урокам. Спасибо!

Номер телефона | WebReference

Чтобы ввести телефонный номер в форме используйте для этого специальное поле, по своему виду и работе оно совпадает с текстовым полем. Синтаксис создания поля для телефона следующий.

<input type="tel" атрибуты>

Атрибуты полностью совпадают с текстовым полем.

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

Создание поля для телефона показано в примере 1. Требуется ввести телефон в указанном формате, иначе браузер выведет сообщение об ошибке и не станет отправлять форму, пока поле не будет заполнено корректно.

Пример 1. Поле для телефона

<!DOCTYPE html>
 <html>
  <head>
  <meta charset="utf-8">
  <title>Телефон</title>
 </head>
 <body>
  <form>
   <p>Ваше имя: <input name="login"></p>
   <p>Телефон в формате 2xxx-xxx: <input type="tel" name="tel" 
   pattern="2[0-9]{3}-[0-9]{3}"></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Результат примера при вводе неправильного телефона показан на рис. 1.

Рис. 1. Ввод телефона

Для обычного текстового поля клавиатура планшета имеет стандартный вид (рис. 2).

Рис. 2. Вид клавиатуры для ввода текста

Однако при вводе телефона клавиатура меняет свой вид (рис. 3). Система сама определяет, что пользователь вводит номер и подстраивается под него.

Рис. 3. Вид клавиатуры для ввода телефона

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 14.03.2015

Редакторы: Влад Мержевич

Элементы для ввода цвета, url, email, телефона
Элементы для ввода цвета, url, email, телефона
Последнее обновление: 08.04.2016
Установка цвета
За установку цвета в HTML5 отвечает специальный элемент input с типом color:
<label for="favcolor">Выберите цвет</label> <input type="color" name="favcolor" />
Элемент отображает выбранный цвет. А при нажатии на него появляется специальное диалоговое окно для установки цвета:
Значением этого элемента будет числовой шестнадцатеричный код выбранного цвета.
С помощью элемента datalist мы можем задать набор цветов, из который пользователь может выбрать нужный:
<label for="favcolor">Выберите цвет</label> <input type="color" list="colors" name="favcolor" /> <datalist> <option value="#0000FF" label="blue"> <option value="#008000" label="green"> <option value="#ff0000" label="red"> </datalist>
Каждый элемент option в datalist должен в качестве значения принимать шестнадцатеричный код цвета, например, "#0000FF". После выбора цвета данный числовой код устанавливается в качестве значения в элементе input.
Поля для ввода url, email, телефона
Ряд полей input предназначены для ввода таких данных, как url, адреса электронной почты и телефонного номера. Они однотипны и во многом отличаются только тем, что для атрибута
type принимают соответственно значения email, tel и url.
Для их настройки мы можем использовать те же атрибуты, что и для обычного текстового поля:
maxlength: максимально допустимое количество символов в поле

pattern: определяет шаблон, которому должен соответствовать вводимый текст

placeholder: устанавливает текст, который по умолчанию отображается в поле

readonly: делает текстовом поле доступным только для чтения

required: указывает, что текстовое поле обязательно должно иметь значение

size: устанавливает ширину поля в видимых символах

value: устанавливает значение по умолчанию для поля

list: устанавливает привязку к элементу datalist со списком возможных значений

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Форма ввода в HTML5</title> </head> <body> <form> <p> <label for="email">Email: </label> <input type="email" placeholder="[email protected]" name="email"/> </p> <p> <label for="url">URL: </label> <input type="url" name="url"/> </p> <p> <label for="phone">Телефон: </label> <input type="tel" placeholder="(XXX)-XXX-XXXX" name="phone"/> </p> <p> <button type="submit">Отправить</button> </p> </form> </body> </html>
Основное преимущество подобных полей ввода перед обычными текстовыми полями состоит в том, что поля ввода для email, url, телефона для проверки ввода используют соответствующий шаблон. Например, если мы введем в какое-либо поле некорректное значение и попробуем отправить форму, то браузер может отобразить нам сообщение о некорректном вводе, а форма не будет отправлена:

Руководство по стилю и соглашения о кодировании HTML уроки для начинающих академия

Соглашения о кодировке HTML
Веб-разработчики часто не уверены в стиле кодирования и синтаксисе для использования в HTML.
Между 2000 и 2010, многие веб-разработчики преобразованы из HTML в XHTML.
С помощью XHTML разработчики были вынуждены писать корректный и «хорошо сформированный» код.
HTML5 немного более небрежен, когда дело доходит до проверки кода.
Будьте умны и будущие доказательства
Последовательное использование стиля, облегчает для других, чтобы понять ваш HTML.
В будущем такие программы, как читатели XML, могут захотеть читать ваш HTML.
Использование хорошо сформированного синтаксиса «close to XHTML» может быть умным.

Всегда держите код аккуратным, чистым и хорошо сформированным.
Использовать правильный тип документа
Всегда объявлять тип документа в качестве первой строки в документе:
Если требуется согласованность с тегами нижнего регистра, можно использовать:
Использовать имена элементов нижнего регистра
HTML5 позволяет смешивать прописные и строчные буквы в именах элементов.
Рекомендуется использовать имена элементов нижнего регистра, так как:
Смешивание прописных и строчных имен плохо
Разработчики обычно используют строчные имена (как в XHTML)
Нижний регистр выглядят чище
Строчные легче писать
Плохо:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>
Очень плохо:
<Section>
<p>This is a paragraph.</p>
</SECTION>
Хорошо:
<section>
<p>This is a paragraph.</p>
</section>
Закрытие всех элементов HTML
В HTML5 не нужно закрывать все элементы (например, элемент <p> ).
Рекомендуется закрыть все элементы HTML.
Плохо:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>
Хорошо:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>
Закрытие пустых элементов HTML
В HTML5 необязательно закрывать пустые элементы.
Разрешены:
<meta charset=»utf-8″>
Также разрешено:
<meta charset=»utf-8″ />
Однако в XHTML и XML требуется закрывающая косая черта (/).
Если вы ожидаете, что программное обеспечение XML для доступа к вашей странице, это хорошая идея, чтобы сохранить закрывающую косую черту!
Использовать имена атрибутов нижнего регистра
HTML5 позволяет смешивать прописные и строчные буквы в именах атрибутов.
Рекомендуется использовать имена атрибутов нижнего регистра, так как:
Смешивание прописных и строчных имен плохо
Разработчики обычно используют строчные имена (как в XHTML)
Нижний регистр выглядят чище
Строчные легче писать
Плохо:
<div>
Хорошо:
<div class=»menu»>
Значения атрибутов предложения
HTML5 позволяет значения атрибутов без кавычек.
Мы рекомендуем цитировать значения атрибутов, так как:
Смешивание прописных и строчных значений плохо
Цит

Тег для телефона html5 – Как сделать номер телефона ссылкой сразу на звонок, при открытии сайта с мобильного устройства?

Полезные сниппеты на HTML5 / Habr

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

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

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

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

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

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

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

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

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

10 полезных тегов и атрибутов HTML5, которые вы должны знать! | XoZblog

Структурная разметка HTML5

Форма

Новые типы input полей

Регулярные выражения для валидации

Автозаполнение с HTML5 datalist

Автофокус полей формы

Замещающий текст поля

Скрытые элементы с помощью HTML5

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

HTML5 <details> и <summary> теги

Атрибут download

Номер телефона | WebReference

Автор и редакторы

Элементы для ввода цвета, url, email, телефона

Элементы для ввода цвета, url, email, телефона

Установка цвета

Поля для ввода url, email, телефона

Руководство по стилю и соглашения о кодировании HTML уроки для начинающих академия

Соглашения о кодировке HTML

Будьте умны и будущие доказательства

Использовать правильный тип документа

Использовать имена элементов нижнего регистра

Плохо:

Очень плохо:

Хорошо:

Закрытие всех элементов HTML

Плохо:

Хорошо:

Закрытие пустых элементов HTML

Разрешены:

Также разрешено:

Использовать имена атрибутов нижнего регистра

Плохо:

Хорошо:

Значения атрибутов предложения

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

Рубрики