<input type="url">

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

Спробуйте його в дії

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

Значення

Атрибут value елемента <input> містить рядок, який автоматично валідується як відповідний синтаксису URL. Зокрема, існує два можливих формати значень, які пройдуть валідацію:

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

Дивіться деталі про те, як валідуються URL на предмет коректного форматування, у Валідаціях.

Додаткові атрибути

На додачу до глобальних атрибутів та атрибутів, що працюють на всіх елементах <input>, незалежно від їхніх типів, поля URL підтримують наступні атрибути.

[!NOTE] Глобальний атрибут autocorrect можна додати до полів URL, проте доступне в ньому значення завжди буде off.

list

Значення атрибута list – це id елемента <datalist>, розташованого в тому ж документі. Елемент <datalist> надає список попередньо визначених значень, які будуть запропоновані користувачеві для цього поля. Будь-які значення зі списку, що не сумісні з атрибутом type, не включаються до запропонованих варіантів. Надані значення є пропозиціями, а не обов'язковими: користувачі можуть як обирати з такого наперед визначеного списку, так і вводити інші значення.

maxlength

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

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

minlength

Мінімальна довжина рядка (в кодових одиницях UTF-16), котрий користувач може ввести в поле url. Це повинно бути невід'ємне ціле числове значення, менше або рівне значенню, заданому maxlength. Якщо не задано minlength, або якщо задано недійсне значення, то таке поле не має мінімальної довжини.

Поле номера телефону не пройде валідацію обмежень, якщо довжина введеного в поле тексту – менша за minlength кодових одиниць UTF-16 завдовжки. Валідація обмежень застосовується лише тоді, коли значення змінюється користувачем.

pattern

Атрибут pattern, коли заданий, є регулярним виразом, котрому повинно відповідати value, щоб пройти валідацію обмежень. Це повинен бути дійсний регулярний вираз JavaScript, подібний до тих, що використовуються типом RegExp, і що задокументовані в нашому посібнику з регулярних виразів; при компіляції регулярного виразу задається позначка 'u', тож патерн обробляється як послідовність кодових точок Unicode, а не як ASCII. На кінцях тексту патерну не повинно бути скісних рисок.

Якщо заданий патерн – не заданий або недійсний, то регулярний вираз не застосовується, і цей атрибут цілком ігнорується.

[!NOTE] Слід використовувати атрибут title, щоб задати текст, котрий більшість браузерів показує як підказку для пояснення того, яким вимогам повинен відповідати текст, аби відповідати патерну. Також слід додати інший пояснювальний текст поруч.

Дивіться деталі та приклад у розділі Валідація за патерном.

placeholder

Атрибут placeholder – це рядок, що надає користувачам стислу підказку щодо того, якого роду інформація очікується в полі. Це повинно бути слово або коротка фраза, що показує очікуваний тип даних, а не пояснювальне повідомлення. Такий текст не повинен містити повернення каретки або розриву рядка.

Якщо вміст контрольного елемента має один напрям письма (зліва направо або справа наліво), а заповнювач треба показати в іншому напрямі, то можна використати в заповнювачі символи двонапрямленого алгоритму форматування Unicode; більше інформації у статті Як використовувати контрольні символи Unicode у двонапрямленому тексті.

[!NOTE] Уникайте використання атрибута placeholder, якщо це можливо. Він є менш семантично корисним, ніж інші способи пояснення форми, і може призводити до неочікуваних технічних проблем зі вмістом. Більше інформації в підписах <input>.

readonly

Булів атрибут readonly, якщо присутній, означає, що користувач не може редагувати поле. Проте value цього поля усе ж може бути змінено кодом JavaScript, шляхом безпосереднього присвоєння властивості value об'єкта HTMLInputElement.

[!NOTE] Оскільки таке поле не може мати значення, required не діє на поля, на котрих також задано атрибут readonly.

size

