Атрибути Елементу Input

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

value

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

• Для кнопок (type="button", type="reset", type="submit") він визначає текст, що відображається на кнопці;
• Для текстових полів (type="text") і полів введення пароля (type="password") визначає значення за замовчуванням;
• Для checkbox (type="checkbox") та radio (type="radio") він визначає значення, пов'язане з введенням.

Примітка

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

Приклад:

autofocus

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

Приклад:

required

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

Приклад:

placeholder

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

Приклад:

Примітка

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