HTML Атрибути введення

У цьому розділі описано різні атрибути для елемента HTML <input>.

Атрибут value (значення)

Атрибут value задає початкове значення для поля введення:

Атрибут readonly (тільки для читання)

Атрибут readonly вказує, що поле введення доступне тільки для читання (не може бути змінено):

Атрибут disabled (відключено)

Атрибут disabled вказує, що поле введення відключено.

Відключене поле введення не можна використовувати та не можна клікнути мишею, і його значення не буде відправлено при надсиланні форми:

Атрибут size (розмір)

Атрибут size визначає розмір (в символах) для поля введення:

Атрибут maxlength (максимальна довжина)

Атрибут maxlength задає максимально допустиму довжину для поля введення:

З атрибутом maxlength поле введення не буде приймати більше, ніж допустиму кількість символів.

Атрибут maxlength не надає ніякого зворотного зв’язку. Якщо ви хочете попередити користувача, ви повинні написати код JavaScript.

HTML5 Атрибути

HTML5 додав наступні атрибути для <input>:

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list
• min and max
• multiple
• pattern (regexp)
• placeholder
• required
• step

і наступні атрибути для <form>:

• autocomplete
• novalidate

Атрибут autocomplete (автозаповнення)

Атрибут autocomplete вказує, чи буде автозаповнення форми або поля введення увімкнене.

Коли автозаповнення включено, браузер автоматично завершує введення значень на основі значень, які користувач ввів раніше.

Порада: Можна включити автозаповнення для форми "on" і вимкнути "off" для певних полів введення, або навпаки.

Атрибут autocomplete працює з <form> і наступними типами <input>: text, search, url, tel, email, password, datepickers, range і color.

Приклад

HTML-форма з автозаповненням (і вимкненим для одного поля введення):

<form action="/action_page.html" autocomplete="on">
 Ім’я:<input type="text" name="fname"><br>
 Прізвище: <input type="text" name="lname"><br>
 E-mail: <input type="email" name="email" autocomplete="off"><br>
 <input type="submit">
</form>

Спробуйте самі »

Підказка: У деяких браузерах вам може знадобитися активувати функцію автозаповнення, щоб це працювало.

Атрибут novalidate (не перевіряти)

Атрибут novalidate є атрибутом <form>.

При наявності novalidate вказує, що дані форми не повинні перевірятися при надсиланні.

Приклад

Вказує, що форма не підлягає перевірці при надсиланні:

<form action="/action_page.html" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

Спробуйте самі »

Атрибут autofocus (автофокус)

Атрибут autofocus вказує, що поле введення повинно автоматично сфокусуватися при завантаженні сторінки.

Приклад

Нехай поле введення "Ім’я" автоматично отримає фокус при завантаженні сторінки:

Ім’я:<input type="text" name="fname" autofocus>

Спробуйте самі »

Атрибут form (форма)

Атрибут form атрибут визначає одну або декілька форм, до яких належить елемент <input>.

Приклад

Поле введення, розташоване за межами форми HTML (але все ще частина форми):

<form action="/action_page.html" id="form1">
 Ім’я: <input type="text" name="fname"><br>
 <input type="submit" value="Submit">
</form>

Прізвище: <input type="text" name="lname" form="form1">

Спробуйте самі »

Атрибут formaction (формування)

Атрибут formaction вказує URL-адресу файлу, який буде обробляти елемент управління введенням при надсиланні форми.

Атрибут formaction перевизначає атрибут action елементу <form>.

Атрибут formaction використовується з type="submit" та type="image".

Приклад

HTML-форма з двома кнопками надсилання, з різними діями:

<form action="/action_page.html">
 Ім’я: <input type="text" name="fname"><br>
 Прізвище: <input type="text" name="lname"><br>
 <input type="submit" value="Submit"><br>
 <input type="submit" formaction="/action_page2.html"
  value="Submit as admin">
</form>

Спробуйте самі »

Атрибут formenctype (форментип)

Атрибут formenctype визначає, як дані форми повинні бути закодовані при надсиланні (тільки для форм з method="post").

Атрибут formenctype перевизначає атрибут enctype елемента <form>.

Атрибут formenctype використовується з type="submit" та type="image".

Приклад

Надіслати дані форми, які закодовані за замовчуванням (перша кнопка надсилання) і закодовані як "multipart/form-data" (друга кнопка надсилання):

<form action="/action_page_binary.asp" method="post">
 Ім’я: <input type="text" name="fname"><br>
 <input type="submit" value="Submit">
 <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

Спробуйте самі »

Атрибут formmethod (метод форми)

Атрибут formmethod визначає метод HTTP для надсилання даних форми на URL action.

Атрибут formmethod перевизначає атрибут метода елемента <form>.

