Блокировка поля

HTML-атрибуты Disabled и Readonly

Атрибуты disable и readonly — это сокращённые атрибуты, поэтому их можно использовать без значений.

Передача заблокированных и на сервер

Для передачи на сервер заблокированных (нередактируемых) значений элементов, созданных с помощью и , необходимо использовать атрибут readonly ; однако он не меняет цвет фона элемента по умолчанию на серого оттенка, в отличие от disabled , что может поставить Человека в тупик — почему Он не может редактировать содержимое. В этом случае лучше сделать имитацию заблокированности с помощью CSS, то есть просто определить элементу светло-серый фон.

Этот эффект наблюдается во всех популярных браузерах, кроме Safari, который меняет цвет фона элемента на серого оттенка при применении к нему атрибута readonly .

Пример использования атрибута Disabled

Пример использования атрибута Readonly

Readonly как Disabled

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

[readonly] < background-color: #f5f5f5; >textarea[readonly]:focus < /* WebKit: Google Chrome, Opera Next, Safari, etc. */ outline: 0; >

Для Opera Presto второе правило не работает, поэтому в данном браузере, при получении фокуса текстовой областью ( ) с атрибутом readonly , вокруг элемента будет отображаться пунктирная рамка.

Источник

How to Make the Text Input Non-Editable

The readonly attribute specifies that the value cannot be modified, although the user can still tab to it, highlight it, and copy the content.

Example of making the text input non-editable using the HTML readonly attribute:

html> html> head> title>Title of the document title> head> body> input type="text" value="W3docs" class="left field" readonly> body> html>

The readonly attribute is valid only on the following input types: text, email, url, tel, number, password, date and time.

Solutions with the CSS pointer-events property

The second way of making the input text non-editable is using the CSS pointer-events property set to «none», which will stop the pointer-events.

Example of making the text input non-editable using the CSS pointer-events property:

html> html> head> title> Title of the document title> style> body < text-align: center; > .inputField < pointer-events: none; > style> head> body> Non-Editable: input class="inputField" name="input" value="W3docs"> br> br> Non-Editable: input class="inputField" name="input" value="Non editable input"> body> html>

In the example above, we have two elements, and both of them are non-editable, whereas, in the next example, only one of the elements is non-editable.

Example of making editable and non-editable text inputs with the CSS pointer-events property:

html> html> head> title> Title of the document title> style> body < text-align: center; > .input1 < pointer-events: none; > style> head> body> Non-Editable: input class="input1" name="input" value="W3docs"> br> br> Editable: input class="input2" name="input" value="W3docs"> body> html>

Источник

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

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

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

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

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

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

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

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

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

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

        
 Типовой договор Отдаю свою душу, а взамен получаю здоровье и бессмертие. 
 
 Я согласен со всеми условиями
  

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

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

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

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

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

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

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

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

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

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

Источник

Как заблокировать редактирование input,select?

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

Оценить 1 комментарий

Если select == disabled нафига вы его выводите на рендер?
Отдавайте на ренднр только то, что разрешено по правам пользователя.

Когда вы выставляете disabled на какое-то поле браузер не отправляет содержимое поля на сервер. Если у вас сугубо внутренний проект и предполагается что пользователи не собираются его «хакать» или что они все как у Задорнова тупыыые можете сделать эти поля скрытыми, например. (type=»hidden» или стилями display: none;).

Но вообще так делать нехоршо, ведь любой злоумышленник хоть немного знакомый с консолью вызываемой в браузере по F12 может отредактировать форму, и отправить на сервер что угодно.

И да, вам скорее всего не понравится то, что сейчас напишут в ответах. Напишут про «выбросить эту лапшу и переписать», про то, что mysql_* функции давно deprecated, и пора перейти на ORM или PDO. Напишут, что права на редактирование полей нужно проверять на сервере, и использовать разные запросы в базу для разных прав. И будут правы.

«Но вообще так делать нехоршо, ведь любой злоумышленник хоть немного знакомый с консолью вызываемой в браузере по F12 может отредактировать форму, и отправить на сервер что угодно.»
любой злоумышленник может отправить на сервер что угодно даже без формы и браузера. Фронтенд-безопасность это миф, валидация всегда на сервере. На фронте валидация лишь для удобства

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

Источник

How to Disable an Input Field Using CSS?

The input field is used to make forms and take input from the user. Users can fill the input field according to the input type. But sometimes, you must disable the input field to fulfil any precondition, such as selecting a checkbox. In that situation, you need to disable the input field.

In this guide, we will gain an understanding of how to disable the input field using CSS. So, Let’s begin!

How to Disable an Input Field Using CSS?

In CSS, events are disabled by using the “pointer-events” property. So, first, learn about the pointer-events property.

What is “pointer-events” CSS Property?

The “pointer-events” control how the HTML elements respond or behave to the touch event, such as click or tap events, active or hover states, and whether the cursor is visible or not.

Syntax
The syntax of pointer-events is given as follows:

The above mention property takes two values, such as “auto” and “none”:

• auto: It is used to perform default events.
• none: It is utilized to disable events.

Head towards the given example.

Example 1: Adding an Input Field Using CSS

In this example, firstly, we will create a div and add a heading and input field to it. Then, set the input type as “text” and set its value as “Enter Your Name”.

After that, move to the CSS and style the div by setting its background color as “rgb(184, 146, 99)” and height as “150px”.

The output of the above-described code is given below. Here, we can see that our input field is currently active and is accepting the input from the user:

Now, move to the next part in which we use the value of the “pointer-events” property as “none”.

Example 2: Disabling an Input Field Using CSS

We will now use “input” to access the element added in the HTML file and set the value of pointer-events as “none”:

Once you implement the above-stated property “pointer-events” with “none” value, the text of the input field will be non-editable which indicates that our input field is disabled:

That’s it! We have explained the method of disabling the input field using CSS.

Conclusion

To disable an input field in an HTML, the “pointer-events” property of the CSS is used. To do so, add an input field, and set the value of pointer-events as “none” to disable the input field. In this guide, we explain the method of disabling an input field using CSS and provide an example of it.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник