Атрибут disabled
Если у элемента формы есть этот атрибут, то с ним нельзя взаимодействовать.
Время чтения: меньше 5 мин
Кратко
Скопировать ссылку «Кратко» Скопировано
С помощью атрибута disabled можно отключать интерактивные элементы форм. Пока этот атрибут есть, с элементом нельзя будет взаимодействовать.
Пример
Скопировать ссылку «Пример» Скопировано
В примере атрибут задан для целой группы элементов. В итоге ни с одним из полей внутри отключённого нельзя взаимодействовать:
Ваше имя Ваш номер телефонаfieldset disabled> label> Ваше имя input type="text"> label> label> Ваш номер телефона input type="text"> label> fieldset>
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Это булевый атрибут. Само его наличие говорит браузеру, что элемент нужно отключить.
Может применяться к следующим элементам формы:
Как понять
Скопировать ссылку «Как понять» Скопировано
Атрибут disabled делает элемент неактивным: с ним нельзя взаимодействовать, кликнуть на него, на нём нельзя сфокусироваться, отключённое поле не будет отправлено вместе с остальными полями формы.
Атрибут срабатывает не только на самом элементе, но и на всех его потомках.
Наличие атрибута disabled отключает влияние атрибутов required и pattern . Потому что значение неактивного поля не может быть изменено браузер экономит время на их проверке.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Элемент с атрибутом disabled можно стилизовать при помощи псевдокласса :disabled . По умолчанию браузер делает их серыми и менее контрастными.
Element.removeAttribute()
Вы должны использовать removeAttribute вместо того, чтобы устанавливать значение атрибута в null, используя setAttribute.
Попытка удаления атрибута, которого нет на элементе не вызывает ошибки.
Методы DOM имеют дело с атрибутами элементов:
| Не знают пространства имён, наиболее часто используемые методы | Вариант, знающий пространство имён (Уровень DOM 2) | Уровень DOM 1 методы для работы с Attr узлами напрямую (используется редко) | Уровень DOM 2 знает о методах пространства имён для работы с Attr узлами напрямую (используется редко) |
|---|---|---|---|
| setAttribute (DOM 1) | setAttributeNS (en-US) | setAttributeNode (en-US) | setAttributeNodeNS (en-US) |
| getAttribute (DOM 1) | getAttributeNS (en-US) | getAttributeNode (en-US) | getAttributeNodeNS (en-US) |
| hasAttribute (DOM 2) | hasAttributeNS (en-US) | — | — |
| removeAttribute (DOM 1) | removeAttributeNS (en-US) | removeAttributeNode (en-US) | — |
Спецификация
Found a content problem with this page?
This page was last modified on 7 нояб. 2022 г. by MDN contributors.
Your blueprint for a better internet.
Отключаем нежелательные HTML-элементы с помощью CSS
Часто, когда мы сдаем проект клиенту, мы теряем контроль над HTML-кодом. Иногда клиент использует CMS (Системы Управления Контентом), которые дают ему полный контроль над теми или иными частями HTML-кода. Иногда клиент просто использует наши темплейты для вывода своего кода в документ.
В большинстве случаев довольно тяжело проинформировать клиента о том, как использовать темплейты или CMS, которые вы ему предоставляете, а иногда просто неприемлемо толкать пламенные речи о семантической верстке и веб-стандартах. Клиент может/будет использовать «старую, добрую разметку», ту, которую он знает, просто потому что она работает и выглядит так как он привык. Скорее всего в ней будут присутствовать нежелательные (deprecated) тэги и атрибуты, такие как bgcolor, align и «вечный» font. Эта статья о том, как блокировать нежелательные HTML-тэги с помощью CSS, тем самым аккуратно направляя клиента в правильном направлении.
Есть несколько решений проблемы. Одно из них — вывод предупреждающего изображения с помощью CSS, когда изпользуются нежелательные тэги. Подробные обьяснения этого способа есть здесь и здесь. Второе решение — «вырезание» нежелательных тегов и атрибутов на стороне сервера. Этот способ является наиболее эффективным, другое дело что не всегда есть контроль за сервером где расположен сайт.
Идея состоит в том, чтобы сохранить естественный каскад и наследие стилей во всех браузерах, элегантно «отключая» HTML, нежелательный к использованию клиентом. И тогда клиент перестанет использовать его, потому что нежелательные тэги просто перестанут «работать». Элегантный и ненапрягающий клиента способ, который направит его по верному пути.
Нежелательные HTML-тэги и атрибуты:
bgcolor border align vspace hspace valign width height
Решение
В идеале мы могли бы просто откорректировать некоторые HTML-тэги, вставив значение inherit для эквивалентного CSS-свойства. Браузеры, работающие по стандартам, просто проигнорируют заданные в коде нежелательные атрибуты и будут использовать вместо них наследуемые значения в каскаде.
На пример этот CSS:
Соответственно цвет текста внутри тэга font будет цветом, наследуемым по каскаду, а не синим, как задано в коде. То что надо. Но как вы наверняка знаете — у Internet Explorer есть проблемы с наследуемыми значениями. И в седьмой версии тоже. Так что за работу:
Expressions и currentStyle в помощь:
Все чудесно, кроме того что Opera 9 не наследует значение для font-family. К счастью font нас тоже устроит:
С этим разобрались. Перейдем к свойству font-size. Здесь нужна деликатность, так как значение размера шрифта наследуется по отношению к вычисляемому (computed) значению. Предыдушие expression‘ы здесь не сработают, так как если для body выставлено значение свойства font-size, равное 2em, то вычисление значения размера шрифта начнется от этой точки. Браузер проверит значение font-size для родительского элемента тэга font, которое равняется 2em и представит вычисляемое значение, равное 4em (2em от 2em). А это не то что нам нужно. Решение простое. Нужно использовать начальное значение font-size, равное 100% для всех браузеров. Давайте добавим несколько свойств нежелательному тэгу basefont, чтобы и его утихомирить. Вот полный список правил для «укрощения» тэгов font и basefont:
Свершилось! Мы «отключили» большинство нежелательных тэгов, используя только CSS и expression’ы.
А как же атрибуты? HTML4 включает в себя некоторое количество нежелательных атрибутов, которые могут изрядно попортить нервы. Давайте их тоже «повыключаем». Начнем с align:
*[align] < text-align:inherit; >/* Нормальные браузеры */
Все бы хорошо, но IE6 не поддерживает селекторы атрибутов. Посему, нам надо модифицировать expression, для того чтобы он проверял наличие атрибута align у тэга. Вот что получилось:
*[align] < text-align:inherit; >/* Нормальные браузеры */ * < text-align:expression(this.align ? this.parentNode.currentStyle['textAlign'] : ''); >/* IE */
Далее на очереди атрибуты тэга img. Помимо атрибута align, мы хотим отключить атрибуты border, vspace и hspace. Так как значения margin и border не наследуются, то здесь применимо простое правило:
Вот здесь мы как раз сталкиваемся с неразрешимой проблемой для IE6. vspace и hspace не равнозначны свойству margin в нем, поэтому IE6 будет продолжать отображать их. Единственное решение, которое пришло мне в голову это написать маленький скриптик, который будет просто удалять эти атрибуты при загрузке документа:
Я бы предпочел не использовать javascript, но в данном случае я просто не вижу другой альтернативы. Так что пусть будет. Теперь добьем атрибут type в тэге ol:
Таблицы. Финальный шаг. В таблицах, в HTML4/4.01, есть ряд нежелательных атрибутов, которые активно использовались для верстки страниц. Но мы же не хотим, чтобы клиент использовал таблицы для верстки? Поэтому давайте отключим атрибуты width, height, bgcolor, valign и border:
Подведем итоги:
Используя CSS-правила и минимальный javascript, нам удалось «отключить» большинство нежелательных тэгов и атрибутов, элегантно сохраняя естественное наследование. Нам не нужно «учить» клиента, он в любом случае должен будет использовать правильную разметку. С учетом одной, очень важной ремарки — очень важно предоставить клиенту достаточное количество описаных CSS-классов, чтобы он не был ограничен в работе с разметкой.
Все стили вместе:
font,basefont < color:inherit; /* Нормальные браузеры */ color:expression(this.parentNode.currentStyle['color']); /* IE */ font:inherit; /* Нормальные браузеры. Font вместо font-size для Оперы */ font-family:expression(this.parentNode.currentStyle['fontFamily']); /* IE */ font-size:100%; /* Все браузеры */ >center < text-align:inherit; /* Нормальные браузеры */ text-align:expression(this.parentNode.currentStyle['textAlign']); /* IE */ >s,strike,u < text-decoration:inherit; /* Нормальные браузеры */ text-decoration:expression(this.parentNode.currentStyle['textDecoration']); /* IE */ >*[align] < text-align:inherit; >/* Нормальные браузеры */ * < text-align:expression(this.align ? this.parentNode.currentStyle['textAlign'] : ''); >/* IE */ img < margin:0; border:none; >/* Все браузеры */ ol < list-style-type:decimal; >/* Все браузеры */ body < background-color:transparent; /* Все браузеры */ >table,tr,th,td < width:auto; /* Все браузеры */ height:auto; /* Все браузеры */ background-color:transparent; /* Все браузеры */ vertical-align:inherit; /* Все браузеры (включая IE) */ border:none; /* Все браузеры */ >
Вольный перевод и подготовка статьи по материалам monc.se
Атрибут disabled
Если у элемента формы есть этот атрибут, то с ним нельзя взаимодействовать.
Время чтения: меньше 5 мин
Кратко
Скопировать ссылку «Кратко» Скопировано
С помощью атрибута disabled можно отключать интерактивные элементы форм. Пока этот атрибут есть, с элементом нельзя будет взаимодействовать.
Пример
Скопировать ссылку «Пример» Скопировано
В примере атрибут задан для целой группы элементов. В итоге ни с одним из полей внутри отключённого нельзя взаимодействовать:
Ваше имя Ваш номер телефонаfieldset disabled> label> Ваше имя input type="text"> label> label> Ваш номер телефона input type="text"> label> fieldset>
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Это булевый атрибут. Само его наличие говорит браузеру, что элемент нужно отключить.
Может применяться к следующим элементам формы:
Как понять
Скопировать ссылку «Как понять» Скопировано
Атрибут disabled делает элемент неактивным: с ним нельзя взаимодействовать, кликнуть на него, на нём нельзя сфокусироваться, отключённое поле не будет отправлено вместе с остальными полями формы.
Атрибут срабатывает не только на самом элементе, но и на всех его потомках.
Наличие атрибута disabled отключает влияние атрибутов required и pattern . Потому что значение неактивного поля не может быть изменено браузер экономит время на их проверке.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Элемент с атрибутом disabled можно стилизовать при помощи псевдокласса :disabled . По умолчанию браузер делает их серыми и менее контрастными.