Скрывает содержимое элемента от просмотра. Такой элемент не отображается на странице, но доступен через скрипты (см. пример).
Значения
В качестве значения можно указать hidden (hidden=»hidden») или оставить атрибут пустым (hidden=»» или hidden).
Значение по умолчанию
По умолчанию атрибут выключен.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hidden</title>
<style>
#link {
cursor: pointer;
color: blue;
text-decoration: underline;
}
</style>
<script>
function showForm() {
document.getElementById("auth").hidden = false;
document.getElementById("link").hidden = true;
}
</script>
</head>
<body>
<p>Авторизация на сайте</p>
<form hidden>
<p><label>Логин: <input name="user" required></label></p>
<p><label>Пароль: <input name="pass" type="password" required></label></p>
<p><input type="submit" value="Войти"></p>
</form>
</body>
</html>Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
×Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 19.03.2018
Редакторы: Влад Мержевич
webref.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | iOS | |
| 11.0+ | 5.0+ | 11.5+ | 4.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Скрывает содержимое элемента от просмотра. Такой элемент не отображается на странице, но доступен через скрипты (см. пример).
Синтаксис
<E hidden>Значения
В качестве значения можно указать hidden (hidden=»hidden») или оставить атрибут пустым (hidden=»» или hidden).
Значение по умолчанию
По умолчанию атрибут выключен.
Применяется к тегам
<a>, <abbr>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <form>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <map>, <menu>, <ol>, <option>, <p>, <pre>, <q>, <s>, <samp>, <select>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <ul>, <var>
Пример
HTML5IE 9IE 10+CrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hidden</title> <style> #link { cursor: pointer; color: blue; text-decoration: underline; } </style> <script> function showForm() { document.getElementById("auth").hidden = false; document.getElementById("link").hidden = true; } </script> </head> <body> <p>Авторизация на сайте</p> <form hidden> <p><label>Логин: <input name="user" required></label></p> <p><label>Пароль: <input name="pass" type="password" required></label></p> <p><input type="submit" value="Войти"></p> </form> </body> </html>
htmlbook.ru
hidden— это логический атрибут, указывающий, что элемент еще не установлен или больше не является актуальным. Например, его можно использовать для скрытия элементов страницы, которые не могут использоваться до завершения процесса входа в систему. Браузеры не будут отображать элементы с набором атрибутов hidden.The hidden attribute must not be used to hide content that could legitimately be shown in another presentation. For example, it is incorrect to use hidden to hide panels in a tabbed dialog, because the tabbed interface is merely a kind of overflow presentation — one could equally well just show all the form controls in one big page with a scrollbar. It is similarly incorrect to use this attribute to hide content just from one presentation — if something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.
Hidden elements shouldn’t be linked from non-hidden elements, and elements that are descendants of a hidden element are still active, which means that script elements can still execute and form elements can still submit. Elements and scripts may, however, refer to elements that are hidden in other contexts.
For example, it would be incorrect to use the href attribute to link to a section marked with the hidden attribute. If the content is not applicable or relevant, then there is no reason to link to it.
It would be fine, however, to use the ARIA aria-describedby attribute to refer to descriptions that are themselves hidden. While hiding the descriptions implies that they are not useful on their own, they could be written in such a way that they are useful in the specific context of being referenced from the element that they describe.
Similarly, a canvas element with the hidden attribute could be used by a scripted graphics engine as an off-screen buffer, and a form control could refer to a hidden form element using its form attribute.
Note: Changing the value of the CSS display
hidden attribute overrides the behavior. For instance, elements styled display: flex will be displayed despite the hidden attribute’s presence.Specifications
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | (Да) | 4.0 (2) | 11 | (Да) | (Да) |
| Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 4 | (Да) | 4.0 (2) | 11 | (Да) | (Да) |