The purpose of form is to collect information from people, to know their opinion, skills, feedback, etc..

In previous post, we saw about all the input elements and it’s attributes.

This post will describes about form in HTML,<form> element, it’s attributes, other form elements, and sample form example.

What is form in HTML?

In world of web every website have forms like, log in form, registration form, contact form, feedback from.

HTML form collects data from user and store in database. Server process this data.

Most common information the html form contains are user_id, password, username,..etc.

The <form> element is used to create a form.

So first we discuss about the <form> tag and it’s attributes.

The <form> element

<form> element is most important and necessary element form creation.

Without <form> other element of form doesn’t working.

The element have following attributes:

<form> attributes

name
action
method
target
autocomplete
enctype
novalidate

Let’s understand these attributes in detail.

(1) name

The name attribute specify the name of form. Give unique name to form.

For example,

(2) action

The action attribute define a path of file where form data is submitted when user click on button.

For example,

(3) method

The method attribute specify the HTTP method for form data.

The method attribute have two values: get and post.

Default method is get.

Now, understand these two methods in details.

Get method

The get method appends form data to URL in form of name/value pair.

For example, query strings in Google search.

Post method

The post method appends form data inside body of HTTP request.

Difference between get and post methods

get

• Don’t use get when sent personal information

• Limited data sent to URL. (Maximum 2048 characters).

• Used for non-secure data.

• Can’t send sensitive data using get.

• User can bookmarked the result.

• Form data is visible in URL.

post

• When you want to sent sensitive data use post method.

• You can sent unlimited data.

• Post method is secure method.

• User can not bookmarked the result after form submitted.

• Form data is not visible in URL.

(4) target

The target attribute specify the web page or frame where response is received after submitting form data.

Target attribute have four values:-

_blank:- After form submission new tab or window will open.

_self:- The response/result data display in current page/window. This is default value.

_parent:- response will display in parent frame.

_top:- Response will display in full page/window.

(5) autocomplete

autocomplete attribute allow browser to complete value of input field.

You can set two values: on or off.

When on , the suggestion box appears (based on previous data input) at bottom of input field while user enter any value.

When off no suggestion box appears.

Form autocomplete attribute

In above output figure suggestion box is display when clicking on text field.

(6) enctype

enctype attribute specify encoded form data. This attribute is used for only post method.

Three values of attribute.

multipart/form data

This value is used when you want to convert image or word files (which includes binary data).

text/plain

This attribute is used to convert space into (+) sign.

application/x-www-x-www-form-urlencoded

This attribute converts all the characters of form. It also converts special characters to hex value and white space in to (+)sign. This is by default value of enctype attribute.

(7) novalidate

When you define novalidate attribute to form element, form data will not validate after submitted.

After getting about form attributes, now we are moving to other form elements.

The HTML4 form elements

<label>
<input>(describes in previous post)
<select> and <option>
<textarea>
<button>
<fieldset> and <legend>
<optgroup>

(1) <label>

The <label> element display text on browser. This text notify the user about what the purpose of html form elements.

The “for” attribute of <label> element should be similar to “id” attribute of <input> element, So that <label> and <input> elements are connected.

For example,

<label for="fnm">First_name:

</label><br>

Output of label element

(2) <select> and <option>

The <select> element display drop-down list, to select an option from that list.
The <option> element specify the list of multiple options.
By default first option is selected.
If you want other option already selected, specify selected attribute to that specific <option> element.
You can also choose multiple options using multiple attribute.

For example,

<h2> Qualification:</h2>

<option value="bsc.it">BSc.IT

</option>

<option value="msc.it">Msc.IT

</option>

</select>

Output of <select> and <option>

(3) <textarea>

The <textarea> element provide multi-line input for user. You can increase or decrease element’s height and width using cols and rows attributes.

cols attribute specify width and rows attribute specify height of <textarea>.

For example,

<h2>Please drop your comment here.</h2>

</textarea>

<textarea> element

(4) <button>

The <button> element display button. Mostly <button> used for javascript event handlers.

For example,

<button type="button" onclick="alert('Welcome to my BLOG')">Click here to see message</button>

<button> element

(5) <fieldset> and <legend>

The <fieldset> element specify a section in form. This element combine the related input data.

The <legend> element gives the title to group of <input> elements in <fieldset>.

For example,

<legend>Personal information</legend>

<label for="fnm">First_name:

</label><br>

<label for="fnm">Last_name:

</label><br>

</fieldset>

<fieldset> and <legend> element

(6) <optgroup>

The <optgroup> element group together related options list under one category in drop-down list.

When you have large number of options use this element.

It gives better experience to user.

For example,

<label for="course">Select your course:</label>

</optgroup>

</optgroup>

</select>

</form>

<optgroup> element

HTML 5 form elements

HTML 5 introduce some new form elements.

<datalist>
<keygen>
<output>

<datalist>

<datalist> element specify the pre-define option list for user input.
Define <datalist> element under <input> element.

Value of list attribute must be same with value of id attribute of <datalist>.

