HTML атрибут disabled
Атрибут disabled в HTML является булевым атрибутом и указывает, что элемент должен быть отключён.
Этот атрибут можно использовать для предотвращения использования элемента до тех пор, пока не будет выполнено какое-либо условие, например, отмечен флажок. При наличии этого атрибута элемент не реагирует на действия пользователя и не может получить фокус. Кроме того, отключенные элементы формы не отправляются вместе с формой. Сделать элемент снова доступным можно, удалив атрибут disabled с помощью JavaScript. Обычно отключенные элементы отображаются серым цветом.
Атрибут disabled можно использовать для следующих элементов: <button>, <fieldset>, <input>, <optgroup>, <option>, <select> и <textarea>.
Когда атрибут disabled применяется к элементу, к нему также применяется псевдокласс :disabled. Элементы, поддерживающие атрибут disabled, но не имеющие его, соответствуют псевдоклассу :enabled.
Синтаксис
Синтаксис атрибута HTML disabled
<tag disabled></tag>Пример использования атрибута HTML disabled для элемента <button>:
Пример использования атрибута HTML "disabled" для элемента <button>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<button type="button">Button</button> <br /><br />
<button type="button" disabled>Disabled button</button>
</body>
</html>Пример использования атрибута HTML disabled для элемента <fieldset>:
Пример использования атрибута HTML "disabled" для элемента <fieldset>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 120px;
}
fieldset {
background: #e1eff2;
}
legend {
padding: 20px 0;
font-size: 22px;
}
</style>
</head>
<body>
<form>
<fieldset disabled>
<legend>Personal Information:</legend>
<div>
<label>First Name:</label>
<input type="text" />
</div>
<div>
<label>Last Name:</label>
<input type="text" />
</div>
<div>
<label>Date of birth:</label>
<input type="text" />
</div>
</fieldset>
</form>
</body>
</html>DANGER
Когда <fieldset> отключён, все вложенные элементы формы также отключаются, за исключением элементов формы внутри элемента <legend>.
Пример использования атрибута HTML disabled для элемента <input>:
Пример использования атрибута HTML disabled для элемента <input>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="#" method="get">
<input type="text" name="name" placeholder="Enter your name" />
<input type="number" name="Date of birth:" placeholder="Date of birth:" disabled/>
<input type="submit" value="Submit" />
</form>
</body>
</html>Пример использования атрибута HTML disabled для элемента <optgroup>:
HTML атрибут disabled
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<optgroup label="Books" disabled>
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Snippets">
<option value="java">Java</option>
<option value="linux">Linux</option>
<option value="git">Git</option>
</optgroup>
</select>
</body>
</html>Пример использования атрибута HTML disabled для элемента <option>:
Пример использования атрибута HTML "disabled" для элемента <option>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select>
<option value="computers">Computer</option>
<option value="notebook">Notebook</option>
<option value="tablet" disabled>Tablet</option>
</select>
</form>
</body>
</html>Пример использования атрибута HTML disabled для элемента <select>:
Пример использования атрибута HTML "disabled" для элемента <select>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select disabled>
<option value="books">Books</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
</form>
</body>
</html>Пример использования атрибута HTML disabled для элемента <textarea>:
Пример использования атрибута HTML "disabled" для элемента <textarea>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<textarea name="comment" rows="8" cols="50" disabled>Send your comments to the author.</textarea>
</form>
</body>
</html>Практика
Что можно сказать об атрибуте HTML 'disabled' на основе содержимого страницы?