Header Ads Widget

What is HTML form & how to create form?

My codding spot July 17, 2021

 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, 

<form name="frm1">

(2) action

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

<form name="frm1" action="/indexpage.php">

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

<form name="frm1" action="/home_page.php" method="post ">


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

<form name="frm1" action="/index.php" target="_blank">

(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 name="frm1" action="#" target="_blank" autocomplete="on">

Form Autocomplete attribute
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. 

<form name="frm1" action="/image_gallery.php" target="_blank" enctype="multipart/form-data">


(7) novalidate

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

<form name="frm1" action="/home.php" novalidate>

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>
   <input type="text" name="fnm">

<label> element
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>
    <select name="qaul" multiple>
    <option value="bca">BCA</option>
    <option value="mca">MCA</option>
    <option value="bsc.it">BSc.IT
    </option>
    <option value="msc.it">Msc.IT
    </option>
    </select>
<select> and <option> elements
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 rows="10" cols="30">
</textarea>
<textarea> element
<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>
Output of <button> element
<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, 
<fieldset>
   <legend>Personal information</legend>
   <label for="fnm">First_name:
    </label><br>
   <input type="text" name="fnm"><br>
   <label for="fnm">Last_name:
    </label><br>
    <input type="text" name="lnm"><br><br>
    <input type="submit" value="Submit">
</fieldset>
<fieldset> and <legend> output
<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>
<select name="course">
<optgroup label="Computer Technology">
<option value="bca">BCA</option>
<option value="bca">MCA</option>
<option value="bca">Bsc.IT</option>
<option value="bca">Msc.IT</option>
</optgroup>
<optgroup label="Medical">
<option value="bca">MBBS</option>
<option value="bca">B.D.S</option>
<option value="bca">M.D</option>
</optgroup>
</select>
</form>
Output of <optgroup> element
<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>.



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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
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. 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!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
HTML5 <keygen> element 

<output>

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


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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
HTML5 <output> element 

 student data collector form 

HTML  code:-

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!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:-


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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;
}

Output:-
Student form
Student form 

Conclusion:-
All the form element plays different roles. 
One thing remember that values of input controls do not submitted if you not define them in between <form></form>.

Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments