Html запрет изменения поля

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>

Источник

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

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

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

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

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

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

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

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

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

Источник

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 , вокруг элемента будет отображаться пунктирная рамка.

Источник

Как для поля textarea HTML запретить изменение размера?

Иногда, при верстке сайта, в частности, при работе с контактными формами возникает необходимость в HTML запретить изменение размера textarea. Вызвать такую необходимость могут разные причины. Например, вы хотите убрать уголок-индикатор, позволяющий растянуть текстовое поле из правого нижнего угла:

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

Для поля textarea HTML запретить изменение размера можно несколькими способами.

Как в HTML полностью запретить изменение размера textarea?

Если вы хотите полностью заблокировать изменение размера текстового поля textarea, а так же убрать уголок-индикатор, то наиболее эффективным будет использование свойства resize со значением none.

Как видите, уголок-индикатор исчез, и для пользователя нет возможности растянуть поле.

Как для textarea HTML запретить изменение размера в одном направлении?

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

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

Чтобы добиться такого результата, нам нужно задать для свойства resize одно из этих значений:

• vertical – разрешает изменение размера текстового поля по вертикали
• horizontal— разрешает изменение размера по горизонтали

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Текст
• Фон
• Ссылки
• Списки
• Изображения
• Таблицы
• Формы
  • Отправка данных формы
  • Текстовое поле
  • Поле для ввода пароля
  • Многострочное текстовое поле
  • Кнопки
  • Элемент label
  • Переключатели
  • Флажки
  • Поле со списком
  • Скрытое поле
  • Поле с изображением
  • Загрузка файлов
  • Адрес электронной почты
  • Веб-адрес
  • Выбор цвета
  • Ввод чисел
  • Ползунок
  • Календарь
  • Поле для поиска
  • Номер телефона
  • Группирование элементов форм
  • Блокирование элементов форм
  • Автофокус
  • Подсказывающий текст
  • Защита от дурака

  Источник