phpjshtmlcssblog

Type tel значение телефона атрибут поля ввода input

Тип "tel" - телефон(телефонный номер). Что такое type tel html, Type tel - это одно из значений тега input, предназначено для ввода телефонного номера по шаблону "pattern".

Тип телефон в поле ввода input

1. Что такое type tel html,
2. Пример использования type tel.

Скопировать ссылку



Что такое type tel html.

У поля ввода есть типы передаваемых данных type, с разными значениями input

Одно из таких значении : "type tel" - который предназначен для ввода телефонного номера.

Синтаксис type tel html.

<input type="tel">

Характеристики типа tel :

"type tel" - это поле предназначено для ввода номера телефона.
Кроме самого атрибута type со значением tel необходимо использовать формат телефонного номера, это атрибут "pattern"


pattern="[0-9]{1}-[0-9]{3}-[0-9]{3}"

Как использовать данный type tel на сайте.

HTML :

Кроме поле ввода , мы можем добавит вовнутрь подсказку placeholder:

Понадобится форма form.

<form method="post">
<input name="phone" type="tel" pattern="[0-9]{1}-[0-9]{3}-[0-9]{3}" placeholder="Номер телефона">
<input name="phone_submit" type="submit" value="Отправить">
</form>


И еще одно поле ввода с другим типом submit

PHP :

Вам потребуется метод post.

Скопировать ссылку



Пример использования type tel.

Простое условие, по которому будем получать телефонный номер из поля с типом type tel

if($_POST['phone_submit']) { $result = 'Вы нажали кнопку отправить submit, переданное значение : '.strip_tags($_POST['phone']) ;}

echo $result;

Соберем весь код вместе для type tel:
Html :
<form method="post">
<input name="phone" type="tel" pattern="[0-9]{1}-[0-9]{3}-[0-9]{3}" placeholder="Номер телефона">
<input name="phone_submit" type="submit" value="Отправить">
</form>

Php :

if($_POST['phone_submit']) { $result = 'Вы нажали кнопку отправить submit, переданное значение : '.strip_tags($_POST['phone']) ;}

echo $result;

Результат:

Введите номер телефона по шаблону, либо не по шаблону type tel и нажмите отправить:

Телефон в формате х-xxx-xxx:

Сообщение системы комментирования :

01.09.2021

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