Как сделать инпут неактивным
Работа с input: подборка полезных решений на HTML и CSS
Содержание:
В рамках работы над полями ввода (input) существуют не всегда очевидные и, как правило, редко используемые CSS-приёмы и HTML-атрибуты, позволяющие без использования JavaScript преобразовать внешний вид элементов формы и позаботиться об их юзабилити. Вниманию читателя представляется небольшая подборка таких «фишек» — как уже давно применяемых, так и относительно новых, ещё не поддерживаемых всеми браузерами.
Не смотря на кажущуюся тривиальность, описываемые ниже решения далеко не всегда применяются в процессе создания различных форм ввода на сайте. Список включает в себя наиболее необычный по мнению автора CSS-код, решающий разрозненные задачи — от изменения цвета каретки до затенения символов в поле.
Стиль выделения ошибок
Стиль выделения текста
В отличие от предыдущих псевдоэлементов из CSS4 ::selection поддерживается большинством браузеров и представляет собой способ стилизации выделяемого пользователем содержимого как внутри отдельного поля ввода, так и во всём документе.
Для ::selection есть пара нюансов, относящихся не только к input :
С учетом особенностей Webkit цвета при выделении рекомендуется задавать следующим образом:
Добавление эллипсиса
Когда ширина текстового содержимого обычного input type=»text» больше его фактической ширины, текст по умолчанию обрезается по правому краю и появляется возможность горизонтальной прокрутки. Чтобы сделать обрезку текста визуально привлекательнее через многоточие (эллипсис), следует применить text-overflow :
Удаление лишних элементов внутри полей в IE
Начиная с версии 10 в Internet Explorer такие типы полей как text или password по умолчанию содержат внутри себя дополнительные элементы, вставляемые браузером для улучшения юзабилити, — иконку очистки поля (крестик) и отображения пароля (глаз). Они легко удаляются благодаря соответствующим псевдоэлементам:
Удаление желтого фона при автозаполнении полей
В Webkit после автозаполнения (как правило, форм с логином и паролем) поля приобретают желтый фон и черный цвет текста, которые добавляются непосредственно стилями браузера:
Однако это решение не сработает, если у поля изначально задано фоновое изображение, градиент или полностью прозрачный фон и их необходимо сохранить. В подобной ситуации следует воспользоваться анимацией:
Удаление стрелки в поле с datalist
При использовании атрибута list (подробнее рассмотрен ниже) в браузерах Webkit к input добавляется иконка в виде стрелки, указывающая на возможность выбора значений из выпадающего списка. За отображение иконки отвечает специальный псевдоэлемент, который может быть скрыт:
Увеличение затенённых символов пароля
Как известно, вводимые в input type=»password» данные затеняются другими символами (как правило, маской служит астериск или черный круг). В Webkit размер этих символов значительно меньше, чем в остальных браузерах. Для их увеличения рекомендуется использовать для поля с паролем шрифт более жирного начертания. Из безопасных шрифтов на эту роль хорошо подходит Verdana, а так как изменения необходимы только для Webkit, селектор можно обернуть в специфический @media :
Затенение символов в поле ввода
Подобное затенение может понадобиться, например, для ввода номера телефона, пин-кода и прочих важных данных, которые пользователь предпочел бы скрыть от посторонних глаз.
Существует кроссбраузерная альтернатива text-security, предполагающая замету шрифта в поле на другой шрифт, содержащий лишь три вышеназванных символа. Существенный недостаток решения в том, что оно не станет работать, если пользователь запретит подключение специфичных шрифтов с внешних ресурсов.
Полезные HTML-атрибуты
Стоит так же отметить, что несмотря на все атрибуты и способы стилизации, возможности стандартного текстового поля сильно ограничены. Если требуется создать многофункциональную область ввода аналогичную тем, что используются в месседжерах и социальных сетях, например, input со вставкой emoji, следует прибегнуть к помощи HTML5-атрибута contenteditable.
Автофокус на элементе формы
Атрибут autofocus позволяет заранее сфокусироваться на элементе формы, что в определенных ситуациях является прекрасной альтернативой методу HTMLElement.focus() в JS:
Предопределение формата вводимых в поле данных
Пользователям мобильных платформ с виртуальной клавиатурой можно помочь сэкономить время и упростить взаимодействие с формой, если заранее подсказать браузеру, что именно требуется ввести в конкретное поле.
«Некоторые устройства, в частности с виртуальными клавиатурами, могут предоставлять пользователю несколько методов ввода. Например, при вводе номера кредитной карты пользователь захочет видеть только клавиши для цифр 0−9, тогда как при вводе имени предпочтительнее работать с полем, которое автоматически начинает каждое слово с заглавной буквы». Спецификация HTML
Кроме вышеперечисленных значений браузеры так же принимают:
Перевод вводимых данных в верхний регистр букв
Например, подобным образом может выглядеть область ввода для контента, который разработчик хочет видеть оформленным как абзац:
Добавление готовых вариантов для ввода
Для добавления в поле доступных опций в его атрибуте codelist указывается идентификатор списка, которым, в свою очередь, должен обладать datalist :
Как сделать кнопку неактивной, пока не отмечен чекбокс
Маразм крепчал. Но. поехали.
Итак, на большинстве блогов, как минимум три области где, в соответствии с известными требованиями, пользователь, прежде чем отправить какие-либо персональные данные, должен явно подтвердить на это своё согласие. Типа он изучил и принимает политику конфиденциальности сайта и некие пользовательские соглашения. При нашем-то менталитете кто-нибудь читает всю эту галиматью? Чай, не дикий запад. Но ладно, идём дальше.
Общий принцип
В общем виде код выглядит так:
Обратите внимание, что всё дело тут в ID кнопки. В данном примере чекбокс проверяет элемент страницы с ID = «submit» и делает его активным или неактивным в зависимости от своего состояния.
Если реальный ID элемента иной, то его и нужно прописать в коде чекбокса.
Реальные примеры
Форма подписки на рассылку
Код формы подписки, предоставляемый сервисами, без пол-литра разобрать весьма проблематично. Вот, например, код от моего SendPulse:
Всё просто и понятно, не так ли? 
Но нам и не нужно разбираться в этом коде, тем более менять его. Нам нужно найти в нём только код кнопки. Он может начинаться с тега либо с
У меня он выглядит так:
Вот такой вот код кнопки. Обратите внимание на ID этой кнопки!
Вставляем перед кнопкой наш универсальный чекбокс из первого примера, в котором меняем ID на тот, который присвоен кнопке. Реально у меня вот такая вставка:
Как видите, после чекбокса я прописал ещё текст со ссылками на политику конфиденциальности.
Но по сути страшного ничего и нет. Найти код кнопки можно и вставить чекбокс тоже. Сложностей не должно возникнуть.
Форма обратной связи
Здесь проще. В том смысле, что код тут более читабельный и легче найти нужную кнопку.
Опять-таки покажу на своём примере:
Как видите всё тоже самое, только уже с привязкой к новому ID. Да, и здесь, в отличие от регистрации на подписку кнопка реализована не тегом «button», а тегом «input», что ровным счётом ничего не меняет.
Надеюсь, что принцип понятен и сложностей у вас никаких не возникнет.
А я, кстати, заметил что в моей форме обратной связи слетели все стили. Скорее всего это плагин Autooptimise постарался. А может и нет. Потом разберусь, фигня всё это. Сейчас немного не до стилей мне.
Форма комментариев
Ну вот и всё. Надеюсь статья оказалась для вас полезной.
Как сделать инпут неактивным
Добрый день. Есть моделька:
Из нее делаю форму:
Потом в шаблоне вывожу эту форму используя верстку bootstrap:
При этом у меня выводятся те два поля, которым я указал виджет HiddenInput, просто как лэйблы. Как сделать так чтобы и классы bootstrap’а использовать, но и скрытые поля не выводить. Е еще, как сделать так чтобы поле выводилось, но было неактивным? Виджета я такого не нашел.
Е еще, как сделать так чтобы поле выводилось, но было неактивным? Виджета я такого не нашел.
Можно свой виджет создайть, вообще в виджет можно передать attrs с нужным атрибутом, или просто в js навешать.
Ага, спасибо, это то что нужно. А про передачу атрибутов, сейчас почитаю.
Да, передал, вроде все хорошо. Но теперь это значение не передается в форме почему-то. Вот что у меня выдавало раньше:
При этом форма передавалась и данные обрабатывались. В том числе и по полю ‘ctype’. Вот что у меня стало сейчас:
При этом, когда я пытаюсь обратится к данным формы:
То я получаю такую ошибку:
Вмдно что в форме теперь нет ключа ‘ctype’. В чем может быть дело, не подскажете?
Возникла проблема с этим readonly. Оно с виду вроде как и не изменяемое, но если аиджет Select то тогда можно все равно поменять значение. Выход один, делать disabled. Но тогда значения из формы не передаются в request. Вопрос, как потом дополнить нехватающие поля нужными значениями. Т.е. как во вьюхе в полученной форме вставить значения в некоторые поля? Потому что как инициализировать форму значениями, это описано в доке, а вот как дополнить, непонятно.
А селект разве readonly не может быть? Я через JS убирал disabled перед сабмитом, когда про readonly не знал.
Т.е. как во вьюхе в полученной форме вставить значения в некоторые поля?
Возникла проблема с этим readonly. Оно с виду вроде как и не изменяемое, но если аиджет Select то тогда можно все равно поменять значение.
Выставь готовый кусок html-кода с селектом.
2 alerion: Может. И свиду он как будто бы и не изменяемый, но если кликнешь на него то выпадает список выбора.
2 dest81: Не понял что ты имел ввиду.
Как я этого добился, приведу всю вьюху, она коротенькая:
Тут поля rate и market_cost, это те два поля которы должны быть редактируемыми, остальные все только на просмотр. Я вынужден сделать еще один запрос в базу к модели Knumber (kn2) потому что из-за связи модельной формы и записи в таблице те поля, которые в форме отдаются пустыми, они и в соответствующем объекте kn тоже оказываются пустыми. Долго мучался, пока не понял что это так и не понял что нужно создать еще kn2.
Может кому поможет.
Теперь вот не могу понять, как заполнить поля в форме с ошибками чтобы при отдаче ошибочной формы селекты оставались заполненными.
Как сделать инпут неактивным
Добрый день. Есть моделька:
Из нее делаю форму:
Потом в шаблоне вывожу эту форму используя верстку bootstrap:
При этом у меня выводятся те два поля, которым я указал виджет HiddenInput, просто как лэйблы. Как сделать так чтобы и классы bootstrap’а использовать, но и скрытые поля не выводить. Е еще, как сделать так чтобы поле выводилось, но было неактивным? Виджета я такого не нашел.
Е еще, как сделать так чтобы поле выводилось, но было неактивным? Виджета я такого не нашел.
Можно свой виджет создайть, вообще в виджет можно передать attrs с нужным атрибутом, или просто в js навешать.
Ага, спасибо, это то что нужно. А про передачу атрибутов, сейчас почитаю.
Да, передал, вроде все хорошо. Но теперь это значение не передается в форме почему-то. Вот что у меня выдавало раньше:
При этом форма передавалась и данные обрабатывались. В том числе и по полю ‘ctype’. Вот что у меня стало сейчас:
При этом, когда я пытаюсь обратится к данным формы:
То я получаю такую ошибку:
Вмдно что в форме теперь нет ключа ‘ctype’. В чем может быть дело, не подскажете?
Возникла проблема с этим readonly. Оно с виду вроде как и не изменяемое, но если аиджет Select то тогда можно все равно поменять значение. Выход один, делать disabled. Но тогда значения из формы не передаются в request. Вопрос, как потом дополнить нехватающие поля нужными значениями. Т.е. как во вьюхе в полученной форме вставить значения в некоторые поля? Потому что как инициализировать форму значениями, это описано в доке, а вот как дополнить, непонятно.
А селект разве readonly не может быть? Я через JS убирал disabled перед сабмитом, когда про readonly не знал.
Т.е. как во вьюхе в полученной форме вставить значения в некоторые поля?
Возникла проблема с этим readonly. Оно с виду вроде как и не изменяемое, но если аиджет Select то тогда можно все равно поменять значение.
Выставь готовый кусок html-кода с селектом.
2 alerion: Может. И свиду он как будто бы и не изменяемый, но если кликнешь на него то выпадает список выбора.
2 dest81: Не понял что ты имел ввиду.
Как я этого добился, приведу всю вьюху, она коротенькая:
Тут поля rate и market_cost, это те два поля которы должны быть редактируемыми, остальные все только на просмотр. Я вынужден сделать еще один запрос в базу к модели Knumber (kn2) потому что из-за связи модельной формы и записи в таблице те поля, которые в форме отдаются пустыми, они и в соответствующем объекте kn тоже оказываются пустыми. Долго мучался, пока не понял что это так и не понял что нужно создать еще kn2.
Может кому поможет.
Теперь вот не могу понять, как заполнить поля в форме с ошибками чтобы при отдаче ошибочной формы селекты оставались заполненными.