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

    <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" /> 

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

   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"> 

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

    <form action="" oninput="x.value=parseInt(a.value)">
        0 <input type="range" id="a" value="50" min="0" max="200"> 200
        Selected Value=<output name="x"> 50</output>
        <br /><br /><br />
        Quantity (between 1 and 5):
        <input type="number" name="quantity" min="1" max="5">
disabledSpecifies that an input field should be disabled
readonlySpecifies that an input field is read only (cannot be changed)
valueSpecifies the default value for an input field
maxSpecifies the maximum value for an input field
minSpecifies the minimum value for an input field
stepSpecifies the legal number intervals for an input field
maxlengthSpecifies the maximum number of character for an input field
patternSpecifies a regular expression to check the input value against
requiredSpecifies that an input field is required (must be filled out)
sizeSpecifies the width (in characters) of an input field
autocompleteSpecifies 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

    <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" />

    <p>Autocomplete is "on" for the form, but "off" for the e-mail field. </p>

HTML5 Autofocus Attribute

HTML5 Autofocus Attribute specifies that an <input> element should automatically get focus when the page loads.

Example 5: Autofocus Attribute

      First name: <input type="text"> <br>
      Last name: <input type="text" autofocus> <br>
      <input type="submit" />

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.

      Enter Date of Birthday:
      <input type="date">
      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>

HTML5 Input type color

HTML5 User can select a color from a color picker option.

Example 7: Input Color

    function fun() {
        document.bgColor = clr.value;

    Select your favorite color:
    <input id="clr" type="color" onchange="fun()" />  

HTML5 Input type: Month

HTML5 User can select a color from a color picker option.

Example: Input type:month

      Birthday (month and year):
      <input type="month" />

HTML5 Input type: Week

Example: Input type:week

      Select a week:
      <input type="week" >

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


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


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.