<input type="tel"> значение атрибута

Элементы <input> типа tel позволяют пользователю вводить и редактировать номер телефона. В отличие от <input type="email"> и <input type="url">, значение поля не проверяется автоматически на соответствие определённому формату перед отправкой формы, поскольку форматы телефонных номеров сильно различаются по всему миру.

Попробуйте

<label for="phone">
  Enter your phone number:<br />
  <small>Format: 123-456-7890</small>
</label>

<input
  type="tel"
  id="phone"
  name="phone"
  pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
  required />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

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

Значение

Атрибут value элемента <input> содержит строку, представляющую телефонный номер, либо пустую строку ("").

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

Помимо глобальных атрибутов и атрибутов, применимых ко всем элементам <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. Не заключайте текст шаблона в прямые косые черты.

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

Подробности и пример см. ниже в разделе Проверка по шаблону.

placeholder

Атрибут placeholder — это строка с краткой подсказкой для пользователя о том, какие данные следует ввести в поле. Это должно быть слово или короткая фраза, демонстрирующая ожидаемый тип данных, а не пояснительное сообщение. Текст не должен содержать символы возврата каретки или перевода строки.

Если содержимое элемента имеет одну направленность текста (LTR или RTL), но подсказку нужно отобразить в противоположном направлении, можно использовать управляющие символы двунаправленного алгоритма Unicode, чтобы изменить направление текста внутри подсказки. Подробнее см. в статье Как использовать управляющие символы Unicode для двунаправленного текста.

readonly

Булев атрибут, который, если он присутствует, означает, что пользователь не может редактировать это поле. Однако его value можно изменить с помощью кода JavaScript, напрямую задав свойство value элемента HTMLInputElement.

size

Атрибут size — это числовое значение, указывающее ширину поля ввода в символах. Значение должно быть больше нуля; по умолчанию оно равно 20. Поскольку ширина символов различается, фактическая ширина может не совпадать с указанной, поэтому не следует рассчитывать на точное соответствие. В зависимости от символов и используемых настроек font поле может быть уже или шире заданного количества символов.

Этот атрибут не ограничивает количество символов, которые пользователь может ввести в поле. Он лишь приблизительно задаёт количество символов, видимых одновременно. Чтобы установить верхний предел длины вводимых данных, используйте атрибут maxlength.

Использование полей tel

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

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

Специальные клавиатуры

Одно из главных преимуществ <input type="tel"> заключается в том, что мобильные браузеры отображают специальную клавиатуру для ввода телефонных номеров. Например, вот как выглядят клавиатуры на некоторых устройствах.

Firefox для Android	WebKit для iOS (Safari/Chrome/Firefox)

Простое поле tel

В простейшем случае поле tel можно реализовать так:

<label for="telNo">Phone number:</label>
<input id="telNo" name="telNo" type="tel" />

Здесь нет ничего необычного. При отправке на сервер данные из этого поля будут представлены, например, так: telNo=+12125553151.

Подсказки-заполнители

Иногда полезно добавить подсказку, поясняющую, в каком формате следует вводить данные. Это особенно важно, если в дизайне страницы не предусмотрены описательные метки для каждого элемента <input>. Для этого используются подсказки-заполнители. Подсказка-заполнитель показывает, в каком формате следует указать value, приводя пример допустимого значения. Она отображается внутри поля редактирования, когда значение элемента value равно "". После ввода данных подсказка исчезает; если поле очистить, она появляется снова.

Здесь мы используем поле tel с подсказкой 123-4567-8901. Обратите внимание, как подсказка исчезает и появляется снова при изменении содержимого поля.

<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />

Управление размером поля

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

Физический размер элемента ввода

Физический размер поля ввода можно задать с помощью атрибута size. Он позволяет указать количество символов, которое поле может отображать одновременно. Например, в этом примере поле ввода tel имеет ширину 20 символов:

<input id="telNo" name="telNo" type="tel" size="20" />

Длина значения элемента

Атрибут size не связан с ограничением длины введённого телефонного номера. Можно задать минимальную длину введённого телефонного номера в символах с помощью атрибута minlength. Аналогично, используйте maxlength, чтобы установить максимальную длину введённого телефонного номера.

В приведённом ниже примере создаётся поле для ввода телефонного номера шириной 20 символов. Длина содержимого должна составлять не менее 9 и не более 14 символов.

<input
  id="telNo"
  name="telNo"
  type="tel"
  size="20"
  minlength="9"
  maxlength="14" />

Задание вариантов по умолчанию

Задание одного значения по умолчанию с помощью атрибута value

Как и всегда, можно задать значение по умолчанию для поля tel, указав его в атрибуте value:

<input id="telNo" name="telNo" type="tel" value="333-4444-4444" />

Предложение вариантов значений

Кроме того, можно предоставить список телефонных номеров по умолчанию, из которого пользователь сможет выбрать нужный. Для этого используйте атрибут list. Он не ограничивает пользователя предложенными вариантами, но позволяет быстрее выбирать часто используемые телефонные номера. Это также предоставляет подсказки для autocomplete. Атрибут list указывает идентификатор элемента <datalist>, который содержит по одному элементу <option> для каждого предлагаемого значения; значение value каждого элемента option соответствует предлагаемому значению для поля ввода телефонного номера.

<label for="telNo">Phone number: </label>
<input id="telNo" name="telNo" type="tel" list="defaultTels" />

<datalist id="defaultTels">
  <option value="111-1111-1111"></option>
  <option value="122-2222-2222"></option>
  <option value="333-3333-3333"></option>
  <option value="344-4444-4444"></option>
</datalist>

