<input type="url">

<input> элементов типа url используются для ввода и редактирования URL-адресов.

Значение поля ввода автоматически проверяется на соответствие формату URL или пустоты перед отправкой формы. Псевдоклассы CSS :valid и :invalid автоматически применяются для визуального обозначения валидности URL.

Атрибут <input> элемента содержит строку, которая автоматически проверяется на соответствие синтаксису URL. Более конкретно, есть два возможных формата значений, которые пройдут проверку:

1. Пустая строка ("") указывает, что пользователь не ввёл значение или что значение было удалено.
2. Один правильно сформированный абсолютный URL. Это не обязательно означает, что адрес URL существует, но он, по крайней мере, правильно отформатирован. Запись, соответствующая urlscheme://restofurl, может быть валидной, даже если введённый urlscheme не существует.

Подробности о том, как URL-адреса проверяются на правильность формата, см. в разделе Проверка.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Глобальный атрибут spellcheck используется для указания того, нужно ли включить проверку орфографии для элемента. Его можно использовать для любого редактируемого содержимого, но здесь мы рассматриваем особенности использования spellcheck для элементов <input>. Разрешённые значения для spellcheck:

false

Отключить проверку орфографии для этого элемента.

true

Включить проверку орфографии для этого элемента.

"" (пустая строка) или отсутствие значения

Следовать по умолчанию для проверки орфографии этого элемента. Это может основываться на настройке проверки орфографии родительского элемента или других факторах.

Поле ввода может иметь проверку орфографии, если у него нет атрибута readonly, и оно не отключено.

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

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

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

on

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

off

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

При создании поля ввода URL с правильным значением type, url, вы получаете автоматическую проверку, соответствует ли введённый текст потенциально допустимому URL. Это может помочь избежать случаев, когда пользователь неправильно набирает адрес сайта или вводит некорректный.

Однако важно отметить, что этого недостаточно, чтобы гарантировать, что указанный текст является действительным URL, соответствует пользователю сайта или приемлем каким-либо другим образом. Это гарантирует, что значение поля имеет правильный формат для URL.

Этот элемент реализован как стандартное текстовое поле ввода с базовыми функциями проверки. В самом простом виде поле ввода URL может быть реализовано так:

<input id="myURL" name="myURL" type="url" />

Обратите внимание, что поле считается валидным, когда оно пустое и когда введено один корректный URL-адрес, но в противном случае не считается валидным. Добавив атрибут required, будут разрешены только корректно сформированные URL-адреса; поле ввода больше не считается валидным, когда оно пустое.

Здесь нет ничего магического. Отправка этой формы отправит на сервер следующие данные: myURL=http%3A%2F%2Fwww.example.com. Обратите внимание, как символы закодированы при необходимости.

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

Вот поле ввода url с плейсхолдером http://www.example.com. Обратите внимание, как плейсхолдер исчезает и появляется снова при манипулировании содержимым поля.

<input
  id="myURL"
  name="myURL"
  type="url"
  placeholder="http://www.example.com" />

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

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

Физический размер поля ввода может быть контролирован с помощью атрибута size. С его помощью можно указать количество символов, которые поле ввода может отображать одновременно. Например, в данном примере поле ввода url имеет ширину 30 символов:

<input id="myURL" name="myURL" type="url" size="30" />

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

Длина size отделена от ограничения длины введённого URL. Вы можете указать минимальную длину введённого URL в символах, используя атрибут minlength; аналогично, используйте maxlength для задания максимальной длины введённого URL. Если maxLength превышает size, содержимое поля ввода будет прокручиваться по мере необходимости, чтобы показать текущий выделенный фрагмент или точку вставки при манипулировании содержимым.

В приведенном ниже примере создано поле ввода URL-адреса шириной 30 символов, требующее, чтобы содержимое имело не менее 10 символов и не более 80 символов.

<input
  id="myURL"
  name="myURL"
  type="url"
  size="30"
  minlength="10"
  maxlength="80" />

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

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

<input id="myURL" name="myURL" type="url" value="http://www.example.com" />

Предложение возможных значений

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

<input id="myURL" name="myURL" type="url" list="defaultURLs" />

<datalist id="defaultURLs">
  <option value="https://developer.mozilla.org/"></option>
  <option value="http://www.google.com/"></option>
  <option value="http://www.microsoft.com/"></option>
  <option value="https://www.mozilla.org/"></option>
  <option value="http://w3.org/"></option>
</datalist>