Атрибут size – це числове значення, що вказує на те, якої ширини в символах повинно бути поле введення. Значення цього атрибута повинно бути числом, більшим за нуль, а усталене значення – 20. Оскільки розмір символів буває різний, така ширина може бути, а може й не бути точною, і на її розмірність не варто покладатися; результівне поле може бути вужчим або ширшим за задану кількість символів, залежно від самих цих символів та шрифту (застосованих налаштувань font).

Це не задає обмеження того, скільки символів користувач може ввести в поле. Це лише приблизно задає те, скільки символів водночас буде видно. Аби задати верхню межу довжини введених даних, слід використовувати атрибут maxlength.

spellcheck

Глобальний атрибут spellcheck використовується на позначення того, чи треба ввімкнути для елемента перевірку правопису. Його можна використовувати для будь-якого редагованого вмісту, але тут розглядаються особливості, пов'язані з використанням spellcheck на елементах <input>. Дозволені значення для spellcheck – це:

false

Вимкнути перевірку правопису для цього елемента.

true

Ввімкнути перевірку правопису для цього елемента.

"" (порожній рядок) або без значення

Дотримуватись усталеної поведінки елемента щодо перевірки правопису. Вона може бути заснована на налаштуванні spellcheck батьківського елемента або інших чинниках.

Поле введення може мати ввімкнену перевірку правопису, коли не має атрибута readonly та не є вимкненим.

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

Застосування полів URL

Коли створити поле URL з правильним значенням type – url, то виходить автоматична валідація того, що введений текст щонайменше має коректну форму, аби потенційно бути допустимим URL. Це може допомогти уникнути випадків, коли користувач помиляється при введенні адреси свого вебсайту або надає недійсну.

Проте важливо зауважити, що цього недостатньо, щоб гарантувати, що вказаний текст є URL, який насправді існує, відповідає користувачеві сайту або прийнятний у будь-якому іншому відношенні. Це гарантує, що значення поля має правильний формат для URL.

[!NOTE] Користувач може погратися за лаштунками з вашим HTML, тому ваш сайт не повинен використовувати цю валідацію для будь-яких безпекових потреб. Ви повинні перевірити 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. Мінімальну довжину такого номера в символах можна задати за допомогою атрибута minlength; аналогічно, для задання максимальної довжини введеного URL – maxlength. Якщо maxLength перевищує size, то вміст поля за потреби прокручуватиметься, щоб показати при взаємодії з полем поточний вибір або точку вставки.

Приклад нижче створює поле введення URL 30 символів завширшки, що вимагає, аби вміст не був коротшим за 10 символів або довшим за 80 символів.

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

[!NOTE] Ці атрибути також впливають на валідацію; значення, коротші або довші за заданий мінімум чи максимум довжини, вважатимуться недійсними; на додачу до цього, більшість браузерів не дасть ввести значення, довше за задану максимальну довжину.

Задання усталених варіантів

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

Як завжди, можна задати усталене значення для поля url – шляхом задання його атрибута value:

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

Пропонування значень

Іще краще: можна запропонувати список з усталених значень номерів телефонів, серед яких користувач може обрати, задавши атрибут list. Це не обмежує користувача такими варіантами, а й так само дозволяє їм обрати найчастіше вживані номери телефонів швидше. Також це надає підказку для 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://webdoky.org/" label="ВебДоки"></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. Але також є можливість додати додатковий фільтр, щоб переконатися, що виконуються власні спеціальні потреби, якщо такі є.

[!WARNING] Валідація форм HTML не є заміною серверних сценаріїв, що пересвідчуються в тому, що введені дані мають коректний формат.Занадто легко підлаштувати HTML, щоб обійти валідацію, або навіть геть її прибрати. Також можна обійти HTML взагалі, й подавати дані безпосередньо на сервер. Якщо ваш код на серверному боці не може валідувати дані, котрі отримує, то може статись лихо, коли в вашу базу даних введуть некоректно відформатовані дані (або завеликі дані, дані не того типу, і так далі).

Базова валідація

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

Синтаксис URL – досить складна річ. Він визначений у стандарті WHATWG Живий стандарт URL, а для новачків описаний у статті Що таке URL?

Обов'язковість URL

