HTML form tag

On most or almost all websites we can see like input your name,e-mail,address etc, this we can create using form and its supporting attributes.

How to do this?

Let's understand this with the help of following example.

--------------------------------------------------------------------------------------------

1) HTML page to create box to input our data using box.

                                                                                          click to know

2)HTML page to create password box to input our password.

                                                                                           click to see example

3)HTML page to create radio box to choose data between two options.

                                                                                              click here

4)HTML page to create check box to choose multiple data between given options.

                                                                                              click here

5)HTML page to upload a file.

                                                                                              click here

6)HTML page to create drop down box with values.

                                                                                              click here

7)HTML page to create text area.

                                                                                              click here

8)HTML page to create submit and reset button.

                                                                                              click here

9)HTML page to choose the date from drop down list.

                                                                                              click here

10)HTML page to choose the time from given time list.

                                                                                              click here

11)HTML page to choose the   month from given month list.

                                                                                              click here

-----------------------------------------------------------------------------------------

HTML 5.0 form tag with attributes

----------------------------------------------------------------------------------------

1)HTML page with label tag.

                                                                                               click here

2)HTML page with optgroup and select tag.

                                                                                                 click here

3)HTML page with input type date.

                                                                                                 click here

4)HTML page with input type datetime local.

                                                                                                  click here

5)HTML page with input type color.

                                                                                                   click here

6)HTML page with input type e-mail.

                                                                                                    click here

7)HTML page with input type week.

                                                                                                    click here

8)HTML page with input type url.

                                                                                                   click here

9)HTMl page with input type time.

                                                                                                    click here

10)HTML page with input type tel and attribute pattern.

                                                                                                    click here

11)HTML page with input type search.

                                                                                                     click here

12)HTML page with input type number.

                                                                                                   click here

13)HTML page with input type month.

                                                                                                    click here

14)HTML page with fieldset.

                                                                                                    click here

15)HTML page with input list, datalist and option.

                                                                                                             click here

16)HTML page with input type button and javascript.

                                                                                                     click here

HTML page to choose the month from given month list.

We are using html 5.0 to simplify our selection o date without using javascript.

----------------------------------------------------------------------------------------------------------

<html><!--starting tag of html-->

<head><!--used for meta tag-->

<title><!--used for title of page-->

form concept

</title>

</head>

<body><!--is container-->

form <br>

<form><!--form tag-->

Your time is:<input type="month" name="t">

<!--we can choose the month from the calendar-->

</form><!--closing of form-->

</body>

</html>

HTML page to choose the time from given time list.

We can take following example to understand form.

----------------------------------------------------------------------------------------------------------

<html><!--starting tag of html-->

<head><!--used for meta tag-->

<title><!--used for title of page-->

form concept

</title>

</head>

<body><!--is container-->

form <br>

<form><!--form tag-->

Your time is:<input type="time" name="t">

<!--we can choose time from given time box-->

</form><!--closing of form-->

</body>

</html>

HTML page to choose the date from drop down list.

a simple code to understand this is given below.

-------------------------------------------------------------------------------------------

<html><!--starting tag of html-->

<head><!--used for meta tag-->

<title><!--used for title of page-->

form concept

</title>

</head>

<body><!--is container-->

form <br>

<form><!--form tag-->

Your date of birth is:<input type="date" name="d">

<!--we can choose data from given date button-->

</form>

</body>

</html>

HTML page to create submit and reset button.

We can understand through following example.

-------------------------------------------------------------------------------------------------------

<html><!--starting tag of html-->

<head><!--used for meta tag-->

<title><!--used for title of page-->

form concept

</title>

</head>

<body><!--is container-->

form <br>

<form>

name is:<input type="text" name="name" size="20"><br>

address is:<input type="text" name="addrexs" size="20"><br>

<!--type text creates a box

placeholder puts the text inside the box

maxlength takes the character maximum 10

size:it creates the box having 20 length

-->

Gender is:<br>

male:<input type="radio" name="rad1"><br>

Female:<input type="radio" name="rad1"><br>

