Сделать поле input неактивным при определенном условии
В следующий раз, подобной сложности вопросы, поищите, пожалуйста, в поисковике..
Отслеживать
ответ дан 29 апр 2013 в 6:08
1,131 1 1 золотой знак 9 9 серебряных знаков 24 24 бронзовых знака
интересно получается. написал код if ((document.getElementById(‘gorod’).value!=») || (document.getElementById(‘categories’).value!=») || ((document.getElementById(‘gorod’).value!=») || (document.getElementById(‘categories’).value!=»))) не получается. (( не подскажете в чем «подкол»?
29 апр 2013 в 7:06
@tagir, в том, что вы не знаете элементарных основ и даже javascript называете явой?
Атрибут disabled
Атрибут disabled блокирует элемент HTML формы, то есть делает его неактивным. Является атрибутом без значения.
Блокировка элементов обычно нужна для того, чтобы запретить пользователю менять некоторые значения (которые, тем не менее, должны быть показаны пользователю в виде элементов формы). Иногда элементы блокируют (и снимают блокировку) с помощью JavaSctipt.
Поведение
В случае кнопки ( button или input с атрибутом type в значениях button , reset или submit ) блокировка означает, что на кнопку нельзя будет нажать. В случае с текстовым полем ввода ( input или textarea ) в нем нельзя будет поменять или скопировать текст. В случае с чекбоксами и радио их состояние (отмечено или нет) нельзя будет сменить. В случае с выпадающими списками select нельзя будет сменить выбранный пункт списка.
Заблокированный элемент по умолчанию имеет серый фон. Он также не будет участвовать в переходах клавишей Tab.
Пример . Заблокированная кнопка
Давайте заблокируем кнопку с помощью атрибута disabled . Для сравнения рядом пример незаблокированной кнопки (попробуем на нее нажать):
Пример . Заблокированный чекбокс
А теперь давайте посмотрим на заблокированный флажок чекбокса. Для сравнения рядом смотрим пример не заблокированного флажка:
Пример . Заблокированный и отмеченный чекбокс
Давайте посмотрим, как выглядит заблокированный и отмеченный с помощью атрибута checked флажок чекбокс. Для сравнения рядом обратимся к примеру не заблокированного отмеченного флажка:
Пример . Заблокированный текстовый инпут
А теперь давайте заблокируем инпут. Для сравнения рядом посмотрим пример не заблокированного инпута:
Пример . Заблокированный текстареа
А здесь мы увидим заблокированный текстареа (обратите внимание на то, что размер заблокированного textarea можно менять). Для сравнения рядом обратимся к примеру не заблокированного текстареа:
Пример . Заблокированный выпадающий список
Давайте посмотрим как работает заблокированный select . Для сравнения рядом посмотрим пример не заблокированного выпадающего списка:
Смотрите также
- псевдокласс disabled ,
который задает стили заблокированному элементу - псевдокласс enabled ,
который задает стили незаблокированному элементу
:disabled , :enabled
Эта кнопка серая. Она не доступна для клика. Как написать селектор на основе состояния элемента?
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
Обновлено 1 августа 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Псевдоклассы :disabled и :enabled помогают стилизовать интерактивные элементы — на которые можно и нельзя нажать.
Легко применяются к любым элементам, которым можно задать атрибут disabled : , , , , , , , и .
Пример
Скопировать ссылку «Пример» Скопировано
Часто требуется, чтобы на кнопку отправки формы нельзя было нажать, пока не заполнены все поля этой формы. Проще всего заблокировать кнопку атрибутом disabled . Но недостаточно просто указать его в HTML, нужно ещё и при помощи оформления показать пользователю, что кнопка не активна. Как раз для этого нам пригодится псевдокласс :disabled .
Кнопка будет полупрозрачной:
button:disabled opacity: 0.5;>button:disabled opacity: 0.5; >
Псевдокласс :enabled , наоборот, поможет стилизовать все доступные для взаимодействия элементы. По факту его чаще всего не указывают, потому что записи с ним и без него, как правило, равноценны: .input = .input : enabled .
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Любому селектору, указывающему на интерактивный элемент, дописываем двоеточие и указываем одно из ключевых слов: enabled или disabled .
Как понять
Скопировать ссылку «Как понять» Скопировано
Браузер ориентируется на атрибут disabled и, в зависимости от его наличия или отсутствия, добавляет элементу состояние enabled — доступен, или disabled — недоступен.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Даже если дизайнер забыл про неактивное состояние, обязательно прописывайте его в стилях, чуть приглушая фоновый цвет или делая элемент полупрозрачным — чтобы пользователь точно знал, что с этим элементом взаимодействовать нельзя.
�� enabled чаще всего не используется, потому что все интерактивные элементы по умолчанию доступны (включены). Это значит, что прописав стили для селектора .input , вы закрываете сценарий с активным элементом.
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� «Выключать» взаимодействие с кнопками или другими элементами формы удобнее именно атрибутом disabled , потому что он сразу же отключает возможность нажать на этот элемент без дополнительных стилей. И, ориентируясь на него, гораздо удобнее прописывать стили для неактивных элементов, используя псевдокласс disabled .
Код для кнопки из моего последнего проекта:
Стили для активной кнопки в обычном состоянии:
.additional-btn padding: 2rem 3rem; border: 1px solid currentColor; font-family: inherit; font-size: 1.6rem; color: #FF6650; text-decoration: none; background-color: transparent; transition: border 0.3s, color 0.3s; cursor: pointer; user-select: none;>.additional-btn padding: 2rem 3rem; border: 1px solid currentColor; font-family: inherit; font-size: 1.6rem; color: #FF6650; text-decoration: none; background-color: transparent; transition: border 0.3s, color 0.3s; cursor: pointer; user-select: none; >
Стили для кнопки при наведении курсора или клике:
.additional-btn:active,.additional-btn:hover color: #FF5050; transition: none;>.additional-btn:active, .additional-btn:hover color: #FF5050; transition: none; >
Стили для кнопки, когда она неактивна:
.additional-btn:disabled cursor: default; color: #A44234;>.additional-btn:disabled cursor: default; color: #A44234; >
Как сделать input неактивным
Многогранный тег позволяет создавать поля ввода, кнопки, переключатели и другие интерактивные элементы.
Время чтения: 11 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
- Светлана Коробцева ,
- Валерий Махнюк ,
- Егор Могилей ,
- Олег Поздняков
Обновлено 20 декабря 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Тег позволяет создавать интерактивные элементы на сайте — поле для ввода текста, кнопка, ползунок, переключатель и другие.
Пример
Скопировать ссылку «Пример» Скопировано
Создадим поле для ввода текста в одну строчку и ограничим количество допустимых символов в нём:
type="text" name="name" required minlength="4" maxlength="8" size="10">label for="name">Введите название (от 4 до 8 символов):label> input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10" >
Как понять
Скопировать ссылку «Как понять» Скопировано
— это контейнер для интерактивных элементов, с помощью которых пользователь может ввести данные, что-то выбрать, поставить галочку или нажать кнопку.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Если хочется, чтобы введённые или выбранные в данные отправились на сервер, нужно поместить этот тег в либо связать этот элемент с формой через атрибут id .
Атрибут type определяет, какой вид примет элемент и какую функцию будет выполнять: например, для создания поля с паролем мы напишем type = «password» , чтобы сделать переключатель — type = «radio» , а для создания кнопки — type = «button» .
Благодаря огромному количеству вариантов и функций, которые задаются через type и другие атрибуты, стал одним из самых полезных и сложных тегов в HTML.
Атрибуты
Скопировать ссылку «Атрибуты» Скопировано
К элементу можно применить все глобальные атрибуты.
type
Скопировать ссылку «type» Скопировано
type — тип элемента : текстовое поле, кнопка, флажки выбора и так далее. Если не указать его, то элемент будет обычным текстовым полем text в одну строку.
Типы для ввода данных разных форматов:
- text — поле для ввода текста в одну строку. Если попробовать вставить текст из нескольких абзацев, то они всё равно сложатся в одну строчку.
- email — поле для ввода имейла. Браузер проверит, есть ли в нём знак «@» и домен.
- search — поле для поиска.
- tel — поле для ввода номера телефона.
- url — поле для ввода URL-адреса.
- password — ввод пароля. По мере ввода символы будут меняться на звёздочки ***. Можно задать минимальное и максимальное количество символов с помощью атрибутов minlength и maxlength .
- number — ввод числа.
Типы для различных кнопок:
- submit — простая кнопка для отправки формы.
- button — обычная кнопка.
- image — кнопка «Отправить» в виде картинки. Чтобы задать адрес картинки, используйте атрибут src , а для альтернативного текста — атрибут alt . Чтобы скорректировать размер изображения в пикселях, используйте атрибуты height и width .
- reset — кнопка, которая сбрасывает всё, что пользователь ввёл в поля текущей формы ранее.
Типы для ввода дат:
- date — ввод даты без времени: год, месяц и дата.
- datetime — local — ввод даты и времени в текущем часовом поясе, когда зоны UTC не указываются.
- month — ввод месяца и года, без указания часового пояса.
- week — ввод номера недели.
- time — ввод времени без указания часового пояса.
- checkbox — флажки, или чекбокс, с несколькими вариантами на выбор.
- radio — круглая кнопка-переключатель для выбора одного из нескольких вариантов.
- range — ползунок для выбора чисел из заданного диапазона.
- color — виджет для выбора цвета. Иногда его называют колорпикер (от английского colorpicker).
- file — выбор файла для отправки.
И отдельно стоит значение hidden . Поле ввода с этим значением атрибута type не видно на странице, но в то же время оно отправляет своё значение на сервер.
Большое преимущество установки правильного значения для type — в мобильных браузерах будет появляться «специальная» клавиатура, упрощающая и улучшающая пользовательский опыт. Так, для у пользователя отобразится клавиатура, содержащая лишь цифры и специальные символы, нужные для корректного ввода номера телефона. Пример такой клавиатуры можно увидеть на картинке ниже:
value
Скопировать ссылку «value» Скопировано
value — значение элемента , которое отправляется на сервер в формате «имя=значение». Имя задаётся атрибутом name , а значение — value . Например, .
- Если — кнопка ( ), то value будет надписью на ней. Значение value для кнопки ( ) не передаётся на сервер.
- Если — кнопка в виде картинки ( ), то value будет передано в виде двух значений координат нажатия относительно изображения имя . x и имя . y , где имя — это значение атрибута name .
- Если — текстовое поле ( ), то value задаст текст, который появится в этом поле при загрузке страницы. Пользователь сможет его удалить или отредактировать.
- Если вы вставляете флажок или переключатель ( ), то value задаст уникальное значение элемента, по умолчанию on .
Прочие атрибуты
Скопировать ссылку «Прочие атрибуты» Скопировано
- name — уникальное имя элемента. Обычно имя нужно, чтобы связать с формой и отправить данные на сервер.
- required — делает поле для ввода обязательным для заполнения. Пользователь не сможет нажать «Отправить», пока не введёт сюда данные. А если попробует, то браузер выведет сообщение о необходимости заполнить поле.
- disabled — отключает элемент. Пользователь не сможет, например, ввести текст или выбрать нужный параметр, а сам элемент будет отображаться в сером цвете, как неактивный.
- autocomplete — разрешает автозаполнение. Автозаполнение — это когда браузер предлагает сохранить, например, пароль или номер банковской карты, чтобы данные подставлялись при следующем входе. Подробнее можно прочитать в статье про autocomplete .
- autofocus — фокусируется на элементе сразу после загрузки страницы. Это значит, что пользователю не нужно специально нажимать на этот элемент, чтобы начать в нём что-то писать. В фокусе может быть только один элемент на странице. Но это не может быть элемент типа hidden .
- form — связывает отдельно стоящий элемент с формой. Для этого укажите в качестве значения имя идентификатора, который задан нужному тегу . Например, так form = «special — form» . Этот атрибут позволяет разместить в любом месте на странице за пределами . Если его не указать, элемент будет связан с ближайшей формой.
- list — связывает с элементом через его ID. В элементе указывают значения, которые пользователь может выбрать, когда вбивает текст в пустое поле. Допустим, вы ввели букву «М» в поле ввода города, и браузер предложил варианты из : «Москва», «Минск» и так далее. Этот атрибут не подходит для таких типов , как hidden , password , checkbox , radio , file и любых кнопок.
- readonly — не позволяет пользователю как-либо изменять элемент, оставляя его при этом рабочим. Применимо только для текстовых полей.
- step — указывает шаг, с которым будет изменяться значение поля. Задаётся в числовом формате и работает с любым из перечисленных типов: number , range , date и datetime — local .
- min , max — указывают минимальные и максимальные числовые значения соответственно для полей с типами number и range . Минимальные и максимальные значения даты в формате ГГГГ — ММ — ДД для полей с типами date и datetime — local .
- size — указывает ширину поля для ввода в символах.
- placeholder — это короткая подсказка (слово или фраза), предназначенная для помощи пользователю при вводе данных, когда поле для ввода пустует.
- pattern — задаёт регулярное выражение, по которому проверяется значение элемента .
- multiple — указывает, что пользователь может выбрать больше одного значения.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Чтобы даже те, кто использует специальные средства для чтения с экрана (скринридеры), могли точно понять, что делает тот или иной , используйте этот тег в паре с label .
Ещё пример
Скопировать ссылку «Ещё пример» Скопировано
Вот так будет выглядеть простая форма, собранная из нескольких элементов . Мы поместили их все в контейнер , чтобы данные, которые введёт пользователь, можно было отправить на сервер:
Текстовое поле в одну строчку: type="text" size="40" name="one-line" > Поле для пароля: type="password" size="40" name="one-line-password" > type="radio" name="browser" value="ie" > Вариант 1 type="radio" name="browser" value="opera" > Вариант 2 type="radio" name="browser" value="firefox" > Вариант 3 Большое текстовое поле: name="comment" cols="40" rows="3" > type="reset" value="Очистить" > type="submit" value="Отправить" disabled >form method="get" action="../result"> label class="input-label"> span class="input-title">Текстовое поле в одну строчку:span> input class="input" type="text" size="40" name="one-line" > label> label class="input-label"> span class="input-title">Поле для пароля:span> input class="input" type="password" size="40" name="one-line-password" > label> fieldset class="radio-set"> legend class="visually-hidden">Радиокнопки:legend> span class="radio-legend" aria-hidden="true">Радиокнопки:span> div class="radio-container"> label class="radio-label"> input class="radio" type="radio" name="browser" value="ie" id="ie" > span class="radio-title">Вариант 1span> label> label class="radio-label"> input class="radio" type="radio" name="browser" value="opera" id="opera" > span class="radio-title">Вариант 2span> label> label class="radio-label"> input class="radio" type="radio" name="browser" value="firefox" id="firefox" > span class="radio-title">Вариант 3span> label> div> fieldset> label class="input-label"> span class="input-title">Большое текстовое поле:span> textarea class="input input-textarea" name="comment" cols="40" rows="3" > textarea> label> div class="buttons"> input type="reset" value="Очистить" class="button button-blue" > input type="submit" value="Отправить" class="button button-orange" disabled > div> form>
На практике
Скопировать ссылку «На практике» Скопировано
Дока Дог советует
Скопировать ссылку «Дока Дог советует» Скопировано
�� У есть несколько полезных CSS-псевдоклассов. Например, может иметь разные стили в обычном, сфокусированном и выключенном виде. А если между этими видами добавлять анимацию, можно сделать даже красиво. Например, как поля в Bootstrap, когда ты нажимаешь на , он начинает плавно подсвечиваться обводкой.
�� Если вы используете или , можно сами инпуты вообще скрыть: переключение будет работать при нажатии на лейбл. Так можно сделать очень красивые чекбоксы и радиокнопки на чистом CSS. Например, я как-то сделал чекбоксы на сайте в стиле классических переключалок из iOS.