More about WEB PAGE
Anatomy of the <head>
Grouping content
- Understanding the need to group content
- Using the div Element
- Grouping content into lists
- Dealing with figures
Creating advanced tables
- Adding table headers cells
- Denoting the headings and the table body
- Creating irregular tables
- Applying borders to the table element
Form Handling
- The action attribute
- The method attribute
- Configuring the Data Encoding
- Controlling form completion
- Setting the name of the form
- Adding labels to a form
- Automatically focusing on an input element
- Disabling individual input elements
- Grouping form elements together
- Using the button element
Customizing the input element
- Using the input element for text input
- Setting values and using placeholders
- Using a data list
- Creating read-only and disabled text boxes
- Restrict data entry
Using input validation
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
<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="fave">Fruit: <input autofocus id="fave" name="fave"/></label>
</p>
<p>
<label for="name">Name: <input disabled id="name" name="name"/></label>
</p>
<button>Submit Vote</button>
</form>
</body>
</html>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.