Когда элемент <datalist> и его элементы <option> добавлены, браузер будет предлагать указанные значения в качестве вариантов для телефонного номера. Обычно они отображаются во всплывающем или раскрывающемся списке. Интерфейс может отличаться в разных браузерах, но, как правило, при щелчке в поле редактирования открывается список предлагаемых телефонных номеров. По мере ввода список фильтруется и показывает только подходящие значения. Каждый введённый символ сужает список, пока пользователь не выберет вариант или не введёт собственное значение.

Вот снимок экрана, показывающий, как это может выглядеть:

Проверка

Как уже упоминалось, создать универсальное решение для проверки телефонных номеров на стороне клиента довольно сложно. Что же можно сделать? Рассмотрим несколько вариантов.

Обязательный ввод телефонного номера

Чтобы пустое поле считалось недопустимым и не отправлялось на сервер, используйте атрибут required. Например, возьмём такой HTML:

<form>
  <div>
    <label for="telNo">Enter a telephone number (required): </label>
    <input id="telNo" name="telNo" type="tel" required />
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

Добавим следующий CSS, чтобы обозначить допустимые значения галочкой, а недопустимые — крестиком:

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
  color: darkred;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
  color: #009000;
}

Результат выглядит так:

Проверка по шаблону

Чтобы дополнительно ограничить вводимые номера и потребовать их соответствия определённому шаблону, используйте атрибут pattern. Его значение — это регулярное выражение, которому должны соответствовать введённые значения.

В этом примере мы используем тот же CSS, что и раньше, но изменим HTML следующим образом:

<form>
  <div>
    <label for="telNo">
      Enter a telephone number (in the form xxx-xxx-xxxx):
    </label>
    <input
      id="telNo"
      name="telNo"
      type="tel"
      required
      pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

Обратите внимание: введённое значение считается недопустимым, если оно не соответствует шаблону xxx-xxx-xxxx. Например, значение 41-323-421 не будет принято. Значение 800-MDN-ROCKS также не подойдёт. А вот 865-555-6502 будет принято. Этот шаблон, очевидно, подходит только для некоторых регионов. В реальном приложении, вероятно, придётся выбирать шаблон с учётом региона пользователя.

Примеры

В этом примере мы используем элемент <select>, позволяющий пользователю выбрать страну, в которой он находится, и несколько элементов <input type="tel"> для ввода частей телефонного номера. Нет причин, по которым нельзя использовать несколько полей ввода tel.

У каждого поля есть атрибут placeholder, отображающий зрячим пользователям подсказку о том, что нужно ввести, атрибут pattern, задающий определённое количество символов для соответствующей части номера, и атрибут aria-label с подсказкой для пользователей программ чтения с экрана.

<form>
  <div>
    <label for="country">Choose your country:</label>
    <select id="country" name="country">
      <option>UK</option>
      <option selected>US</option>
      <option>Germany</option>
    </select>
  </div>
  <div>
    <p>Enter your telephone number:</p>
    <span class="areaDiv">
      <input
        id="areaNo"
        name="areaNo"
        type="tel"
        required
        placeholder="Area code"
        pattern="[0-9]{3}"
        aria-label="Area code" />
      <span class="validity"></span>
    </span>
    <span class="number1Div">
      <input
        id="number1"
        name="number1"
        type="tel"
        required
        placeholder="First part"
        pattern="[0-9]{3}"
        aria-label="First part of number" />
      <span class="validity"></span>
    </span>
    <span class="number2Div">
      <input
        id="number2"
        name="number2"
        type="tel"
        required
        placeholder="Second part"
        pattern="[0-9]{4}"
        aria-label="Second part of number" />
      <span class="validity"></span>
    </span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

В JavaScript есть обработчик события onchange, который при изменении значения <select> обновляет pattern, placeholder и aria-label элемента <input> в соответствии с форматом телефонных номеров в этой стране или территории.

const selectElem = document.querySelector("select");
const inputElems = document.querySelectorAll("input");

selectElem.onchange = () => {
  for (const e of inputElems) {
    e.value = "";
  }

  if (selectElem.value === "US") {
    inputElems[2].parentNode.style.display = "inline";

    inputElems[0].placeholder = "Area code";
    inputElems[0].pattern = "[0-9]{3}";

    inputElems[1].placeholder = "First part";
    inputElems[1].pattern = "[0-9]{3}";
    inputElems[1].setAttribute("aria-label", "First part of number");

    inputElems[2].placeholder = "Second part";
    inputElems[2].pattern = "[0-9]{4}";
    inputElems[2].setAttribute("aria-label", "Second part of number");
  } else if (selectElem.value === "UK") {
    inputElems[2].parentNode.style.display = "none";

    inputElems[0].placeholder = "Area code";
    inputElems[0].pattern = "[0-9]{3,6}";

    inputElems[1].placeholder = "Local number";
    inputElems[1].pattern = "[0-9]{4,8}";
    inputElems[1].setAttribute("aria-label", "Local number");
  } else if (selectElem.value === "Germany") {
    inputElems[2].parentNode.style.display = "inline";

    inputElems[0].placeholder = "Area code";
    inputElems[0].pattern = "[0-9]{3,5}";

    inputElems[1].placeholder = "First part";
    inputElems[1].pattern = "[0-9]{2,4}";
    inputElems[1].setAttribute("aria-label", "First part of number");

    inputElems[2].placeholder = "Second part";
    inputElems[2].pattern = "[0-9]{4}";
    inputElems[2].setAttribute("aria-label", "Second part of number");
  }
};

Пример выглядит так:

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

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

Техническая сводка

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

Совместимость с браузерами

См. также

• Руководство по HTML-формам
• <input>
  • <input type="text">
  • <input type="email">