Preventing Changes - HTML

There are two ways to display information in common form fields but not allow a user to change the data—by setting the field to read-only or disabled.

You can add the readonly attribute to text fields to keep the user from being able to edit the data contained therein.
The disabled attribute effectively disables a control (usually graying out the control, consistent with the user agent’s platform method of showing disabled controls) so the user cannot use the control.

The following code shows examples of both a read-only and a disabled control. The output of this code.

Disabled and read-only fields can be used to show data without the data being edited.

Disabled and read-only fields can be used to show data without the data being edited.

Although the two attributes make the fields look similar on screen, the readonly field can be selected, just not edited. The disabled field cannot be selected at all.

Tip: Disabling a control that is not applicable in certain instances is common practice. For example, international addresses do not have a U.S. ZIP code. If a user indicates that they have an international address, you might decide to disable the ZIP code field so they do not enter data in that field.

You can use client-side scripts to dynamically disable controls. Use onblur or onchange attributes to call a script from fields that could change the enabled status of other fields—those scripts check the data entered and enable or disable other fields by changing the value of that field’s disabled attribute.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics