Html input disable input: HTML input disabled Attribute

:disabled ⚡️ HTML и CSS с примерами кода

Псевдо-класс :disabled находит любой отключенный элемент.

Элемент отключен, если не может быть активирован (например, его нельзя выбрать, нажать на него или ввести текст) или получить фокус. У элемента также есть включенное состояние, когда его можно активировать или сфокусировать.

Псевдоклассы
  • :active
  • :any-link
  • :blank
  • :checked
  • :current()
  • :default
  • :defined
  • :dir()
  • :disabled
  • :empty
  • :enabled
  • :first
  • :first-child
  • :first-of-type
  • :focus
  • :focus-visible
  • :focus-within
  • :fullscreen
  • :future
  • :has()
  • :host
  • :host()
  • :host-context()
  • :hover
  • :indeterminate
  • :in-range
  • :invalid
  • :is()
  • :lang()
  • :last-child
  • :last-of-type
  • :left
  • :link
  • :local-link
  • :not()
  • :nth-child()
  • :nth-col()
  • :nth-last-child()
  • :nth-last-col()
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :past
  • :placeholder-shown
  • :read-only
  • :read-write
  • :required
  • :right
  • :root
  • :scope
  • :target
  • :target-within
  • :user-invalid
  • :valid
  • :visited
  • :where()

Синтаксис

/* Selects any disabled <input> */
input:disabled {
  background: #ccc;
}

Спецификации

  • HTML Living Standard
  • HTML5
  • Selectors Level 4
  • CSS Basic User Interface Module Level 3
  • Selectors Level 3

Примеры

HTMLCSSJSРезультат

<form action="#">
  <fieldset>
    <legend>Shipping address</legend>
    <input type="text" placeholder="Name" />
    <input type="text" placeholder="Address" />
    <input type="text" placeholder="Zip Code" />
  </fieldset>
  <br />
  <fieldset>
    <legend>Billing address</legend>
    <label for="billing_is_shipping">Same as shipping address:</label>
    <input type="checkbox" checked />
    <br />
    <input type="text" placeholder="Name" disabled />
    <input type="text" placeholder="Address" disabled />
    <input type="text" placeholder="Zip Code" disabled />
  </fieldset>
</form>
input[type='text']:disabled {
  background: #ccc;
}
// Wait for the page to finish loading
document. addEventListener(
  'DOMContentLoaded',
  function() {
    // Attach `change` event listener to checkbox
    document.getElementById('billing-checkbox').onchange = toggleBilling
  },
  false
)
function toggleBilling() {
  // Select the billing text fields
  var billingItems = document.querySelectorAll('#billing input[type="text"]')
  // Toggle the billing text fields
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled
  }
}

Блокирование элементов форм | WebReference

У любого элемента формы есть два состояния, которые ограничивают доступ к элементу или ввод данных, — блокирование (disabled) и только для чтения (readonly).

Блокирование

Блокирование элемента не позволяет вообще производить с ним каких-либо действий, в том числе выделять содержимое текстового поля, изменять его или активировать. К тому же такие поля не пересылаются на сервер.

Некоторые браузеры позволяют выделять и копировать содержимое заблокированного текстового поля, но все остальные действия недоступны.

На рис. 1 представлены разные элементы форм в заблокированном состоянии.

Рис. 1. Вид заблокированных элементов

Для блокирования элемента формы используется атрибут disabled. Добавление этого атрибута разрешает отображать элемент формы, но не позволяет изменять его.

Блокирование элементов форм обычно используется для того, чтобы динамически с помощью скриптов изменять значение поля. Пользователь не должен в подобном случае иметь доступ к полю, поэтому оно блокируется. В примере 1 показано применение скриптов для изменения блокировки кнопки.