С элементом <datalist> и его элементами <option> браузер предложит указанные значения как потенциальные значения для URL; обычно это представлено всплывающим или выпадающим списком с предложениями. В зависимости от браузера, пользовательский опыт может немного различаться, но как правило, нажатие в поле ввода открывает выпадающее меню с предлагаемыми URL. Затем, по мере ввода пользователем текста, список корректируется, показывая только соответствующие значения. Каждый введённый символ сужает список, пока пользователь не выберет значение или не введёт значение самостоятельно.

Использование меток для предлагаемых значений

Вы можете включить атрибут label на одном или всех элементах <option> для предоставления текстовых меток. Некоторые браузеры могут отображать только метки, в то время как другие могут отображать как метку, так и URL.

<input id="myURL" name="myURL" type="url" list="defaultURLs" />

<datalist id="defaultURLs">
  <option value="https://developer.mozilla.org/" label="MDN Web Docs"></option>
  <option value="http://www.google.com/" label="Google"></option>
  <option value="http://www.microsoft.com/" label="Microsoft"></option>
  <option value="https://www.mozilla.org/" label="Mozilla"></option>
  <option value="http://w3.org/" label="W3C"></option>
</datalist>

Для полей ввода url доступны два уровня проверки. Во-первых, существует стандартный уровень проверки, доступный для всех элементов <input>, который автоматически гарантирует, что содержимое соответствует требованиям для валидного URL. Но также есть возможность добавить дополнительную фильтрацию, чтобы удовлетворить ваши специализированные потребности, если они есть.

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

Синтаксис URL довольно сложный. Он определяется Стандартом URL WHATWG URL Living Standard и описан для новичков в нашей статье Что такое URL?

Как упоминалось ранее, для того, чтобы сделать ввод URL обязательным перед отправкой формы (нельзя оставлять поле пустым), необходимо включить атрибут required в элементе input.

<form>
  <input id="myURL" name="myURL" type="url" required />
  <button>Submit</button>
</form>

Попробуйте отправить форму выше без значения, чтобы увидеть, что произойдёт.

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

Например, предположим, что вы создаёте страницу поддержки для сотрудников компании Myco, Inc., которая позволит им связаться с отделом IT, если у них возникнут проблемы с одной из страниц. В упрощённой форме пользователь должен ввести URL-адрес страницы с проблемой и сообщение, описывающее ошибку. Но мы хотим, чтобы URL проверялся только в случае ввода домена Myco.

Поскольку поля ввода типа url проверяются как по стандартным правилам для URL, так и по указанному шаблону pattern, это можно реализовать с помощью регулярного выражения. Давайте посмотрим, как это сделать:

<form>
  <div>
    <label for="myURL">Enter the problem website address:</label>
    <input
      id="myURL"
      name="myURL"
      type="url"
      required
      pattern=".*\.myco\..*"
      title="The URL must be in a Myco domain" />
    <span class="validity"></span>
  </div>
  <div>
    <label for="myComment">What is the problem?</label>
    <input id="myComment" name="myComment" type="text" required />
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

Во-первых, указан атрибут required, что делает обязательным ввод правильного URL.

Во-вторых, в поле ввода url мы установили pattern на значение ".*\.myco\..*". Это регулярное выражение ищет строку, состоящую из произвольного количества символов, за которыми следуют точка, "myco", точка и снова произвольное количество символов. Так как браузер проверяет и стандартную валидацию URL, и наш пользовательский шаблон, мы получаем проверку, которая говорит "убедитесь, что это корректный URL и находится в домене Myco".

Это не идеально, но достаточно для требований этой базовой демонстрации.

Рекомендуется использовать атрибут title вместе с pattern. Если вы это делаете, то title обязательно должен описывать шаблон; он должен объяснять, какой должен быть формат данных, а не любую другую информацию. Это потому, что title может отображаться или озвучиваться как часть сообщения об ошибке валидации. Например, браузер может отобразить сообщение "Введённый текст не соответствует требуемому шаблону" с последующим указанием вашего title. Если ваш title будет чем-то вроде "URL", результат будет сообщением "Введённый текст не соответствует требуемому шаблону. URL", что не является хорошим пользовательским опытом.

Поэтому вместо этого мы указываем строку "URL должен находиться в домене myco". В результате полное сообщение об ошибке может выглядеть примерно так: "Введённый текст не соответствует требуемому шаблону. URL должен находиться в домене myco".

Больше сказать о полях ввода типа url нечего; см. разделы Проверка по шаблону и Использование полей ввода URL для множества примеров.

Также вы можете найти наш пример проверки по шаблону на GitHub (и посмотреть его в действии).

• Руководство по HTML-формам
• <input>
• <input type="tel">
• <input type="email">
• Таблица совместимости свойств CSS