Атрибут disabled тега <button> — неактивна кнопка
Атрибут disabled відключає кнопку. У відключеному стані кнопка відображається сірим кольором і її не можна натиснути.
Відключена кнопка не може отримати фокус шляхом натискання на клавішу Tab, мишею або іншим способом.
Атрибут disabled зазвичай встановлюється, щоб вберегти користувача від натискання кнопки до тих пір, доки деяка інша умова не буде виконана (наприклад, поки не вибраний прапорець і т.д.). Це робиться за допомогою JavaScript.
Атрибут disabled являється логічним атрибутом.
Значення заблокованої кнопки не передається на сервер.
автор: с3с
Загальний опис
автор: NagarD
Синтаксис
<button disabled>Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | ≤4 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | ≤3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута disabled теґа <button>.
<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><br>
<button disabled="">Надіслати</button>
</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><br>
<button>Надіслати</button>
</form>Найпростіший приклад використання HTML атрибута disabled теґа <button>.
HTML
<form>
<p><b>Використання атрибуту "disabled"</b></p>
Введіть своє ім'я, щоб відправити форму: <br><br>
<input type="text" id="txt" onkeyup="manage(this)" /><br><br>
<button id="btSubmit" disabled> Надіслати</button>
</form>JS
function manage(txt) {
var bt = document.getElementById('btSubmit');
if (txt.value != '') {
bt.disabled = false;
} else
{
bt.disabled = true;
}
}
//# sourceURL=pen.jsdisabled="false" теж вимикає, а підказка працює лише на обгортці
HTML
<form>
<p><button type="button">Звичайна кнопка</button></p>
<p><button type="button" disabled>Атрибут <code>disabled</code> — вимкнена</button></p>
<p><button type="button" disabled="false"><code>disabled="false"</code> — теж вимкнена!</button></p>
<p>
<span class="obhortka" title="Спершу заповніть форму">
<button type="button" disabled>Наведіть — підказка з обгортки</button>
</span>
<button type="button" disabled title="Ця підказка не з'явиться">Наведіть — тут підказки не буде</button>
</p>
<fieldset disabled>
<legend><code>fieldset disabled</code> вимикає все всередині</legend>
<p><input type="text" value="поле"> <button type="button">Кнопка</button></p>
</fieldset>
</form>CSS
button {
font: inherit;
padding: 6px 12px;
border: 1px solid #0172ad;
border-radius: 4px;
background: #0172ad;
color: #fff;
}
button:enabled:hover {
background: #015b8a;
cursor: pointer;
}
button:disabled {
border-color: #c4c4c4;
background: #ededed;
color: #8a8a8a;
}
.obhortka {
display: inline-block;
cursor: help;
}
fieldset {
margin-top: 12px;
border: 1px solid #d0d0d0;
border-radius: 4px;
}
input:disabled {
background: #ededed;
color: #8a8a8a;
}Різниця між XHTML та HTML
У XHTML мінімізований запис атрибутів заборонений, атрибут disabled повинен бути визначений як <button disabled="disabled">.
Коментарі
Коментарів ще немає — будьте першим!