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 1
<body>
<form>
<label for="fname">First Name </label>
<input type="text" id="fname"> <br> <br>
<label for="lname">Last Name </label>
<input type="text" id="lname">
</form>
</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 1
<body>
<form>
<p>Select Your Favorite Coding Language
<input list="languages" placeholder="Select"> <input type="button" value="Submit"></p>
<datalist id="languages">
<option value="HTML"></option>
<option value="C / C++"></option>
<option value="JAVA"></option>
<option value="JAVASCRIPT"></option>
<option value="PYTHON"></option>
<option value="PHP"></option>
<option value="ASP.NET"></option>
</datalist>
</form>
</body>
Input type:Range
,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 1
<body>
<form 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 |
|---|---|
| max | Specifies the maximum value for an number/range field |
| min | Specifies the minimum value for an number/range |
| step | Specifies the legal number intervals for an number/range field |
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. In this example, Autocomplete is "on" for the form, but "off" for the e-mail field. 1
<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>
</body>
HTML5 Autofocus Attribute
HTML5 Autofocus Attribute specifies that an <input> element should automatically get focus when the page loads.
Example 5: Autofocus Attribute 1
<body>
<form>
First name: <input type="text"> <br>
Last name: <input type="text" autofocus> <br>
<input type="submit">
</form>
</body>
HTML5 Input type: color
HTML5 User can select a color from a color picker option.
Example 6: Input Color 1
<form>
Select your favorite color: <input id="clr" type="color" onchange="fun()">
</form>
<script>
function fun() {
document.body.style.background = clr.value;
}
</script>
HTML5 Input type: date
HTML5 Input type date - is used for input a date from a date picker option.
Example 7: Input Date and Restrict input date. 1
<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: Month
HTML5 User can select a color from a color picker option.
Example 8: Input type:month 1
<body>
<form>
Birthday (month and year): <input type="month">
</form>
</body>
HTML5 Input type: Week
Example 9: Input type:week 1
<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 10: Input type:time 1
<body>
<form>
Select a time: <input type="time">
</form>
</body>
HTML5 datetime-local
Example 11: Input type:datetime-local 1
<body>
<form>
Birthday (date and time): <input type="datetime-local">
</form>
</body>
HTML5 Input type:Email
Used for input fields that should contain e-mail address.
Example 12: Input type:Email 1
<body>
<form>
E-mail: <input type="email">
</form>
</body>
HTML5 Input type:URL
Used for input that should contain valid URL address starting from https. eg: https://www.ankitweblogic.com
Example 13: Input type:URL
<body>
<form>
<p>Add your homepage: <input type="url"></p>
<button>Submit</button>
</form>
</body>
HTML5 Input type:Search
Used for search text with in a website or entire web.
Example 14: Input type:Search
<body>
<form>
Search Google: <input type="search">
</form>
</body>
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 value? - You should use POST value, if the form is updating data, or includes sensitive information like password. POST value 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).
pattern Attribute - Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
Ad:
