HTML Disabled/Readonly Attributes in Web Form

The disabled and read-only controls in an HTML forms element allows you to set a form control to disabled. This means that your customer cannot fill in the form field at all. This allows you to render content read-only on a form or disable it completely. For example, you might want to set the form’s submit button to disabled until all the correct fields are filled in. Or you might want to include a read-only field with information that was entered in a previous screen, for the customer’s information.

Disabled Controls

When a form control is marked disabled, the control is turned off for user input. This attribute has the following effects on the element:

  • The disabled element will not receive focus
  • The disabled element is skipped when tabbing through the form
  • The disabled element will not be successful when submitting the form

The following elements support the disabled attribute:

  • button
  • input
  • optgroup
  • option
  • select
  • textarea

To disable a form control, add disabled=”disabled” to the element. For example:

<input type=”text” name=”foo” value=”bar” disabled=”disabled” />

To re-enable the element, remove the disabled=”disabled” attribute:

<input type=”text” name=”foo” value=”bar” />

Most often, you would disable an element for a short time, and then re-enable it dynamically using JavaScrpt. Here is a script from the JavaScript Guide that shows how to do that.

Read-only Controls

When a form element is marked read-only, the element shows on the page but is not modifiable by the reader. This attribute has the following effects on the element:

  • The read-only element will receive focus, but cannot be modified by the user
  • The read-only element is included when tabbing through the form
  • The read-only element may be successful when submitting the form

The following elements support the read-only attribute:

  • input
  • textarea

To make a form control read-only, add readonly=”readonly” to the element. For example:

<input type=”text” name=”foo” value=”bar” readonly=”readonly” />

To allow the element to be written to, remove the readonly=”readonly” attribute:

<input type=”text” name=”foo” value=”bar” />

If you want to make an element read-only and then not read-only dynamically, you would need to do that with a script similar to the script to disable an element.

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA