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

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

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

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

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

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

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

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

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

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

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

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

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