Элементы типа позволяют пользователю вводить и редактировать телефонный номер.
<input> Элементы <input> типа tel позволяют пользователю вводить и редактировать телефонный номер. В отличие от <input type="email"> и <input type="url"> , входное значение не проверяется автоматически на определенный формат перед отправкой формы, потому что форматы телефонных номеров сильно различаются по всему миру.
Try it
Несмотря на то, что вводы типа tel функционально идентичны стандартным text вводам, они служат полезным целям; наиболее очевидным из них является то, что мобильные браузеры — особенно на мобильных телефонах — могут отображать настраиваемую клавиатуру, оптимизированную для ввода телефонных номеров. Использование определенного типа ввода для телефонных номеров также делает добавление пользовательской проверки и обработки телефонных номеров более удобными.
Примечание.
Браузеры, не поддерживающие тип tel , возвращаются к стандартному вводу текста .
| Value | Строка,представляющая телефонный номер,или пустая |
| Events | change и input |
| Поддерживаемые общие атрибуты | autocomplete , list , maxlength , minlength , pattern , placeholder , только readonly и size |
| IDL attributes | list , selectionStart , selectionEnd , selectionDirection и value |
| DOM interface |
|
| Methods | select(), setRangeText(), setSelectionRange() |
Value
Атрибут value элемента <input> содержит строку, которая либо представляет номер телефона, либо является пустой строкой ( "" ).
value ""
Additional attributes
В дополнение к атрибутам, которые работают со всеми элементами <input> независимо от их типа, входы телефонных номеров поддерживают следующие атрибуты.
list
Значения атрибута list — это id элемента <datalist> , находящегося в том же документе. <datalist> предоставляет список предопределенных значений предложить пользователю для этого входа. Любые значения в списке, несовместимые с type , не включаются в предлагаемые параметры. Предоставленные значения являются предложениями, а не требованиями: пользователи могут выбрать из этого предопределенного списка или указать другое значение.
maxlength
Максимальное количество символов (в единицах кода UTF-16), которое пользователь может ввести в поле телефонного номера. Это должно быть целочисленное значение 0 или больше. Если ни maxlength не указано, или указано недопустимое значение, то поле номер телефона не имеет максимальную длину.
Это значение также должно быть больше или равно значению minlength .
Входные данные не пройдут проверку ограничения, если длина текста, введенного в поле, превышает maxlength кодовых единиц UTF-16.
minlength
Минимальное количество символов (в единицах кода UTF-16), которое пользователь может ввести в поле телефонного номера. Это должно быть неотрицательное целое число, меньшее или равное значению, заданному параметром maxlength . Если ни minlength не указано, или указано недопустимое значение, ввод номера телефона не имеет минимальную длину.
Поле телефонного номера не пройдет проверку ограничения, если длина текста, введенного в поле, меньше minlength кодовых единиц UTF-16.
pattern
pattern атрибут, если указана, является регулярным выражением , что входное в value должно совпадать для того , чтобы передавать значение ограничения проверки . Это должно быть допустимое регулярное выражение JavaScript, используемое типом RegExp и описанное в нашем руководстве по регулярным выражениям ; 'u' флаг задан при компиляции регулярного выражения, так что рисунок рассматривается как последовательность кодовых точек Unicode, а не как ASCII.
Вокруг текста шаблона не следует указывать косую черту.
Если указанный шаблон не указан или является недействительным,регулярное выражение не применяется и данный атрибут игнорируется полностью.
Примечание. Используйте атрибут title , чтобы указать текст, который большинство браузеров будет отображать в виде всплывающей подсказки, чтобы объяснить, какие требования предъявляются к шаблону. Вы также должны включить рядом другой пояснительный текст.
Подробности и пример см. в разделе Проверка шаблона ниже.
placeholder
placeholder атрибут является строкой , которая предоставляет краткую подсказку пользователю относительно того , какой информации , как ожидается , в этой области. Это должно быть слово или короткая фраза, демонстрирующая ожидаемый тип данных, а не пояснительное сообщение. Текст не должен включать символы возврата каретки или перевода строки.
Если содержимое элемента управления имеет одно направление ( LTR или RTL ), но необходимо представить заполнитель в противоположном направлении, вы можете использовать символы форматирования двунаправленного алгоритма Unicode, чтобы переопределить направление внутри заполнителя; Дополнительные сведения см.
в разделе Как использовать элементы управления Unicode для двунаправленного текста .
Примечание. По возможности избегайте использования атрибута placeholder . Это не так семантически полезно, как другие способы объяснения вашей формы, и может вызвать неожиданные технические проблемы с вашим контентом. Для получения дополнительной информации см. Ярлыки и заполнители в элементе <input>: The Input (Form Input) .
readonly
Логический атрибут, который, если он присутствует, означает, что это поле не может редактироваться пользователем. Однако его value может быть изменено кодом JavaScript, напрямую устанавливающим HTMLInputElement value HTMLInputElement .
Примечание. Поскольку поле, доступное только для чтения, не может иметь значения, required не влияет на входные данные, для которых также указан атрибут readonly .
size
size атрибут является числовым значением , указывающим , сколько символов в ширине поле ввода должно быть.
Значение должно быть числом больше нуля, а значение по умолчанию — 20. Поскольку ширина символов различается, это может быть или не быть точным, и на это не следует полагаться; результирующий ввод может быть уже или шире, чем указанное количество символов, в зависимости от символов и шрифта (используемых настроек font ).
Это не устанавливает ограничения на количество символов, которые пользователь может ввести в поле. Он лишь указывает приблизительно, сколько можно увидеть одновременно. Чтобы установить верхний предел длины входных данных, используйте атрибут maxlength .
Non-standard attributes
Следующие нестандартные атрибуты доступны для полей ввода телефонных номеров.Как правило,вы должны избегать их использования,если только это не поможет.
autocorrect
В расширении Safari атрибут autocorrect представляет собой строку, которая указывает, следует ли активировать автоматическое исправление, когда пользователь редактирует это поле.
Допустимые значения:
onВключает автоматическую коррекцию опечаток,а также обработку подстановок текста,если они настроены.
offОтключить автоматическое исправление и замену текста.
mozactionhint
Расширение Mozilla,которое дает подсказку о том,какое действие будет предпринято,если пользователь нажмет кнопкуEnterorReturnво время редактирования поля.
Этот атрибут устарел: вместо него используйте глобальный атрибут enterkeyhint .
Использование тел-входов
Телефонные номера-это очень часто собираемые в Интернете данные.Например,при создании любого вида регистрационного сайта или сайта электронной коммерции,вам,скорее всего,придется запросить у пользователя номер телефона,будь то для бизнес-целей или для связи в экстренных случаях.Учитывая,насколько распространены телефонные номера,жаль,что «одноразмерное» решение для проверки телефонных номеров не является практичным.
К счастью, вы можете учесть требования своего сайта и самостоятельно реализовать соответствующий уровень проверки. Подробности см. в разделе Проверка ниже.
Custom keyboards
Одним из основных преимуществ <input type="tel"> является то, что он заставляет мобильные браузеры отображать специальную клавиатуру для ввода телефонных номеров. Например, вот как выглядят клавиатуры на нескольких устройствах.
| Firefox для Android | WebKit iOS (Safari/Chrome/Firefox) |
|---|---|
Простой тел-вход
В самом базовом виде вход tel может быть реализован таким образом:
<label for="telNo">Phone number:</label> <input name="telNo" type="tel">
Здесь нет ничего волшебного. При отправке на сервер указанные выше входные данные будут представлены, например, как telNo=+12125553151 .
Placeholders
Иногда бывает полезно предложить контекстную подсказку относительно того, какую форму должны принимать входные данные.
Это может быть особенно важно, если дизайн страницы не предлагает описательных меток для каждого <input> . Это где заполнители бывают. Заполнитель этого значения , которое показывает , какую форму value следует принимать, представляя пример действительного значения, которое отображается в окне редактирования , когда элемент value
"" . После ввода данных в поле заполнитель исчезает; если поле пусто, заполнитель появляется снова.Здесь у нас есть ввод tel с заполнителем 123-4567-8901 . Обратите внимание, как заполнитель исчезает и появляется снова, когда вы манипулируете содержимым поля редактирования.
<input name="telNo" type="tel"
placeholder="123-4567-8901">
Управление размером входного сигнала
Вы можете контролировать не только физическую длину поля ввода,но и минимальную и максимальную длину,разрешенную для самого вводимого текста.
Размер элемента физического ввода
Физическим размером поля ввода можно управлять с помощью атрибута size . С его помощью вы можете указать количество символов, которое поле ввода может отображать одновременно. В этом примере, например, поле редактирования tel имеет ширину 20 символов:
<input name="telNo" type="tel"
size="20">
Длина элемента
size отделен от ограничения длины по введенному номеру телефона. Вы можете указать минимальную длину в символах для введенного телефонного номера с minlength атрибута minlength ; аналогично, используйте maxlength , чтобы установить максимальную длину введенного телефонного номера.
В примере,приведенном ниже,создается 20-символьное поле ввода телефонного номера,содержание которого должно быть не менее 9 символов и не более 14 символов.
<input name="telNo" type="tel"
size="20" minlength="9" maxlength="14">
Примечание.
Приведенные выше атрибуты влияют на проверку — входные данные в приведенном выше примере будут считаться недействительными, если длина значения меньше 9 символов или больше 14. Большинство браузеров даже не позволят вам ввести значение, превышающее максимальную длину.
Предоставление опций по умолчанию
Предоставление одного значения по умолчанию с помощью атрибута value
Как всегда, вы можете указать значение по умолчанию для поля ввода tel , установив его атрибут value :
<input name="telNo" type="tel"
value="333-4444-4444">
Предлагая предложенные значения
list . Это не ограничивает пользователя этими параметрами, но позволяет им быстрее выбирать часто используемые телефонные номера. Это также предлагает подсказки для autocomplete .
list атрибутов определяет идентификатор <datalist> элемент, который , в свою очередь , содержит один <option> элемент каждого предлагаемого значения; каждый option «сек value является соответствующим предлагаемым значением для поля ввода номера телефона.<label for="telNo">Phone number: </label> <input name="telNo" type="tel" list="defaultTels"> <datalist> <option value="111-1111-1111"> <option value="122-2222-2222"> <option value="333-3333-3333"> <option value="344-4444-4444"> </datalist>
С элементом <datalist> и его <option> браузер предложит указанные значения в качестве возможных значений для номера телефона; обычно это представлено в виде всплывающего или раскрывающегося меню, содержащего предложения. Хотя конкретный пользовательский интерфейс может варьироваться от одного браузера к другому, обычно щелчок в поле редактирования представляет раскрывающийся список предлагаемых номеров телефонов.
Затем, по мере ввода пользователем, список корректируется, чтобы отображать только отфильтрованные совпадающие значения. Каждый введенный символ сужает список до тех пор, пока пользователь не сделает выбор или не введет пользовательское значение.
Вот скриншот того,как это может выглядеть:
© 2005–2022 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel
HTML
-
Размер элемента физического ввода
Физический размер поля ввода можно контролировать с помощью атрибута.
-
<input type=»submit»>
Элементы <input> типа submit отображаются как кнопки.
-
Validation
Как мы уже упоминали ранее, довольно сложно предоставить универсальные телефонные номера решения для проверки на стороне клиента.
-
<input type=»text»>
- 1
- …
- 120
- 121
- 122
- 123
- 124
- …
- 258
- Next
input
- Популярные
- Последние
- Без ответа
-
+1Тип поля дата в полях контакта
Архив
Ошибка сохранения в приложении Контакты.
Скорее всего связано с тем, что выводиться массив полей, в отличии от приложения Команда. Где поле input одно.
В Контактах:
В Команде:
-
Какой файл вебасиста отвечает за структуру html тега input на странице карточки товара <input type=»submit» value=»Купить»>
-
Где находятся <input> в checkout.
contactinfo.html ?Не могу найти HTML-код, который отображает поля ввода информацииВ поле<input title=»Телефон» type=»text» name=»customer[phone]» value=»+7 (777) 555-33-11″></p>Нужно добавить…
-
Как переделать input на button? Есть решение
Всем привет!Ребят, подскажите, как можно переделать все input (submit) на button (button)?Смысл в том, что хочется сделать красивые кнопочки с иконками, а инпутами очень много возьни.
Плюс, использую фреймворк, а там стили только для button. Батон… -
Настроить поле телефона со скобками (Inputmask) Есть решение
Как и куда в Вебасисте (с Shop Script) установить и настроить маску для ввода кода города в скобки?Пример: http://fitnessdoctor.
ru/ внизу в блоке «Возникли вопросы? Свяжитесь с нами прямо сейчас и мы поможем!» -
Регион и input. Как, зачем и почему?
Подскажите, как сделать поле региона на этапе ввода данных о доставке в корзине input-ом? А не селектом, как это сделано по умолчанию.Причем, вводить в это поле будут не название региона, а его цифровой код (например, 77 для Москвы).
org/Question»>
Как можно отредактировать input’ы которы находятся на странице оформления заказа? Как я понимаю они отображаются с помощью {$checkout_contact_form->html()}, так вот, мне нужно добавить к ним индивидуальные классы, к полю для номер изменить…
Скорее всего связано с тем, что выводиться массив полей, в отличии от приложения Команда. Где поле input одно.
В Контактах:
В Команде:
org/Question»>
<input> и Телефон
Почему в шаблонах нигде возможности отредактировать type в input для телефона? причем у всех шаблонов стоит type=»text» , хотя лучше будет type=»tel».
contactinfo.html ?
Плюс, использую фреймворк, а там стили только для button. Батон…
ru/ внизу в блоке «Возникли вопросы? Свяжитесь с нами прямо сейчас и мы поможем!»входной (тип=тел) элемент
Если вы не знаете, что такое элемент или как вы должны его использовать, я рекомендую вам прочитать учебник « Теги и атрибуты HTML », который вы можете найти в разделе руководств HTML .
Содержание
- 01Описание
- 02Примеры
- 03Атрибуты
- Специальные атрибуты
- Глобальные атрибуты
- 04События
- Глобальные события
Описание
Элемент input , имеющий значение «tel» в своем атрибуте типа , представляет поле для телефонного номера. Элемент управления, связанный с этим полем, представляет собой текстовое поле, которое позволяет пользователям редактировать только одну строку обычного текста без особых требований к формату. Такое поведение было принято из-за большого количества действительных телефонных номеров, что делает ограничения общего назначения неуместными. Авторы могут определить конкретный набор ограничений с помощью шаблон атрибут.
Примеры
В нашем первом примере мы создадим форму с телефонным входом.
Здесь мы будем использовать атрибут -заполнитель , который был представлен в HTML 5. Этот атрибут позволяет нам дать подсказку о данных, которые должны быть предоставлены в элементе управления, например примеры или краткие описания. Эта подсказка будет отображаться внутри элемента управления (как если бы это было значение) только до тех пор, пока элемент управления не имеет реального значения. Когда пользователь начинает печатать, заполнитель текст будет удален из элемента управления.
./../form-result.php" method="post" target="_blank">
<р>
Контактный номер:
<список данных>
<опция значение="(154) 215-4468">
<опция значение="(154) 254-7863">
<опция значение="(146) 123-7821">
<опция значение="(112) 645-4565">
Контактный номер:
максимальная длина
Целое число, указывающее максимальное количество символов, которое может иметь значение этого элемента управления.
Авторы не должны полагаться на атрибут maxlength . Пользователи всегда могут отправить форму , если браузеры (некоторые намеренно) не поддерживают эту функцию.
Пример