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 pattern attribute ensures that a value matches a regular expression.
Using the pattern attribute
<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" id="name" name="name" pattern="^.* .*$"/>
</label>
</p>
<p>
<label for="password">
Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/>
</label>
</p>
<input type="submit" value="Submit"/>
</form>
</body>
</html>Here, we have applied a simple pattern to ensure that the user enters two names, separated by a space. This is not a sensible way of validating that a value is a name, because it ignores all of the regional variations for names, but it does provide a suitable example of the validation support. You can see how the browser displays a pattern validation error below.