<!--creats radio box. we can click them-->

Your feedback:<br>

<textarea rows="10" cols="20">

</textarea>

<!--creates a text area with rows 10 and cols 20-->

<br>

<input type="submit" value="click me">

<!--creates a button named click me

it is used to submit our data to server-->

<input type="reset" value="reset me">

<!--it creates button named reset me. It resets the value.

we have entered to zero/blank-->

</form>

</body>

</html>

HTML page to create text area.

we can take following example.

---------------------------------------------------------------------------------------

<html><!--starting tag of html-->

<head><!--used for meta tag-->

<title><!--used for title of page-->

form concept

</title>

</head>

<body><!--is container-->

form <br>

<form>

enter your comments:<br>

<textarea rows="10" cols="20" placeholder="your comments">

</textarea>

<!--text area with row and cols creates a box

placeholder puts the text inside the box

-->

</form><!--closing part of form-->

</form>

</body>

</html>

HTML page to create drop down box with values.

We can take following example to understand this.

--------------------------------------------------------------------------------------------

<html><!--starting tag of html-->

<head><!--used for meta tag-->

<title><!--used for title of page-->

form concept

</title>

</head>

<body><!--is container-->

form <br>

<form><!--form tag-->

<select size="1">

<!--creates a box of size 1-->

<option>teacher</option>

<option>student</option>

<option>Parents</option>

<!-- it pust the list in that created box-->

</select><!--closing of select-->

</form>

</body>

</html>

HTML page to upload a file.

Let's take an example.

----------------------------------------------------------------------------------

<html><!--starting tag of html-->

<head><!--used for meta tag-->

<title><!--used for title of page-->

form concept

</title>

</head>

<body><!--is container-->

form <br>

<form><!--form tag-->

upload :<input type="file" name="f1"><br>

<!-- we can upload a file-->

</form><!--closing of form-->

</body>

</html>

HTML page to create check box to choose multiple data between given options.

Let's take following example.

-------------------------------------------------------------------------------------------------

<html><!--starting tag of html-->

<head><!--used for meta tag-->

<title><!--used for title of page-->

form concept

</title>

</head>

<body><!--is container-->

form <br>

<form><!--form tag-->

Physics:<input type="checkbox" name="c1"><br>

chemistry:<input type="checkbox" name="c2">

<!--it creats rectangular box which can be clicked

-->

</form>

</body>

</html>

HTML page to create radio box to choose data between two options.

Following example can be considered to understand this.

-------------------------------------------------------------------------------------------------

<html><!--starting tag of html-->

<head><!--used for meta tag-->

<title><!--used for title of page-->

form concept

</title>

</head>

<body><!--is container-->

form <br>

<form>

male:<input type="radio" name="radio1"><br>

<!--creats radio box. we can click them-->

female:<input type="radio" name="radio1">

<!--creats radio box. we can click them-->

</form>

</body>

</html>

HTML page to create password box to input our password.

Let's look at following example.

-------------------------------------------------------------------------------------------------------

<html><!--starting tag of html-->

<head><!--used for meta tag-->

<title><!--used for title of page-->

form concept

</title>

</head>

<body><!--is container-->

form <br>

<form><!--form tag-->

input name:<input type="password" placeholder="type your password" maxlength="10" size="20">

<!-- creates passbox where typed characters are invisible.

because of type password.

placeholder places the text inside the box.

maximum character we can type is 10, the width of box is 20

-->

</form><!--closing of form-->

</body>

</html>

HTML page to create box to input our data using box.

look at following example.

---------------------------------------------------------------------------------------------

<html><!--starting tag of html-->

<head><!--used for meta tag-->

<title><!--used for title of page-->

form concept

</title>

</head>

<body><!--is container-->

form <br>

<form>

input name:<input type="text" placeholder="type your name" maxlength="10" size="20">

<!--type text creates a box

placeholder puts the text inside the box

maxlength takes the character maximum 10

size:it creates the box having 20 length

-->

</form><!--closing part of form-->

</body>

</html>