<input type="text">

Елементи <input> типу text створюють базові однорядкові текстові поля.

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

Значення

Атрибут value – це рядок, що містить поточне значення тексту, введеного в текстове поле. Його можна отримати в JavaScript за допомогою властивості HTMLInputElement value.

let theText = myTextInput.value;

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

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

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

list

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

maxlength

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

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

minlength

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

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

pattern

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

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

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

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

placeholder

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

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

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

readonly

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

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

size

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

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

spellcheck

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

false

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

true

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

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

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

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

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

Нестандартні атрибути

Пошуковим полям введення доступні наступні нестандартні атрибути. Як правило, слід уникати їх використання, якщо це можливо.

autocorrect

Атрибут autocorrect, розширення Safari, це рядок, що позначає вмикання автоматичного виправлення при редагуванні поля користувачем. Дозволені значення:

on

Ввімкнути автоматичне виправлення хибодруків, а також обробку текстових замін, якщо вони налаштовані.

off

Вимкнути автоматичне виправлення та текстові заміни.

Застосування текстових полів

Елементи <input> типу text утворюють базові однорядкові поля. Їх слід використовувати всюди, де необхідно, аби користувачі вводили однорядкові значення, і де немає більш специфічного типу поля для збору таких значень (наприклад, якщо це дата, URL, електронна пошта чи пошуковий запит, то доступні кращі варіанти).

Базовий приклад

<form>
  <div>
    <label for="uname">Оберіть ім'я користувача: </label>
    <input type="text" id="uname" name="name" />
  </div>
  <div>
    <button>Подати</button>
  </div>
</form>

Це візуалізується так:

При поданні пара даних ім'я-значення буде name=Chris (якщо перед поданням як значення поля було введено "Chris"). Необхідно завжди пам'ятати додавати до елемента <input> атрибут name: інакше значення текстового поля не буде включено в подані дані.

Задання заповнювачів

Всередині текстового поля можна дати змістовний заповнювач, котрий служитиме підказкою щодо того, що з полем робити, за допомогою атрибута placeholder. Погляньте на наступний приклад:

<form>
  <div>
    <label for="uname">Оберіть ім'я користувача: </label>
    <input
      type="text"
      id="uname"
      name="name"
      placeholder="Малими літерами, одним словом" />
  </div>
  <div>
    <button>Подати</button>
  </div>
</form>

Те, як візуалізується заповнювач, – нижче:

Зазвичай заповнювач візуалізується світлішим кольором за головний колір елемента, і автоматично зникає, коли користувач починає вводити в поле текст (або тоді, коли поле отримує значення програмно – шляхом задання його атрибута value).

Фізичний розмір елемента введення

Фізичний розмір поля введення можна контролювати за допомогою атрибута size. Так можна задавати число символів, котре водночас може показувати поле. Це впливає на ширину елемента, даючи змогу задати ширину в символах, а не в пікселях. У цьому прикладі, скажімо, пошукове поле – 30 символів завширшки:

<form>
  <div>
    <label for="uname">Оберіть ім'я користувача: </label>
    <input
      type="text"
      id="uname"
      name="name"
      placeholder="Малими літерами, одним словом"
      size="30" />
  </div>
  <div>
    <button>Подати</button>
  </div>
</form>

Валідація

Елементи <input> типу text не отримують автоматичної валідації (адже базове текстове поле повинно мати змогу приймати будь-які рядки), однак доступні певні варіанти клієнтської валідації, описані нижче.

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

Примітка щодо оформлення

Існують корисні псевдокласи, доступні для оформлення елементів форми, щоб допомагати користувачам бачити, чи є їхні значення дійсними, чи недійсними. Це :valid та :invalid. У цьому розділі використовується наступний CSS, що розташовує позначку (галку) після полів, що містять дійсні значення, та хрестик (Х) після полів, що містять недійсні.

div {
  margin-bottom: 10px;
  position: relative;
}

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

Ця техніка також вимагає розташування після елемента форми елемента <span>, що працює як тримач піктограм. Це необхідно, тому що частина типів полів у певних браузерах не показує піктограм, розташованих зразу після них, достатньо добре.

Обов'язковість заповнення поля

Атрибут required можна використати як легкий спосіб зробити введення значення в поле обов'язковим перед дозволом на подання:

<form>
  <div>
    <label for="uname">Оберіть ім'я користувача: </label>
    <input type="text" id="uname" name="name" required />
    <span class="validity"></span>
  </div>
  <div>
    <button>Подати</button>
  </div>
</form>

Це візуалізується так:

Якщо спробувати подати форму, в яку не введено пошуковий запит, то браузер покаже повідомлення про помилку.

Довжина значення поля

Мінімальну довжину (в символах) уведеного значення можна задати за допомогою атрибута minlength; подібно до цього – є maxlength для задання максимальної довжини, так само в символах.

Приклад нижче вимагає, щоб уведене значення було 4-8 символів завдовжки.

<form>
  <div>
    <label for="uname">Оберіть ім'я користувача: </label>
    <input
      type="text"
      id="uname"
      name="name"
      required
      size="10"
      placeholder="Ім'я користувача"
      minlength="4"
      maxlength="8" />
    <span class="validity"></span>
  </div>
  <div>
    <button>Подати</button>
  </div>
</form>

Це візуалізується так:

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

[!NOTE] Якщо задати minlength, але не задати required, то поле вважається дійсним, адже користувач не зобов'язаний задавати значення.

Задання патерну

Для задання регулярного виразу, котрому повинно відповідати введене значення, аби вважатися дійсним, можна використати атрибут pattern (дивіться простий експрес-курс використання регулярних виразів для валідування введення у Валідуванні за регулярним виразом).

Приклад нижче обмежує значення 4-8 символами та вимагає, щоб воно містило лише малі літери.

<form>
  <div>
    <label for="uname">Оберіть ім'я користувача</label>
    <input
      type="text"
      id="uname"
      name="name"
      required
      size="45"
      pattern="[a-z]{4,8}" />
    <span class="validity"></span>
    <p>
      Імена користувачів повинні складатися з малих літер та бути 4-8 символів
      завдовжки.
    </p>
  </div>
  <div>
    <button>Подати</button>
  </div>
</form>

Це візуалізується так:

Приклади

Добрі приклади текстових полів, використаних в контексті, можна побачити в наших статтях Ваша перша форма HTML та Як впорядкувати форму HTML.

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

Значення Рядок, що представляє текст, вміщений в текстовому полі.
Події change та input
Доступні спільні атрибути autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required і size
Атрибути IDL list, value
Інтерфейс DOM

HTMLInputElement
Методи select(), setRangeText() і setSelectionRange().
Неявна роль ARIA без атрибута list: textbox з атрибутом list: combobox

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

Специфікація
HTML Standard (HTML)
# text-(type=text)-state-and-search-state-(type=search)

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

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
type="text"
Chrome Full support 1
 Edge Full support 12
 Firefox Full support 1
 Internet Explorer Full support Так
 Opera Full support Так
 Safari Full support 1
 WebView Android Full support Так
 Chrome Android Full support Так
 Firefox for Android Full support 4
 Opera Android Full support Так
 Safari on iOS Full support Так
 Samsung Internet Full support Так

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

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.