Урок. HTML Input Attributes. Атрибути вводу

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



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

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

Приклад:

<form action="">
  First name:<br>
  <input type="text" name="firstname" value="John">
</form>
Спробуйте самі! »

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

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

Приклад:

<form action="">
  First name:<br>
  <input type="text" name="firstname" value="John" readonly>
</form>
Спробуйте самі! »

Атрибут disabled (вимкнено)

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

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

Приклад:

<form action="">
  First name:<br>
  <input type="text" name="firstname" value="John" disabled>
</form>
Спробуйте самі! »

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

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

Приклад:

<form action="">
  First name:<br>
  <input type="text" name="firstname" value="John" size="40">
</form>
Спробуйте самі! »

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

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

Приклад:

<form action="">
  First name:<br>
  <input type="text" name="firstname" maxlength="10">
</form>
Спробуйте самі! »

За допомогою атрибута maxlength поле вводу не буде приймати більше допустимого числа символів.

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

Примітка: Обмеження на вхідні дані не є надійними, а JavaScript надає безліч способів здійснити незаконний вхід. Щоб безпечно обмежити ввод, він також повинен бути перевірений приймаючою стороною (сервером)!


HTML5 Атрибути

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

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


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

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

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

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

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

Opera Safari Chrome Firefox Internet Explorer

Приклад:

Форма HTML з автозаповненням (і без автозаповнення для одного поля вводу):

<form action="/action_page.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>
Спробуйте самі! »

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


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

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

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

Opera Safari Chrome Firefox Internet Explorer

Приклад:

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

<form action="/action_page.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>
Спробуйте самі! »

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

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

Opera Safari Chrome Firefox Internet Explorer

Приклад:

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

First name:<input type="text" name="fname" autofocus>
Спробуйте самі! »

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

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

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

Opera Safari Chrome Firefox Internet Explorer

Приклад:

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

<form action="/action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">
Спробуйте самі! »

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

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

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

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

Opera Safari Chrome Firefox Internet Explorer

Приклад:

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

<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="/action_page2.php"
  value="Submit as admin"
>

</form>
Спробуйте самі! »

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

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

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

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

Opera Safari Chrome Firefox Internet Explorer

Приклад:

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

<form action="/action_page_binary.asp" method="post">
  First name: <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.

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

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

Opera Safari Chrome Firefox Internet Explorer

Приклад:

Друга кнопка submit замінює метод HTTP форми::

<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <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".

Opera Safari Chrome Firefox Internet Explorer

Приклад:

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

<form action="/action_page.php">
  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".

Opera Safari Chrome Firefox Internet Explorer

Приклад:

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

<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank"
  value="Submit to a new window"
>

</form>
Спробуйте самі! »

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

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

Завжди вказуйте розмір зображень. Якщо веб-браузер не знає розміру, сторінка буде миготіти під час завантаження зображень.

Opera Safari Chrome Firefox Internet Explorer

Приклад:

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

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
Спробуйте самі! »

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

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

Opera Safari Chrome Firefox Internet Explorer

Приклад:

Елемент <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 працюють з такими типами input: number, range, date, datetime-local, month, time та week.

Opera Safari Chrome Firefox Internet Explorer

Приклад:

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

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
Спробуйте самі! »

Атрибут multiple (кілька значень)

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

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

Opera Safari Chrome Firefox Internet Explorer

Приклад:

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

Select images: <input type="file" name="img" multiple>
Спробуйте самі! »

Атрибут pattern (шаблон)

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

Атрибут pattern працює з таким типами input: text, search, url, tel, email та password.

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

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

Opera Safari Chrome Firefox Internet Explorer

Приклад:

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

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
Спробуйте самі! »

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

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

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

Атрибут placeholder працює з такими типами input: text, search, url, tel, email та password.

Opera Safari Chrome Firefox Internet Explorer

Приклад:

Поле вводу з текстом placeholder:

<input type="text" name="fname" placeholder="First name">
Спробуйте самі! »

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

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

Атрибут required працює з такими типами input: text, search, url, tel, email, password, date pickers, number, checkbox, radio та file.

Opera Safari Chrome Firefox Internet Explorer

Приклад:

Поле вводу required:

Username: <input type="text" name="usrname" required>
Спробуйте самі! »

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

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

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

Порада: Атрибут step можна використовувати разом з атрибутами max і min, щоб створити діапазон дійсних значень.

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

Opera Safari Chrome Firefox Internet Explorer

Приклад:

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

<input type="number" name="points" step="3">
Спробуйте самі! »

Перевірте себе вправами!


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

Тег Опис
<form> Визначає HTML форму для вводу користувачем
<input> Визначає елемент управління вводом

Примітка: Для отримання повного списку всіх доступних HTML тегів, відвідайте довідник HTML тегів.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.