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

Элементы <input> типа url позволяют пользователю вводить и редактировать URL.

Попробуйте

<form>
  <label for="url">Enter an https:// URL:</label>
  <input
    type="url"
    name="url"
    id="url"
    placeholder="https://example.com"
    pattern="https://.*"
    size="30"
    required />
</form>

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

input,
label {
  margin: 0.4rem 0;
}

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

Значение

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

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

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

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

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

list

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

maxlength

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

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

minlength

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

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

pattern

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

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

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

placeholder

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

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

readonly

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

size

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

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

spellcheck

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

false

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

true

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

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

Использовать поведение проверки орфографии элемента по умолчанию. Оно может зависеть от настройки spellcheck родительского элемента или других факторов.

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

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

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

Если создать поле ввода URL с правильным значением type — url, — введённый текст будет автоматически проверяться на соответствие формату, в котором 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> для каждого предлагаемого значения; атрибут value каждого элемента 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?

Обязательное поле URL

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

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

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

Примеры

Проверка URL

В этом примере мы проверяем, что URL введён, с помощью атрибута required, и для наглядности с помощью атрибута pattern убеждаемся, что URL ведёт на mozilla.org.

HTML

Для поля ввода url мы задаём pattern равным ".*\.mozilla\.org.*". Это регулярное выражение проверяет строку, состоящую из любого количества символов, за которыми следует ".mozilla.org", а затем снова любое количество символов. Поскольку браузер проверяет указанный текст и по стандартному фильтру URL, и по нашему пользовательскому шаблону, проверка требует, чтобы «значение было допустимым URL и содержало .mozilla.org».

Обратите внимание, что строгий шаблон, например https://developer\.mozilla\.org.*, был бы надёжнее, но в этом случае атрибут type="url" стал бы избыточным.

Атрибут title также описывает pattern для пользователей вспомогательных технологий.

<form>
  <label for="myURL">
    Enter a url from this site:
    <input
      id="myURL"
      name="myURL"
      type="url"
      required
      pattern=".*\.mozilla\.org.*"
      title="URL should include mozilla.org" />
    <span class="validity"></span>
  </label>
  <button>Submit</button>
</form>

CSS

CSS визуально подсказывает пользователю, является ли содержимое :valid или :invalid, добавляя соответствующее свойство content. Также добавлен альтернативный текст для пользователей вспомогательных технологий.

input:focus:invalid {
  outline: 2px solid red;
}

input:focus:valid {
  outline: 2px solid green;
}

input + span {
  padding: 0 0.3rem;
}

input:invalid + span::after {
  content: "✖" / "Content is not valid";
  color: red;
}

input:valid + span::after {
  content: "✓" / "Content is valid";
  color: green;
}

Результат

Скопируйте URL этой страницы и вставьте его в поле ввода: вы увидите зелёную рамку и зелёную галочку. Введите любой другой URL, который не содержит mozilla.org, или недопустимый URL — вы увидите красную рамку и красный крестик.

Другие примеры см. в разделах Проверка по шаблону и Использование полей ввода URL.

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

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

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

См. также

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