Creating Read-Only and Disabled Text Boxes

Description

The readonly and disabled attributes allow you to create text boxes that the user cannot edit. Each creates a different visual effect.

Example

The following code uses the readonly and disabled Attributes.


<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name: <input value="XML" disabled
        id="name" name="name" />
      </label>
    </p><!--from   w  ww  . j  a v a  2  s .c o  m-->
    <p>
      <label for="city"> City: <input value="Boston" readonly
        id="city" name="city" />
      </label>
    </p>
    <p>
      <label for="fave"> Fruit: <input id="fave" name="fave" />
      </label>
    </p>
    <button type="submit">Submit Vote</button>
  </form>
</body>
</html>

Click to view the demo


The data from the input element, with the disabled attribute, is not submitted to the server.

Click to view the demo





















Home »
  HTML CSS »
    HTML »




HTML Introduction
HTML Document
HTML Section
HTML Group Content
HTML Text Marker
HTML Table
HTML Form
HTML Embed