Пример 1. Блокировка поля

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Блокировка поля</title> <script> function agreeForm(f) { // Если поставлен флажок, снимаем блокирование кнопки if (f.agree.checked) f.submit.disabled = 0; // В противном случае вновь блокируем кнопку else f.submit.disabled = 1; } </script> </head> <body> <form> <p><textarea cols=»30″ rows=»4″ disabled> Типовой договор Отдаю свою душу, а взамен получаю здоровье и бессмертие.
</textarea></p> <p><label><input type=»checkbox» name=»agree»> Я согласен со всеми условиями</label></p> <p><input type=»submit» name=»submit» value=»Далее» disabled></p> </form> </body> </html>

Результат данного примера показан ниже (рис. 2).

Рис. 2. Заблокированное текстовое поле

В данном примере применяется блокирование кнопки, но оно снимается, как только пользователь поставит флажок возле текста «Я согласен со всеми условиями».

Поле только для чтения

Поля формы можно не только блокировать, но и переводить их в режим только для чтения. В этом случае доступ к ним сохраняется, но изменять значения заданные по умолчанию нельзя. Разумеется, речь идёт только о полях, где требуется вводить текст. Выделять и копировать текст можно, но изменить не получится.

Для установки режима «только для чтения» используется атрибут readonly, он добавляется к элементу <input> или <textarea>.

На вид элемента формы это никак не влияет, но как было уже замечено, модифицировать значение поля не удастся.

Ниже представлены два поля с текстом, одно из которых находится в обычном режиме, а второе — «только для чтения».

Обычное текстовое поле   Поле только для чтения

В примере 2 показано создание поля для чтения.

Пример 2. Использование readonly

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Поле для чтения</title> </head> <body> <form> <p><textarea>Обычное текстовое поле</textarea> <textarea readonly>Поле только для чтения</textarea></p> </form> </body> </html>

Автор: Влад Мержевич

Последнее изменение: 11.03.2020

Ввод HTML отключен Атрибут

Тег HTML

Пример

HTML-форма с отключенным полем ввода:


 
 


 




Попробуйте сами »


Определение и использование

Атрибут disabled является логическим атрибутом.

При наличии указывает, что элемент должен быть отключен.

Отключенный элемент ввода непригоден для использования и щелчка.

Атрибут disabled может быть установлен, чтобы запретить пользователю использовать <ввод> элемент пока не будет выполнено какое-либо другое условие (например, установка флажка и т. д.). Затем, JavaScript может удалить отключенное значение и сделать

элемента можно использовать.

Подсказка: Отключено элементов в форме не будет поданный!


Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую атрибут.

Атрибут
отключен Да Да Да Да Да

Синтаксис


❮ HTML-тег


ВЫБОР ЦВЕТА



Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.
CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

8 Top5 Examples Примеры HTML

Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

HTML отключен Атрибут

❮ Предыдущий Все атрибуты HTML Далее ❯


Определение и использование

disabled атрибут является логическим атрибутом.

При наличии указывает, что элемент должен быть отключен.

Отключенный элемент непригоден для использования.

Атрибут disabled может быть установлен, чтобы запретить пользователю использовать элемент пока не будет выполнено какое-либо другое условие (например, установка флажка и т. д.). Затем, JavaScript может удалить отключенное значение и снова сделать элемент пригодным для использования.


Относится к

отключенный атрибут можно использовать для следующих элементов:

Элементы Атрибут
<кнопка> отключен
<набор полей> отключен
<ввод> отключен
<оптгруппа> отключен
<опция> отключен
<выбрать> отключен
<текстовое поле> отключен

Примеры

Пример кнопки

Отключенная кнопка:

Попробуйте сами »

Отключить связанную группу Fieldset Пример

5

5 элементы формы:


 Персоналия:
  Имя:

  Электронная почта:

  Дата рождения:

Попробовать Себя »

Пример ввода

HTML-форма с отключенным полем ввода:

php»>
Имя:

Фамилия:


Попробуйте сами »

Пример Optgroup

Отключенная группа параметров:

Попробуйте сами »

Пример варианта

Выпадающий список с одной отключенной опцией:

Попробуйте сами »

Пример выбора

Отключенный раскрывающийся список:

Попробуйте сами »

Пример Textarea

Отключенная текстовая область:

Попробуйте сами »


Поддержка браузера

Атрибут disabled имеет следующую поддержку браузера для каждого элемента:

Элемент
кнопка Да Да Да Да Да
полевой набор Да Не поддерживается Да 7,0 Да
ввод 1,0 6,0 1,0 1,0 1,0
оптгруппа 1,0 8,0 Да Да Да
опция 1,0 8,0 1,0 Да Да
выбрать Да Да Да Да Да
текстовая область Да Да Да Да Да

❮ Предыдущий Все атрибуты HTML Следующий ❯


ВЫБОР ЦВЕТА



Лучшие учебники
Учебник HTML
Учебник CSS
Учебник по JavaScript
Как сделать учебник
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Top References

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
Справочник по jQuery

Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *