Атрибут checked тега <input> — позначений checkbox
Атрибут checked (HTML тегу <input>) є логічним атрибутом і вказує на те, що елемент повинен бути попередньо вибраний при завантаженні сторінки (застосовується тільки для <input type = "checkbox"> і <input type = "radio">, в іншому випадку він ігнорується).
Атрибут 'checked' також може бути встановлений після завантаження сторінки, за допомогою JavaScript.
автор: NagarD
Загальний опис
автор: NagarD
- Порада
-
Виправте помилку "Бе" на "Без" на картинці.
автор: Громадянин - Нотатка
-
У разі використання перемикачів (radiobutton) може бути відзначений тільки один елемент групи, для прапорців (checkbox) можливо помітити всі елементи.
автор: NagarD - Нотатка
-
Без задання цей атрибут вимкнений.
автор: NagarD
Синтаксис
<input type="radio" checked>
<input type="checkbox" checked>Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | ≤12.1 | 12 | 5.5 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута checked теґа <input>
<form>
<p><b>Улюблені види спорту?</b></p>
<p><input type="checkbox" name="option1" value="a1" checked>Футбол<Br>
<input type="checkbox" name="option2" value="a2">Волейбол<Br>
<input type="checkbox" name="option3" value="a3" checked>Плавання<Br>
<input type="checkbox" name="option4" value="a4">Бокс<Br>
<input type="checkbox" name="option5" value="a5" checked>Баскетбол</p>
<p><input type="submit" value="Відправити"></p>
</form>
<br>
<form>
<p><b>Улюблені види спорту?</b></p>
<p><input type="checkbox" name="option1" value="a1">Футбол<Br>
<input type="checkbox" name="option2" value="a2">Волейбол<Br>
<input type="checkbox" name="option3" value="a3">Плавання<Br>
<input type="checkbox" name="option4" value="a4">Бокс<Br>
<input type="checkbox" name="option5" value="a5">Баскетбол</p>
<p><input type="submit" value="Відправити"></p>
</form>checked="false" теж вмикає прапорець, а :checked підсвічує обране
HTML
<form>
<p><label><input type="checkbox" checked> <code>checked</code> — увімкнено</label></p>
<p><label><input type="checkbox" checked="false"> <code>checked="false"</code> — теж увімкнено!</label></p>
<p><label><input type="checkbox"> без атрибута — вимкнено</label></p>
<p><b>Тариф (одна група за спільним <code>name</code>):</b></p>
<p>
<label><input type="radio" name="plan" value="a" checked> Базовий</label>
<label><input type="radio" name="plan" value="b"> Розширений</label>
</p>
</form>CSS
form {
accent-color: #0172ad;
}
label {
display: inline-block;
padding: 4px 8px;
border: 1px solid transparent;
border-radius: 6px;
margin-right: 8px;
cursor: pointer;
}
label:has(:checked) {
border-color: #0172ad;
background: #eaf4fa;
font-weight: bold;
}
p {
margin: 6px 0;
}Коментарі
Коментарів ще немає — будьте першим!