ankitweblogic logo
W e b t u t o r i a l s

Directory Structure

DOCTYPE Declaration

Audio and Videos tag

YouTube Videos

Elements Removed

Semantic Elements

HTML5 Basic Structure

HTML5 New Elements

Create Element

Browser Support

HTML5 Form Element

HTML5 Plug-Ins

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 : HTML5 Label Element

Coding

<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 : HTML5 datalist Element

Coding

<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 range is use to accept a value within the specified range. User can select the value using a slider control.

HTML5 Input type:Number

HTML5 Input type number is use to input Numeric value with the up-down button.

Example : HTML5 Input type:Range and Number

Coding

<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>
AttributeDescription
disabledSpecifies that an input field should be disabled
maxSpecifies the maximum value for an input field
maxlengthSpecifies the maximum number of character for an input field
minSpecifies the minimum value for an input field
patternSpecifies a regular expression to check the input value against
readonlySpecifies that an input field is read only (cannot be changed)
requiredSpecifies that an input field is required (must be filled out)
sizeSpecifies the width (in characters) of an input field
stepSpecifies the legal number intervals for an input field
valueSpecifies the default value for an input field
autocompleteSpecifies whether or not an input field remember the earlier typed values or not

Exercise: 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 : Autocomplete Attribute

Coding

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

<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 : Input Date and Restrict input date.

Coding

<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

User can select a color from a color picker option.

Example: Input Color

Coding

<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

Example: Input type:month

Coding

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

HTML5 Input type: Week

Example: Input type:week

Coding

<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

Output:

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

Output:

HTML5 Input type:Search

Used for search text with in a web site or entire web.
Example: Input type:Search

Output:

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.