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 text box has been empty in all of the form examples so far, but this need not be the case. You can use the value attribute to specify a default value and the placeholder attribute to give the user a helpful hint about the kind of data that they should enter.
Using the value and placeholder attributes
<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 value="Apple" id="fave" name="fave"/>
</label>
</p>
<button type="submit">Submit Vote</button>
</form>
</body>
</html>Use the placeholder attribute when you need the user to enter data, and you want to provide some context to help the user decide what data to provide. Use the value attribute to provide a default value, either because the user has previously provided this information, or because it is a common choice that is likely to be correct. You can see how the browser represents the values specified by these attributes below..