-->

HTML page with label tag.

To write particular text we can use label tag.
------------------------------------------------------------------------------------------------------
<html><!--root tag-->

<head><!--used for meta tag-->
    <title><!--title tag-->
        form with input tag date-time-local tag
    </title>
</head>

<body><!--is a container-->
    form <br>
    <form><!--opening of form tag-->
        <label for="fullname">name</label><br>
        <!--defines label for full name
            we can simply use label-->
        <input type="text" name="fullname"><br>
        <!--creates box-->
        <label for="fulladdress">address   </label><br>
        <!--defines label for address
            we can simply use label-->
        <input type="text" name="fulladdress">
    </form>
</body>

</html>

HTML page with optgroup and select tag.

To display different listed data, we have to use select with optgroup.
-----------------------------------------------------------------------------------------------
<html><!--root tag-->

<head><!--used for meta tag-->
    <title><!--title tag-->
        form with optgroup and select
    </title>
</head>

<body><!--is a container-->
    form <br>
    <form><!--opening of form tag-->
        <label for="stream">choose the subject</label>
        <!--defines label-->
        <select name="stream"><!--assigns name.it is same as given in label-->
            
            <optgroup label="MGMT">MGMT<!--creates first category-->
              <option value="account">account</option><!--value-->
              <option value="eco">eco</option><!--value-->
            </optgroup>
            <optgroup label="science">Science<!--creates second category-->
              <option value="Physics">Physics</option><!--crates value-->
              <option value="Chemistry">Chemistry</option><!--creates value-->
            </optgroup>
        </select>
    </form>
</body>

</html>

HTML page with input type date.

to input date either we can use javascript or simply html. Let's understand this with following example.
----------------------------------------------------------------------------------------
<html><!--root tag-->

<head><!--used for meta tag-->
    <title><!--title tag-->
        form with input tag date tag
    </title>
</head>

<body><!--is a container-->
    form <br>
    <form><!--opening of form tag-->
    <form>
        choose the date
        <input type="date">
        <!--we can simply use type date-->
    </form>
</body>

</html>

HTML page with input type datetime local.

To input date and time to our website, we can use input type datetime-local.
----------------------------------------------------------------------------
<html><!--root tag-->

<head><!--used for meta tag-->
    <title><!--title tag-->
        form with input tag date-time-local tag
    </title>
</head>

<body><!--is a container-->
    form <br>
    <form><!--opening of form tag-->
        choose the date and time
        <input type="datetime-local">
        <!--it is for date and time-->
    </form><!--closing-->
</body>

</html>

HTML page with input type color.

to understand this, let's understand following code.
---------------------------------------------------------------------------------------------------
<html><!--root tag-->

<head><!--used for meta tag-->
    <title><!--title tag-->
        form with color type tag
    </title>
</head>

<body><!--is a container-->
    form <br>
    <form><!--opening of form tag-->
        choose the color
        <input type="color">
        <!--is useful to select the color-->
    </form>
</body>

</html>

HTML page with input type e-mail.

inputting valid e-mail can be tedious work, to make it easier, we can simply change input type to e-mail.
------------------------------------------------------------------------------------------------------------------
<html><!--root tag-->

<head><!--used for meta tag-->
    <title><!--title tag-->
        form with type e-mail
    </title>
</head>

<body><!--is a container-->
    form <br>
    <form><!--opening of form tag-->
        enter email<br>
        <input type="email">
        <!--it validates the email entered by user-->
    </form>
</body>

</html>

HTML page with input type week.

If we want to select week day from given week list, we can use input type week.
----------------------------------------------------------------------------------------------
<html><!--root tag-->

<head><!--used for meta tag-->
    <title><!--title tag-->
        form with type week
    </title>
</head>

<body><!--is a container-->
    form <br>
    <form><!--opening of form tag-->
        enter week
        <input type="week">
        <!--helps us to input week and year-->

    </form>
</body>

</html>

HTML page with input type url.

somewhere we have to input valid url, that we can do using input type url.
--------------------------------------------------------------------------------------------------
<html><!--root tag-->

<head><!--used for meta tag-->
    <title><!--title tag-->
        form with type url
    </title>
</head>

<body><!--is a container-->
    form <br>
    <form><!--opening of form tag -->
    enter url
        <input type="url">
        <!--accepts valid url-->
    </form>
</body>

</html>

HTML page with input type time.

Inputting time on website is an easy process using type time.Nothing more we have to do.
---------------------------------------------------------------------------------------------------------
<html><!--root tag-->