Як згадувалося раніше, щоб зробити поле URL обов'язковим для заповнення перед тим, як форму можна буде подати (щоб не можна було залишити поле порожнім), потрібно просто додати атрибут required до поля вводу.

<form>
  <input id="myURL" name="myURL" type="url" required />
  <button>Подати</button>
</form>

Спробуйте подати форму з порожнім полем, щоб побачити, що станеться.

Валідація за патерном

За потреби обмежити URL додатково, крім того, щоб він "мав вигляд URL", можна використати атрибут pattern, щоб вказати регулярний вираз, якому має відповідати значення, щоб воно було дійсним.

Наприклад, скажімо, ви розробляєте сторінку підтримки для співробітників ТОВ "МуКо", яка дозволяє їм звернутися до відділу ІТ за допомогою, якщо одна з інших сторінок має проблему. У нашій спрощеній формі користувачеві потрібно ввести URL сторінки, яка має проблему, і повідомлення, що описує, що саме не так. Але ми хочемо, щоб URL успішно валідувався лише тоді, коли введений URL знаходиться в домені МуКо.

Оскільки поля типу url валідуються як за стандартними правилами валідації URL, так і за вказаним pattern, ви можете реалізувати це за допомогою регулярного виразу. Подивіться, як:

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;
}

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

<form>
  <div>
    <label for="myURL">Введіть адресу проблеми на вебсайті:</label>
    <input
      id="myURL"
      name="myURL"
      type="url"
      required
      pattern=".*\.muko\..*"
      title="URL повинен бути в домені МуКо (muko)" />
    <span class="validity"></span>
  </div>
  <div>
    <label for="myComment">В чому проблема?</label>
    <input id="myComment" name="myComment" type="text" required />
    <span class="validity"></span>
  </div>
  <div>
    <button>Надіслати</button>
  </div>
</form>

Перш за все, вказано атрибут required, що робить обов'язковим введення дійсного URL.

По-друге, в полі url задано атрибут pattern зі значенням ".*\.muko\..*". Цей регулярний вираз вимагає рядок, що містить будь-яку кількість символів, після яких – крапка, далі – "muko", далі – крапка, після якої – будь-яка кількість символів. Завдяки тому, що браузер запускає і стандартний фільтр URL, і наш власний патерн щодо вказаного тексту, виходить валідація, яка каже "переконайтеся, що це дійсний URL, і що він в домені МуКо".

Це не ідеально, але достатньо добре для потреб цієї базової демонстрації.

Бажано використовувати вкупі з атрибутом pattern атрибут title. Якщо він є, то title повинен описувати патерн; він повинен описувати те, в якому форматі повинні бути дані, а не будь-яку іншу інформацію. Це пов'язано з тим, що title може бути відображений або вимовлений як частина повідомлення про помилку валідації. Наприклад, браузер може показати повідомлення "Введений текст не відповідає вимогам патерну." і далі – ваш title. Якщо ваш title – це щось на зразок "URL", то результатом буде повідомлення "Введений текст не відповідає вимогам патерну. URL", що не є добрим користувацьким досвідом.

Саме тому замість цього ми вказуємо рядок "URL повинен бути в домені МуКо (muko)". Це дозволяє отримати повідомлення про помилку на зразок "Введений текст не відповідає вимогам патерну. URL повинен бути в домені МуКо (muko)".

[!NOTE] Якщо ви зіткнулися з проблемами під час написання регулярних виразів для валідації, і вони не працюють належним чином, перевірте консоль браузера; там можуть бути корисні повідомлення про помилки, які допоможуть розв'язати проблему.

Приклади

Не так багато що іще можна сказати про поля типу url; пошукайте декілька прикладів у розділах Валідація за патерном та Застосування полів URL.

Також можете знайти наш приклад валідації за патерном на GitHub (дивіться його також у дії).

Технічний підсумок

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

Сумісність із браузерами

Дивіться також

• Посібник з форм HTML
• <input>
• <input type="tel">
• <input type="email">
• Сумісність властивостей CSS