Атрибут disabled тега <input> — неактивне поле
Атрибут disabled являється логічним атрибутом і вказує, що елемент має бути відключеним (недоступним для взаємодії з користувачами). Атрибут використовують разом зі скриптами, наприклад, поки яка-небудь умова не виконана елемент неактивний. Потім, JavaScript може видалити значення disabled , і зробити елемент <input> придатним до використання.
Відключений елемент відображається сірим кольором і стає недоступним для користувача.
Крім того, таке поле не може отримати фокус шляхом натискання на клавішу Tab, мишею або іншим способом.
автор: с3с
Загальний опис
автор: NagarD
- Нотатка
-
Відключені
автор: с3с<input>елементи в формі не будуть відправлені на сервер.
Синтаксис
<input type="..." disabled>Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | ≤12.1 | 12 | 5.5 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута disabled теґа <input>
HTML
<form>
<p><b> Виберіть кого зареєструвати компанію чи користувача?</b></p>
Користувач <input type = "radio" id="myButton" name = "sex"value = "female" ><br><br>
Ваше ім'я: <input type="text" id="myTextBox" name="fname" disabled=""><br><br>
Прізвище: <input type="text" id="myText" name="text" disabled="" /><br><br>
<input type="submit" value="Надіслати"><br> <br>
Компанія <input type = "radio" id="Button" name = "sex"value = "male" ><br><br>
Ім'я власника: <input type="text" id="Name" name="fname" disabled=""><br><br>
Назва компанії: <input type="text" id="Company" name="text" disabled="" /><br>
<br>
<input type="submit" value="Надіслати">
</form>JS
document.getElementById('myButton').onclick = function () {
document.getElementById('Name').disabled = true;
document.getElementById('Company').disabled = true;
document.getElementById('myTextBox').disabled = false;
document.getElementById('myText').disabled = false;
};
document.getElementById('Button').onclick = function () {
document.getElementById('Name').disabled = false;
document.getElementById('Company').disabled = false;
document.getElementById('myTextBox').disabled = true;
document.getElementById('myText').disabled = true;
};
//# sourceURL=pen.jsНайпростіший приклад використання HTML атрибута disabled теґа <input>
<form>
<p><b>З використанням атрибуту "disabled"</b></p>
<p><b>Вкажіть свої дані:</b></p>
Ваше ім'я: <input type="text" name="fname" disabled=""><br><br>
Повідомлення: <input type="text" name="text" disabled="" /><br>
Чоловік <input type = "radio" name = "sex"value = "male" checked disabled=""><br>
Жінка <input type = "radio" name = "sex"value = "female" disabled=""> <br> <br>
<input type="submit" value="Надіслати" disabled="">
</form>
<br>
<form>
<p><b>Бе використання атрибуту "disabled"</b></p>
<p><b>Вкажіть свої дані:</b></p>
Ваше ім'я: <input type="text" name="fname"><br><br>
Повідомлення: <input type="text" name="text"/><br>
Чоловік <input type = "radio" name = "sex"value = "male" checked><br>
Жінка <input type = "radio" name = "sex"value = "female"> <br> <br>
<input type="submit" value="Надіслати">
</form>Один disabled на <fieldset> вимикає всю групу разом — на самих полях у правій формі атрибута немає. Вигляд вимкненого задає селектор :disabled.
HTML
<div class="pair">
<fieldset>
<legend>Звичайна група</legend>
<label>Ім'я <input value="Олена"></label>
<label>Місто <select><option>Київ</option><option>Львів</option></select></label>
<label><input type="checkbox" checked> Отримувати листи</label>
<button type="button">Надіслати</button>
</fieldset>
<fieldset disabled>
<legend>Група з disabled</legend>
<label>Ім'я <input value="Олена"></label>
<label>Місто <select><option>Київ</option><option>Львів</option></select></label>
<label><input type="checkbox" checked> Отримувати листи</label>
<button type="button">Надіслати</button>
</fieldset>
</div>CSS
.pair { display: flex; gap: 16px; flex-wrap: wrap; }
fieldset { border: 1px solid #ccc; border-radius: 6px; padding: 10px 12px; min-width: 215px; }
legend { font-size: 13px; color: #555; }
label { display: block; margin-bottom: 8px; }
input:disabled, select:disabled, button:disabled {
background: #f2f2f2;
color: #8a8a8a;
cursor: not-allowed;
}
fieldset:disabled legend { color: #aaa; }Різниця між HTML 4.01 та HTML5
Немає жодної різниці.
Коментарі
Коментарів ще немає — будьте першим!