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
The simplest kind of input validation is to ensure that the user provides a value. You do this with the required attribute. The user cannot submit the form until a value has been provided, although no limits are placed on what the value can be. We can see the required attribute in use below.
<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">
<input type="hidden" name="recordID" value="1234"/>
<p>
<label for="name">
Name:
<input type="text" required id="name" name="name"/>
</label>
</p>
<p>
<label for="password">
Password: <input type="password" required placeholder="Min 6 characters" id="password" name="password"/>
</label>
</p>
<p>
<label for="accept">
<input type="checkbox" required id="accept" name="accept"/>
Accept Terms & Conditions
</label>
</p>
<input type="submit" value="Submit"/>
</form>
</body>
</html>Here, we have applied the required attribute to three types of input elements. The user will not be able to submit the form until they have provided values for all three. For the text and password types, this means that the user has to enter text into the text box, and the box has to be checked for the checkbox type.
The HTML5 input validation support is fairly basic, especially if you are used to the richer functionality available through libraries such as jQuery. For example, each problem is highlighted to the user in turn, meaning that if there are multiple problems in a form, the user is forced to undertake a voyage of gradual discovery by repeatedly submitting the form and fixing one problem at a time. There is no summary of all of the validation errors and you have no control over the appearance of the validation error warning.