HTML Tutorials

Disabling individual input elements

You can disable input elements so that the user cannot enter data into them. This isn’t as odd as it might sound. You might want to present a consistent interface that is used for several related tasks, but for which not all of the input elements are germane. You can also use JavaScript to enable the elements based on a user’s actions. A common example is enabling a set of input elements to capture an address when the user selects an option to ship to an address that is not the user’s billing address.

Using the disabled attribute on input elements
    <meta name="author" content="Adam Freeman"/>
    <meta name="description" content="A simple example"/>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <form method="post" action="http://titan:8080/form">
        <label for="fave">Fruit: <input autofocus id="fave" name="fave"/></label>
        <label for="name">Name: <input disabled id="name" name="name"/></label>
      <button>Submit Vote</button>

In this example, we applied the disabled attribute to the input element that gathers the user’s name. You can see how Google Chrome displays a disabled input element below. The other browsers use a similar style.