Атрибут disabled тега <keygen> — вимкнути генератор ключа
автор: NagarD
Загальний опис
автор: NagarD
Синтаксис
<keygen disabled>
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| 1 | 1 | 6.0 | 1 | 0 |
Мобільних переглядачів ще не додано.
Приклади
+ запропонувати свій приклад у пісочниці
<keygen> вилучено з браузерів — елемент не рендериться взагалі, тож і його disabled показати нічим (між полем і кнопкою порожньо). У живих елементів форм disabled працює як у <input>.
<form>
<p><label>Логін: <input type="text" name="usr_name"></label></p>
<p>Шифрування: <keygen name="security" disabled></p>
<p><input type="submit" value="Надіслати"></p>
</form>
Перший блок містить справжній <keygen disabled> — і на екрані від нього немає нічого: ні рамки, ні поля, хоча в стилях є спроба його намалювати. Другий показує робочі вимкнені поля. Третій вимикає цілу групу одним атрибутом на <fieldset>. Четвертий — про різницю селекторів: [disabled] фарбує навіть звичайний текст, а :disabled — лише те, що справді вимкнено.
HTML
<p class="head bad">1. Справжній keygen із disabled — на екрані нічого</p>
<form>
<keygen name="klyuch" disabled keytype="rsa">
<span class="poznachka">↑ між цим підписом і попереднім стоїть keygen. Не видно нічого.</span>
</form>
<p class="head good">2. Робочі вимкнені поля</p>
<form class="ryad">
<input type="text" value="звичайне поле">
<input type="text" value="вимкнене поле" disabled>
<button type="button">кнопка</button>
<button type="button" disabled>вимкнена кнопка</button>
</form>
<p class="head good">3. Ціла група одним атрибутом на fieldset</p>
<fieldset disabled>
<legend>Доставка (вимкнено цілком)</legend>
<label><input type="radio" name="d" checked> самовивіз</label>
<label><input type="radio" name="d"> кур'єр</label>
<input type="text" value="адреса">
</fieldset>
<p class="head">4. Два селектори, які легко переплутати</p>
<p><span disabled>Звичайний span з атрибутом disabled</span> —
його ловить [disabled], хоча вимкнути span неможливо.</p>
<p><input type="text" value="а це справді вимкнено" disabled> — його ловлять обидва.</p>
CSS
.head {
margin: 20px 0 8px;
font: 600 14px/1.4 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
color: #5a6472;
}
.head.bad {
color: #c0392b;
}
.head.good {
color: #1b5e20;
}
/* Не спрацює: keygen — невідомий елемент із порожньою коробкою. */
keygen {
display: inline-block;
width: 220px;
height: 34px;
border: 2px solid #d64545;
background: #fff4f4;
}
.poznachka {
color: #c0392b;
font-size: .85em;
}
.ryad {
display: flex;
flex-wrap: wrap;
gap: 8px;
max-width: 520px;
}
input,
button {
padding: 5px 8px;
font: inherit;
font-size: .9em;
}
fieldset {
max-width: 420px;
padding: 10px 12px;
border: 1px solid #b9c6d8;
border-radius: 6px;
}
legend {
padding: 0 6px;
font-size: .9em;
font-weight: 600;
}
fieldset label {
display: inline-block;
margin-right: 12px;
font-size: .9em;
}
/* Ловить будь-що з атрибутом — навіть те, чого вимкнути не можна. */
[disabled] {
outline: 2px dashed #e0a800;
outline-offset: 2px;
}
/* Ловить лише справді вимкнені елементи керування. */
:disabled {
background: #f4f5f7;
color: #8a8f98;
}
p {
max-width: 520px;
font-size: .9em;
line-height: 1.7;
}
Різниця між HTML 4.01 та HTML5
Атрибут <keygen> є новим у HTML5.
Різниця між XHTML та HTML
У XHTMLмінімізований запис атрибутів заборонено, тому атрибут disabled повинен бути визначений як <keygen disabled="disabled"/>.
Коментарі
Коментарів ще немає — будьте першим!