Creating read-only and disabled text boxes

More about WEB PAGE

Anatomy of the <head>

Grouping content

Creating advanced tables

Form Handling

Customizing the input element

Using input validation

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

Using the readonly and disabled attributes

<html>
  <head>
    <title>Example</title>
    <meta name="author" content="Adam Freeman"/>
    <meta name="description" content="A simple example"/>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  </head>
  <body>
    <form method="post" action="http://titan:8080/form">
      <p>
        <label for="name">
          Name: <input value="Adam" disabled id="name" name="name"/>
        </label>
      </p>
      <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>

You can see how the browser deals with these attributes below.

The first input element in code has the disabled attribute, which has the effect of graying out the text box and preventing the user from editing the text. The second input element has the readonly attribute, which prevents the user from editing the text, but doesn’t affect the appearance of the text box.

When you submit the forms, the values that were defined with the value attribute are submitted to the server, as shown below.