<!Doctype html>
<html>
<head>
<title>HTML5 attributes</title>
</head>
<body>
<form name="f1" action="#">
<h1>Select your day:</h1>
<!--datalist-->
<input list="days">
<datalist id="days">
<option value="Sunday">
<option value="Monday">
<option value="Tuesday">
<option value="Wednesday">
<option value="Thursday">
<option value="Friday">
<option value="Saturday">
</datalist>

</form>
</body>
</html>

Output:-

HTML5 <datalist> element

<keygen>

<keygen> element authenticate user. This element create a field for generate key. When user submit form data browser generate keys: Private key and Public key.

The private key stored locally and public key sent to server.

It is one type of data encryption.

<!Doctype html>
<html>
<head>
<title>HTML5 attributes</title>
</head>
<body>
<form name="f1" action="#">
<!--keygen-->
Email_id:-<br>
<input type="email" name="em"><br>
Passwprd:-<br>
<input type="password" name="pwd"><br>
Data encrtyption<keygen name="encryptdata">
<input type="submit" value="Submit">

</form>
</body>
</html>

Output:-

HTML5 <keygen> element

<output>

<output> element used for display result of calculation. The calculation performed in javascript.

<!Doctype html>
<html>
<head>
<title>HTML5 attributes</title>
<style>
body{
background-color:#FF9878;}
form{
background-color:#FF6A7B;}
</style>
</head>
<body>
<h2>Enter two number and dispaly summation.</h2>
<form name="f1" action="#" oninput="sum.value=parseInt(no1.value)+parseInt(no2.value)">
No1:
<input type="number" name="no1" value="">
No2:
<input type="number" name="no2" value="">
SUM=
<output name="sum"></output>
</select>
</form>
</body>
</html>

Output:-

HTML5 <output> element

student data collector form

HTML code:-

<!Doctype html>
<html>
<head>
<title>Student data</title>
<link rel="stylesheet" type="text/css" href="std.css">
</head>
<body>
<section>
<form name="f1" target="#" method="post">
<h1>Student Record</h1>
<fieldset>
<legend>-:Personal Information:-</legend>
<label for="fullnm">Full_name:</label><br>
<input type="text" name="fullnm" id="fnm" placeholder="Enter your name"></br>
<label for="bdt">Birthdate:</label><br>
<input type="date" name="bdt" id="birth" min="1990-12-31" max="2000-12-31"></br>
<label for="Age" >Age:</label><br>
<input type="number" name="age" id="ag" min=5 max=12></br>
<label for="gend">Gender:</label><br>
<input type="radio" name="gend" id="gen" value="Male" checked>Male
<input type="radio" name="gend" id="gen" value="Female">Female</br>
<label for="addrs">Address:</label><br>
<textarea name="addr" rows="5" cols="20"></textarea></br>
<label for="phone">Contact no:</label><br>
<input type="tel" name="phone" id="phno" pattern="[0-9]{5}-[0-9]{5}">
</fieldset>
<h3>STUDENT PROFILE</h3>
<label for="enroll">Enrollment no:</label><br>
<input type="text" name="enroll" id="erno" required></br>
<label for="std">Standard:</label>
<select name="std" id="std">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
<option value="1">7</option>
<option value="1">8</option>
<option value="1">9</option>
<option value="1">10</option>
</select>
<label for"class">Class:</label>
<select name="cls" id="cls">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select><br>
<label for="sport">Sports activity:</label>
<br><br>
<input type="checkbox" name="cricket">Cricket
<input type="checkbox" name="basketball">Basketball<br>
<input type="checkbox" name="football" id="ftb">Football
<input type="checkbox" name="Table tenis" id="tbl">Table tenis
<br>
<label for="attand" id="atd">Attandence:</label>
<input type="radio" name="hundrd" id="attd" value="100%">100%
<input type="radio" name="fifty" id="attd" value="80%">80%
<input type="radio" name="gend" id="gen" value="50%">50%
<input type="radio" name="gend" id="gen" value="30%">30%</br>
<label for="grd" id="gr">Grade:</label>
<input type="radio" name="grade" id="grd" value="First">First class
<input type="radio" name="grade" id="grd" value="Second">Second class
<input type="radio" name="grade" id="grd" value="Fail">Fail</br>
<input type="submit" id="submt" value="Submit">
<input type="reset" name="rset" value="Reset">
</form>
</section>
</body>
</html>

CSS code:-

section{
position:absolute;
top:160px;
left:160px;
background:linear-gradient(black,silver,black);
color:#ccf;
border-radius:20px;
margin:30px;
padding:15px;
font-size:16pt;
box-shadow:5px 5px 7px black;
}
label{
margin:5px;
padding-right:20px;
width:300px;
}
input[type],select{
margin:20px 20px;
padding:3px;
height:30px;
width:100;
display:inline-block;
border:2px solid gray;
border-radius:10px;
}
textarea{
padding:3px;
margin:20px 20px;
height:60px;
width:120;
border:2px solid gray;
border-radius:10px;
}
#submt,input[type=reset]{
width:100px;
height:50px;
background:radial-gradient(black,gray);
color:#fcf;
font-size:16pt;
border:2px solid gold;
}
#sprt{
position:absolute;
left:200px;
top:1010px;
}