Елемент HTML <input> дозволяє створювати різноманітні елементи форми для збору даних користувача. Ви можете налаштовувати поведінку та вигляд цих елементів за допомогою різних атрибутів. Розглянемо деякі з найбільш поширених атрибутів:

value

Атрибут value використовується для встановлення початкового значення елемента <input>. Конкретне значення залежить від типу поля введення:

• Для кнопок (type="button", type="reset", type="submit") визначає текст, що відображається на кнопці;

• Для текстових (type="text") і парольних (type="password") полів визначає значення за замовчуванням;

• Для прапорців (type="checkbox") і перемикачів (type="radio") визначає значення, пов'язане з елементом введення.

Note

Атрибут value не можна використовувати з <input type="file">.

autofocus

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

Примітка

Атрибут autofocus не працює тут, оскільки сторінка не перезавантажується при натисканні кнопки "Run Code".

required

Атрибут required використовується для того, щоб зробити поле введення обов'язковим для заповнення. Він вказує, що це поле повинно бути заповнене перед відправкою форми. Якщо користувач спробує відправити форму без заповнення обов'язкового поля, з'явиться повідомлення про помилку валідації, яке вказує, що це поле є обов'язковим.

placeholder

Атрибут placeholder надає підказку або приклад очікуваного значення для користувача. Короткий текст відображається всередині поля вводу до того, як користувач введе будь-яке значення. Це корисно для полів, які потребують певного формату, наприклад, номер телефону або кредитної картки.

Примітка

У наведених вище прикладах використано різні атрибути type для елементів <input>, що суттєво впливає на їхній вигляд і функціональність. У наступному розділі ви детальніше ознайомитеся з різними типами полів введення.