<head><!--used for meta tag-->
    <title><!--title tag-->
        form with input type time
    </title>
</head>

<body><!--is a container-->
    form <br>
    <form><!--opening of form tag-->
        enter time
        <input type="time">
        <!--accepts time-->
    </form>
</body>

</html>

HTML page with input type tel and attribute pattern.

On website, we may want to input telephone number or mobile number, how to do that?
We have one input type named tel. further we can understand from following example.
----------------------------------------------------------------------------------------------------------
<html><!--root tag-->

<head><!--used for meta tag-->
    <title><!--title tag-->
        form with input type tel
    </title>
</head>

<body><!--is a container-->
    form <br>
    <form><!--opening of form tag-->
        enter telphone number in 123-456-7890 pattern
        <input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890" required>
        <!--accepts telephone number. pattern is the pre-definedd format. If we donot follow, it will not accept-->
    </form>
</body>

</html>

HTML page with input type search.

On our website we put search box to search content. We can insert search box using input type search.
-----------------------------------------------------------------------------------------
<html><!--root tag-->

<head><!--used for meta tag-->
    <title><!--title tag-->
        form with type search
    </title>
</head>

<body><!--is a container-->
    form <br>
    <form><!--opening of form tag-->
        enter data to be searched
        <input type="search">
        <!--accepts number. we can put max or min attribute-->
    </form>
</body>

</html>

HTML page with input type number.

If we want to input number in some range we can use input type number with some other attributes. Let's be clear with following example.
--------------------------------------------------------------------------------------------
<html><!--root tag-->

<head><!--used for meta tag-->
    <title><!--title tag-->
        form with input type number
    </title>
</head>

<body><!--is a container-->
    form <br>
    <form><!--opening of form tag-->
        enter number<br>
        <input type="number">
        <!--accepts number. we can put max or min attribute-->
    </form>
</body>

</html>

HTML page with input type month.

If we want to choose specific month from a set of months, we can either use javascript or simply can change input type=month.
------------------------------------------------------------------------------------------
<html><!--root tag-->

<head><!--used for meta tag-->
    <title><!--title tag-->
        form with input type month
    </title>
</head>

<body><!--is a container-->
    form <br>
    <form><!--opening of form tag-->
        choose month<br>
        <input type="month">
    </form>
</body>

</html>

HTML page with fieldset.

Let's see following example to understand about fieldset.
-----------------------------------------------------------------------------------
<html><!--root tag-->

<head><!--used for meta tag-->
    <title><!--title tag-->
        form with input tag date-time-local tag
    </title>
</head>

<body><!--is a container-->
    form <br>
    <form><!--opening of form tag-->
        <!--following script is related to fieldset-->
        <fieldset>
            <legend align="left">enter your personal information</legend>
            <!--legend is for title of information-->
            <label for="fname">First name</label><br>
            <!--defines title-->
            <input type="text" name="fname"><br>
            <!--creates box-->
            <label for="address">Address</label><br>
            <!--defines title-->
            <input type="text" name="address"><br>
            <!-- creates box-->
            <label for="email">e-mail</label><br>
            <!--defines title-->
            <input type="email" name="email">
            <!--creates box to accept email.-->
             </fieldset>
    </form>
</body>

</html>

HTML page with input list, datalist and option.

If we use it then it will show data in drop down list.Better we can understand from following example.
---------------------------------------------------------------------------------------------------------
<html><!--root tag-->

<head><!--used for meta tag-->
    <title><!--title tag-->
        form with input list
    </title>
</head>

<body><!--is a container-->
    form <br>
    <form><!--opening of form tag-->
        <!--following script is related to datalist-->
        <input list="all language" name="language">
        <!--must start with input tag with list name-->
        <datalist id="all language"><!--it contains id of list. It must be same as it is with list-->
          <option value="Internet Explorer">
          <option value="Firefox">
          <option value="Chrome">
          <option value="Opera">
          <option value="Safari">
        </datalist>
    </form>
</body>

</html>

HTML page with input type button and javascript.

Look at following example.
--------------------------------------------------------------
<html><!--root tag-->

<head><!--used for meta tag-->
    <title><!--title tag-->
        form with button type button and javascript
    </title>
</head>

<body><!--is a container-->
    form <br>
    <form><!--opening of form tag-->
        <!--following script is related to button-->
        click the
        <button type="button" onclick="alert('you clicked the button')" ">click me</button>

    </form>
</body>

</html>