Атрибут formmethod може бути використаний з type="submit" та type="image".

Приклад

Друга кнопка надсилання перевизначає HTTP-метод форми:

<form action="/action_page.html" method="get">
 Ім’я: <input type="text" name="fname"><br>
 Прізвище: <input type="text" name="lname"><br>
 <input type="submit" value="Submit">
 <input type="submit" formmethod="post" value="Submit using POST">
</form>

Спробуйте самі »

Атрибут formnovalidate (форма не перевіряється)

Атрибут formnovalidate перевизначає атрибут novalidate елемента <form>.

Атрибут formnovalidate може бути використаний з type="submit".

Приклад

Форма з двома кнопками надсилання (з перевіркою і без перевірки):

<form action="/action_page.html">
 E-mail: <input type="email" name="userid"><br>
 <input type="submit" value="Submit"><br>
 <input type="submit" formnovalidate value="Submit without validation">
</form>

Спробуйте самі »

Атрибут formtarget (ціль форми)

Атрибут formtarget визначає ім’я або ключове слово, яке вказує, де відображати відповідь, отриману після надсилання форми.

Атрибут formtarget перевизначає цільовий атрибут елемента <form>.

Атрибут formtarget може бути використаний з type="submit" і type="image".

Приклад

Форма з двома кнопками надсилання, з різними цільовими вікнами:

<form action="/action_page.html">
 Ім’я: <input type="text" name="fname"><br>
  Прізвище: <input type="text" name="lname"><br>
  <input type="submit" value="Надіслати як зазвичай">
  <input type="submit" formtarget="_blank"
  value="Надіслати в новому вікні">
</form>

Спробуйте самі »

Атрибути height та width (висота і ширина)

Атрибути height і width визначають висоту і ширину елемента <input type="image">.

Приклад

Визначте зображення як кнопку надсилання з атрибутами висоти та ширини:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Спробуйте самі »

Атрибут list (список)

Атрибут list відноситься до елементу <datalist>, який містить попередньо визначені параметри для елемента <input>.

Приклад

Елемент <input> з попередньо визначеними значеннями в <datalist>:

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Спробуйте самі »

Атрибути min і max (мінімум і максимум)

Атрибути min і max визначають мінімальні та максимальні значення для елемента <input>.

Атрибути min і max працюють з наступними типами введення: number, range, date, datetime-local, month, time та week.

Приклад

<input> елементи зі значеннями min та max:

Введіть дату раніше 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Введіть дату після 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Кількість (від 1 до 5):
<input type="number" name="quantity" min="1" max="5">

Спробуйте самі »

Атрибут multiple (множинні)

Атрибут multiple вказує, що користувачеві дозволено вводити більше одного значення в елементі <input>.

Атрибут multiple працює з наступними типами введення: email та file.

Приклад

Поле завантаження файлу, яке приймає кілька значень:

Оберіть зображення: <input type="file" name="img" multiple>

Спробуйте самі »

Атрибут pattern (паттерн)

Атрибут pattern визначає регулярний вираз, з яким перевіряється значення елемента <input>.

Атрибут pattern працює з наступними типами введення: text, search, url, tel, email и password.

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

Порада: Дізнайтесь більше про регулярні вирази в JavaScript підручнику на нашому сайті W3Schools українською.

Приклад

Поле введення, яке може містити тільки три букви (без цифри або спеціальні символи):

Код країни: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Трибуквенний код країни">

Спробуйте самі »

Атрибут placeholder (заповнювач)

Атрибут placeholder вказує підказку, яка описує очікуване значення поля введення (приблизне значення або короткий опис формату).

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

Атрибут placeholder працює з наступними типами введення: text, search, url, tel, email та password.

Приклад

Поле введення з заповнювачем тексту:

<input type="text" name="fname" placeholder="Ім’я">

Спробуйте самі »

Атрибут required (вимога)

Атрибут required вказує, що поле введення повинно бути заповнене перед відправкою форми.

Атрибут required працює з наступними типами введення: text, search, url, tel, email, password, date pickers, number, checkbox, radio та file.

Приклад

Обов’язкове поле введення:

Ім’я користувача: <input type="text" name="usrname" required>

Спробуйте самі »

Атрибут step (крок)

Атрибут step визначає допустимі інтервали чисел (кроки) для елемента <input>.

Приклад: якщо step="3", то допустимими числами можуть бути -3, 0, 3, 6 і т.д.

Атрибут step працює з наступними типами введення: number, range, date, datetime-local, month, time та week.

Приклад

Поле введення із вказаними допустимими числами інтервалів:

<input type="number" name="points" step="3">

Спробуйте самі »

HTML Вправи

HTML форма та елементи введення