<input type="tel">

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

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

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

В дополнение к атрибутам, которые работают со всеми элементами <input> независимо от их типа, вводы номеров телефонов поддерживают следующие атрибуты.

Значения атрибута list — это id элемента <datalist>, расположенного в том же документе. <datalist> предоставляет список предопределенных значений, которые предлагаются пользователю для этого ввода. Любые значения в списке, которые несовместимы с type, не включаются в предлагаемые варианты. Предоставленные значения являются предложениями, а не требованиями: пользователи могут выбирать из этого предопределенного списка или указывать другое значение.

Максимальная длина строки (измеряемая в кодовых единицах UTF-16), которую пользователь может ввести в поле номера телефона. Это должно быть целое значение 0 или больше. Если maxlength не указан или указано недопустимое значение, поле номера телефона не имеет максимальной длины. Это значение также должно быть больше или равно значению minlength.

Ввод не пройдет проверку ограничений, если длина текста, введенного в поле, больше maxlength кодовых единиц UTF-16. Проверка ограничений применяется только при изменении значения пользователем.

Минимальная длина строки (измеряемая в кодовых единицах UTF-16), которую пользователь может ввести в поле номера телефона. Это должно быть неотрицательное целое значение, меньшее или равное значению, указанному maxlength. Если minlength не указан или указано недопустимое значение, ввод номера телефона не имеет минимальной длины.

Поле номера телефона не пройдет проверку ограничений, если длина текста, введенного в поле, меньше minlength кодовых единиц UTF-16. Проверка ограничений применяется только при изменении значения пользователем.

Атрибут pattern, если указан, представляет собой регулярное выражение, которому должно соответствовать значение value ввода, чтобы значение прошло проверку ограничений. Это должно быть допустимое регулярное выражение JavaScript, используемое типом RegExp, и как описано в нашем руководстве по регулярным выражениям; флаг 'u' указывается при компиляции регулярного выражения, чтобы шаблон обрабатывался как последовательность кодовых точек Unicode, а не как ASCII. Косые черты не должны указываться вокруг текста шаблона.

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

См. Проверку шаблона ниже для получения подробной информации и примера.

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

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

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

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

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

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

Расширение Safari, атрибут autocorrect — это строка, которая указывает, следует ли активировать автоматическую коррекцию, пока пользователь редактирует это поле. Допустимые значения:

on

Включить автоматическую коррекцию опечаток, а также обработку замен текста, если таковые настроены.

off

Отключить автоматическую коррекцию и замены текста.

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

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

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

Firefox for Android	WebKit iOS (Safari/Chrome/Firefox)

В самом простом виде ввод tel можно реализовать следующим образом:

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

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

Иногда полезно предложить подсказку в контексте, какой формы должны быть входные данные. Это может быть особенно важно, если дизайн страницы не предлагает описательных меток для каждого <input>. Именно здесь на помощь приходят замещающие значения (placeholder). Замещающее значение — это значение, демонстрирующее форму, которую должны принимать 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 указывает ID элемента <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: #8b0000;
}

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> обновляет <input>, pattern, и placeholder элемента aria-label в соответствии с форматом телефонных номеров в этой стране/территории.

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

selectElem.onchange = () => {
  for (let i = 0; i < inputElems.length; i++) {
    inputElems[i].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">
• Совместимость свойств CSS