HTML5 Label Element
The label element defines a label for an input element. The label element does not render anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the label element, it focus the control for which it is use.
Example 1: HTML5 Label Element
<body>
<label for="fname">First Name </label>
<input type="text" name="fname" id="fname" />
<br> <br>
<label for="lname">Last Name </label>
<input type="text" name="lname" id="lname" />
</body>
HTML5 Datalist Element
HTML5 Datalist element specifies a list of pre-defined options for an input element. Users will see a drop-down list of pre-defined options as they input data. The list attribute of the input element, must refer to the id attribute of the datalist element.
Example 2: HTML5 datalist Element
<body>
Select Your Favorite Browser
<input list="browsers" placeholder="Select">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</input>
</body>
HTML5 Input type:Range
HTML5 Input type:Number
HTML5 Input type range is use to accept a value within the specified range. User can select the value using a slider control.
HTML5 Input type number is use to input Numeric value with the up-down button.
Example 3: HTML5 Input type:Range and Number
<body>
<form action="" oninput="x.value=parseInt(a.value)">
0 <input type="range" id="a" value="50" min="0" max="200"> 200
<br><br>
Selected Value=<output name="x"> 50</output>
<br /><br /><br />
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>
</body>
| Attribute | Description |
|---|---|
| disabled | Specifies that an input field should be disabled |
| readonly | Specifies that an input field is read only (cannot be changed) |
| value | Specifies the default value for an input field |
| max | Specifies the maximum value for an input field |
| min | Specifies the minimum value for an input field |
| step | Specifies the legal number intervals for an input field |
| maxlength | Specifies the maximum number of character for an input field |
| pattern | Specifies a regular expression to check the input value against |
| required | Specifies that an input field is required (must be filled out) |
| size | Specifies the width (in characters) of an input field |
| autocomplete | Specifies whether or not an input field remember the earlier typed values or not |
Exercise 1: Change the background color, using 3 slider control.
Autocomplete Attribute
Autocomplete Specifies whether an input field remember the earlier typed values or not (default is on).
Example 4: Autocomplete Attribute
<body>
<form autocomplete="on">
First name: <input type="text" name="fname" /> <br>
Last name: <input type="text" name="lname" /> <br>
E-mail: <input type="email" name="email" autocomplete="off" /> <br>
<input type="submit" />
</form>
<p>Autocomplete is "on" for the form, but "off" for the e-mail field. </p>
</body>
HTML5 Autofocus Attribute
HTML5 Autofocus Attribute specifies that an <input> element should automatically get focus when the page loads.
Example 5: Autofocus Attribute
<body>
<form>
First name: <input type="text"> <br>
Last name: <input type="text" autofocus> <br>
<input type="submit" />
</form>
</body>
HTML5 Input type date
HTML5 Input type date is used for input a date from a date picker option.
Example 6: Input Date and Restrict input date.
<body>
<form>
Enter Date of Birthday:
<input type="date">
<br><br>
You can add restrictions to the input:<br>
Enter a date before 1980-01-01:
<input type="date" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" min="2000-01-02"><br>
</form>
</body>
HTML5 Input type color
HTML5 User can select a color from a color picker option.
Example 7: Input Color
<script>
function fun() {
document.bgColor = clr.value;
}
</script>
<form>
Select your favorite color:
<input id="clr" type="color" onchange="fun()" />
</form>
HTML5 Input type: Month
HTML5 User can select a color from a color picker option.
Example: Input type:month
<body>
<form>
Birthday (month and year):
<input type="month" />
</form>
</body>
HTML5 Input type: Week
Example: Input type:week
<body>
<form>
Select a week:
<input type="week" >
</form>
</body>
HTML5 Input type:Time
Allow a user to select a time from a time picker control.
Example: Input type:time
HTML5 datetime-local
Example: Input type:datetime-local
Output:HTML5 Input type:Email
Used for input fields that should contain e-mail address.
Example: Input type:Email
HTML5 Input type:Search
Used for search text with in a web site or entire web.
Example: Input type:Search
HTML5 Input type:URL
Used for input that should contain a URL address.
Example: Input type:URL
Output:HTML Form Attributes
Action Attribute - The action attribute defines the action to be performed when the form is submitted. The common way to submit a form to a server, is by using a submit button.
Note: If the action attribute is omitted, the action is set to the current page.
The Method Attribute - The method attribute specifies the HTTP method (GET or POST) to be used when submitting the forms.
When to Use GET?
You can use GET (the default method). If the form submission is without sensitive information you can use GET method, the form data will be visible in the page address.
When to Use POST?
You should use POST. If the form is updating data, or includes sensitive information like password. POST offers better security because the submitted data is not visible in the page address.
novalidate - Specifies that the browser should not validate the form. It is used with submit button
target - Specifies the target of the address in the action attribute (default: _self).
The pattern Attribute - Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
The placeholder Attribute - The placeholder attribute specifies a hint that describes the expected value of an input field
The required Attribute - The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
