Html input text blocked

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

Источник

HTML Input Attributes

This chapter describes the different attributes for the HTML element.

The value Attribute

The input value attribute specifies an initial value for an input field:

Example

Input fields with initial (default) values:

The readonly Attribute

The input readonly attribute specifies that an input field is read-only.

A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).

The value of a read-only input field will be sent when submitting the form!

Example

The disabled Attribute

The input disabled attribute specifies that an input field should be disabled.

A disabled input field is unusable and un-clickable.

The value of a disabled input field will not be sent when submitting the form!

Example

The size Attribute

The input size attribute specifies the visible width, in characters, of an input field.

The default value for size is 20.

Note: The size attribute works with the following input types: text, search, tel, url, email, and password.

Example

Set a width for an input field:

The maxlength Attribute

The input maxlength attribute specifies the maximum number of characters allowed in an input field.

Note: When a maxlength is set, the input field will not accept more than the specified number of characters. However, this attribute does not provide any feedback. So, if you want to alert the user, you must write JavaScript code.

Example

Set a maximum length for an input field:

The min and max Attributes

The input min and max attributes specify the minimum and maximum values for an input field.

The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week.

Tip: Use the max and min attributes together to create a range of legal values.

Example

Set a max date, a min date, and a range of legal values:

The multiple Attribute

The input multiple attribute specifies that the user is allowed to enter more than one value in an input field.

The multiple attribute works with the following input types: email, and file.

Example

A file upload field that accepts multiple values:

The pattern Attribute

The input pattern attribute specifies a regular expression that the input field’s value is checked against, when the form is submitted.

The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.

Tip: Use the global title attribute to describe the pattern to help the user.

Tip: Learn more about regular expressions in our JavaScript tutorial.

Example

An input field that can contain only three letters (no numbers or special characters):

The placeholder Attribute

The input placeholder attribute specifies a short hint that describes the expected value of an input field (a sample value or a short description of the expected format).

The short hint is displayed in the input field before the user enters a value.

The placeholder attribute works with the following input types: text, search, url, tel, email, and password.

Example

An input field with a placeholder text:

The required Attribute

The input required attribute specifies that an input field must be filled out before submitting the form.

The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

Example

The step Attribute

The input step attribute specifies the legal number intervals for an input field.

Example: if step=»3″, legal numbers could be -3, 0, 3, 6, etc.

Tip: This attribute can be used together with the max and min attributes to create a range of legal values.

The step attribute works with the following input types: number, range, date, datetime-local, month, time and week.

Example

An input field with a specified legal number intervals:

Note: Input restrictions are not foolproof, and JavaScript provides many ways to add illegal input. To safely restrict input, it must also be checked by the receiver (the server)!

The autofocus Attribute

The input autofocus attribute specifies that an input field should automatically get focus when the page loads.

Example

Let the «First name» input field automatically get focus when the page loads:

The height and width Attributes

The input height and width attributes specify the height and width of an element.

Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. Without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).

Example

Define an image as the submit button, with height and width attributes:

The list Attribute

The input list attribute refers to a element that contains pre-defined options for an element.

Example

An element with pre-defined values in a :

The autocomplete Attribute

The input autocomplete attribute specifies whether a form or an input field should have autocomplete on or off.

Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.

The autocomplete attribute works with and the following types: text, search, url, tel, email, password, datepickers, range, and color.

Example

An HTML form with autocomplete on, and off for one input field:

Tip: In some browsers you may need to activate an autocomplete function for this to work (Look under «Preferences» in the browser’s menu).

HTML Exercises

HTML Form and Input Elements

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Источник