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 list attribute allows you to specify the id value of a datalist element, which will be used to suggest options to the user when they enter data into the text box. The datalist element is new in HTML5 and allows you to define a set of values that assist the user in providing the data you require. Different types of input elements use the datalist element in slightly different ways. For the text type, the values are presented as autocomplete suggestions. You specify the values you want to give to the user through the option element.
Using the datalist element
<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 placeholder="Your name" id="name" name="name"/>
</label>
</p>
<p>
<label for="city">
City: <input placeholder="Where you live" id="city" name="city"/>
</label>
</p>
<p>
<label for="fave">
Fruit: <input list="fruitlist" id="fave" name="fave"/>
</label>
</p>
<button type="submit">Submit Vote</button>
</form>
<datalist id="fruitlist">
<option value="Apples" label="Lovely Apples"/>
<option value="Oranges">Refreshing Oranges</option>
<option value="Cherries"/>
</datalist>
</body>
</html>Each option element contained inside of the datalist represents a value that you want to propose to the user. The value attribute specifies the data value that will be used in the input element if that option is selected. You can use a different label to describe the option by using the label attribute or by defining content within the option element. You can see that we have done this for the Apples and Oranges option elements in code.