The HTML Forms are an integral part of the web page. The basic purpose of the form is to collect information. The form is created using <form> tag. The <form> tag is the container for all the input controls of the form such as Labels, Text Input, TextArea, Checkboxes, Radio Buttons, Select Menus/ Dropdown List, Listboxes, and Buttons. The <form> tag and all the other Input Control tags must have an attribute name, such that the data collected through forms can be retrieved.
The <form> tag has several attributes:
- name – used to specify the name of the Form
- action – used to specifies the location where the form data should be sent to the process
- method – used to specifies the method through which data is sent. The values for method attribute are GET and POST
- get – Sends the data to the server attached to the end of the URL
- post – Sends the data to the server in the message body
- enctype – This attribute can only be used with the POST method. This attribute is used for sending a large amount of data such as an attachment or for uploading images or pdf files.
The HTML code given below describes the use of <form> tag with all the possible attributes:
[html]
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<p>This is the description of form tag</p>
<form name=”f1″ method=”get” action=”http://abc.com/process.jsp” enctype=”multipart/form-data” >
</form>
</body>
</html>
[/html]
The video below demonstrates the complete working of HTML Form tag and Input Control Tags
Text Input Control
The <input> tag with the value of the type attribute as “text” is used to create Text Input Controls. Apart from the name as the attribute, there are several optional attributes that can be used with the <input> tag:
- size – used to specify the length of the Text Input Control in characters
- maxlength – used to specify the maximum number of characters that can be entered by the user
- value – used to specify default text from the Input Control
The HTML code given below demonstrates the use of <input> tag with type attribute as “text” to create textfield controls:
[html]
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<h3>Demonstrates creating Textfield Input Control for Web Page Form</h3>
<form name=”f1″ method=”get” action=”” >
Name: <input type=”text” name=”sname” />
<br/><br/><br/>
Name: <input type=”text” name=”sname” size=”50″ maxlength=”100″ />
<br/><br/><br/>
Date of Birth: <input type=”text” name=”dob” value=”DD/MM/YYYY” />
</form>
</body>
</html>
[/html]
The output of the HTML code to create textfield is shown below:
Password Input Control
The <input> tag with the value of the type attribute as “password” is used to create Password Input Controls. This Input Control also supports name, size, maxlength, and value as optional attributes. The HTML code given below demonstrates the use of <input> tag with type attribute as “password” to create password controls:
[html]
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<h3>Demonstrates creating Password Input Control for Web Page Form</h3>
<form name=”f1″ method=”get” action=”” >
Password: <input type=”password” name=”pwd” />
<br/><br/><br/>
Password: <input type=”password” name=”pwd” size=”50″ />
</form>
</body>
</html>
[/html]
The output of the HTML code to create the password field is shown below:
Checkboxes
The Checkboxes are Input Controls that are used to select a single option from the list of options. The <input> tag with the value of the type attribute as “checkbox” is used to create Checkboxes. This Input Control also supports name, value and checked as optional attributes. The HTML code given below demonstrates the use of <input> tag with type attribute as “checkbox” to create Checkbox controls:
[html]
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<h3>Demonstrates creating Checkbox Input Control for Web Page Form</h3>
<form name=”f1″ method=”get” action=”” >
<h4>List of Countries</h4>
<input type=”checkbox” name=”country” value=”US”/>United States of America<br/>
<input type=”checkbox” name=”country” value=”GR”/>Germany<br/>
<input type=”checkbox” name=”country” value=”IN”/>India<br/>
<input type=”checkbox” name=”country” value=”UK”/>United Kingdom<br/>
<h4>List of Countries with prechecked value</h4>
<input type=”checkbox” name=”country” value=”US”/>United States of America<br/>
<input type=”checkbox” name=”country” value=”GR”/>Germany<br/>
<input type=”checkbox” name=”country” value=”IN” checked=”checked”/>India<br/>
<input type=”checkbox” name=”country” value=”UK”/>United Kingdom<br/>
</form>
</body>
</html>
[/html]
The output of the HTML code to create the checkboxes is shown below:
Radio Buttons
The Radio Buttons are Input Controls that are used to select multiple options from the list of options. The <input> tag with the value of the type attribute as “radio” is used to create Radio Buttons. This Input Control also supports name, value and checked as optional attributes. The HTML code given below demonstrates the use of <input> tag with type attribute as “radio” to create Radio Button controls:
[html]
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<h3>Demonstrates creating Radio Button Input Control for Web Page Form</h3>
<form name=”f1″ method=”get” action=”” >
<h4>List of Countries</h4>
<input type=”radio” name=”country” value=”US”/>United States of America<br/>
<input type=”radio” name=”country” value=”GR”/>Germany<br/>
<input type=”radio” name=”country” value=”IN”/>India<br/>
<input type=”radio” name=”country” value=”UK”/>United Kingdom<br/>
<h4>List of Countries prechecked value</h4>
<input type=”radio” name=”country” value=”US”/>United States of America<br/>
<input type=”radio” name=”country” value=”GR”/>Germany<br/>
<input type=”radio” name=”country” value=”IN” checked=”checked”/>India<br/>
<input type=”radio” name=”country” value=”UK”/>United Kingdom<br/>
</form>
</body>
</html>
[/html]
The output of the HTML code to create the radio buttons is shown below:
Select Menus
The Select Menus or Dropdown Boxes are Input Controls that are used to select a single option from the huge list of options. The <select> tag is used to create Select Menus. This tag supports name as an attribute. The option to be selected is listed with <option> tag having value as the attribute. This <option> tag also has selected as an optional attribute. The HTML code given below demonstrates the use of <select> tag with <option> tag to create Select or Dropdown controls:
[html]
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<h3>Demonstrates creating Select Menu Input Control for Web Page Form</h3>
<form name=”f1″ method=”get” action=”” >
<h4>List of Countries</h4>
<select name=”country”>
<option value=”US”>United States of America</option>
<option value=”GR”>Germany</option>
<option value=”IN”>India</option>
<option value=”UK”>United Kingdom</option>
</select>
<h4>List of Countries with preselected value</h4>
<select name=”country”>
<option value=”US”>United States of America</option>
<option value=”GR”>Germany</option>
<option value=”IN” selected=”selected”>India</option>
<option value=”UK”>United Kingdom</option>
</select>
</form>
</body>
</html>
[/html]
The output of the HTML code to create select, dropdown and menu is shown below:
Listbox
The Listbox Input Control is same as Select Menus except that they are used to select multiple options from the huge list of options. The <select> tag is used to create Listboxes with an attribute multiple. This tag supports name as an attribute. The option to be selected is listed with <option> tag having value as the attribute. This <option> tag also has selected and size as an optional attribute. The HTML code given below demonstrates the use of <select> tag with multiple attributes to create Listbox controls:
[html]
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<h3>Demonstrates creating Listbox Input Control for Web Page Form</h3>
<form name=”f1″ method=”get” action=”” >
<h4>List of Countries</h4>
<select name=”country” multiple=”multiple”>
<option value=”US”>United States of America</option>
<option value=”GR”>Germany</option>
<option value=”IN”>India</option>
<option value=”UK”>United Kingdom</option>
</select>
<h4>List of Countries with preselected value</h4>
<select name=”country” multiple=”multiple”>
<option value=”US”>United States of America</option>
<option value=”GR”>Germany</option>
<option value=”IN” selected=”selected”>India</option>
<option value=”UK”>United Kingdom</option>
</select>
</form>
</body>
</html>
[/html]
The output of the HTML code to create list boxes is shown below:
Submenus
The Select Menus can be divided into categories of submenus. To create submenus <optgroup> tag is used along with <select> tag. The rest of the attributes of the <select> tag remains same. The HTML code given below demonstrates the use of <select> tag with <optgroup> tag to create Submenu controls:
[html]
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<h3>Demonstrates creating Select Menu with Submenues Input Control for Web Page Form</h3>
<h4>Book your reservation</h4>
<form name=”f1″ method=”get” action=”” >
<select name=”reservation”>
<optgroup label=”Morning”>
<option value=”09:00″>Breakfast 09:00 AM</option>
<option value=”10:00″>Breakfast 10:00 AM</option>
</optgroup>
<optgroup label=”Afternoon”>
<option value=”13:00″>Lunch 01:00 PM</option>
<option value=”14:00″>Lunch 02:00 PM</option>
</optgroup>
</select>
</form>
</body>
</html>
[/html]
The output of the HTML code to create submenus is shown below:
Text Area Input Control
The <textarea> tag is used to create TextAreas Input Controls. Apart from the name as the attribute, there are several optional attributes that can be used with the <textarea> tag:
cols – used to specify the width of the text area in characters
rows – used to specify the height of the text area
The HTML code given below demonstrates the use of <textarea> tag to create Text Area controls:
[html]
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<h3>Demonstrates creating TextArea Input Control for Web Page Form</h3>
<form name=”f1″ method=”get” action=”” >
Address: <br/>
<textarea name=”addr”></textarea>
<br/><br/><br/>
Address: <br/>
<textarea name=”addr” cols=”100″ rows=”6″></textarea>
<br/><br/><br/>
Address: <br/>
<textarea name=”addr” cols=”100″ rows=”6″>
Building name
Street Number
State
</textarea>
</form>
</body>
</html>
[/html]
The output of the HTML code to create text area is shown below:
Buttons Input Controls
The Buttons Input Controls are created using <input> tag or <button> tag.
Creating Buttons through <input> tag:
The <input> tag with the value of the type attribute as “submit”, “reset” or “button” is used to create a Submit Button, Reset Button or other Buttons respectively. Apart from the name as the attribute, value attribute is also used, which displays text on the button. The HTML code given below demonstrates the use of <input> tag with type attribute as “submit”, “reset” and “button” to create Submit, Reset and Button controls:
[html]
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<h3>Demonstrates creating Submit, Reset and Other Buttons Input Control with input tag for Web Page Form</h3>
<form name=”f1″ method=”get” action=”” >
Name: <input type=”text” name=”sname” /> <br/><br/>
<input type=”submit” name=”bt1″ value=”Register” />
<br/><br/>
<input type=”reset” name=”bt1″ value=”Clear” />
<br/><br/>
<input type=”button” name=”bt3″ value=”Forgot Password” />
</form>
</body>
</html>
[/html]
The output of the HTML code to create buttons using <input> tag is shown below:
Creating Buttons through <button> tag:
The <button> tag with the value of the type attribute as “submit”, “reset” or “button” is used to create a Submit Button, Reset Button or other Buttons respectively. When using <button> tag its corresponding closing tag also needs to be used. The advantage of using <button> tag is that the images can also be made to function as a button. The HTML code given below demonstrates the use of <button> tag with type attribute as “submit”, “reset” and “button” to create Submit, Reset and Button controls:
[html]
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<h3>Demonstrates creating Submit, Reset and Other Buttons Input Control with button tag for Web Page Form</h3>
<form name=”f1″ method=”get” action=”” >
Name: <input type=”text” name=”sname” /> <br/><br/>
<button type=”submit” name=”bt1″>Submit</button>
<br/><br/>
<button type=”reset” name=”bt2″>Reset</button>
<br/><br/>
<button type=”button” name=”bt3″>Forgot Password</button>
<br/><br/>
<button type=”submit” name=”bt1″><img src=”logo.jpg” width=”100″ height=”50″/></button>
</form>
</body>
</html>
[/html]
The output of the HTML code to create buttons using <button> tag is shown below:
Keyboard Shortcut
The keyboard shortcuts can be created for any form of Input Controls. The “accesskey” attribute is used to create a keyboard shortcut for any of the form Input Control. Using the ALT+ “value of accesskey” on the keyboard focuses the Input Control to which the accesskey is applied. The HTML code given below demonstrates the use of keyboard shortcuts:
[html]
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<h3>Demonstrates keyboard shortcut for different Input Control of form for Web Page</h3>
<h4>Keyboard Shortcuts: Alt+N for Name Control, Alt+P for Password Control and Alt+S for Submit Control</h4>
<form name=”f1″ method=”get” action=”” >
Name: <input type=”text” name=”sname” accesskey=”N” />
<br/><br/><br/>
Password: <input type=”password” name=”pwd” accesskey=”P” />
<br/><br/><br/>
<input type=”submit” name=”bt1″ value=”Register” accesskey=”S” />
</form>
</body>
</html>
[/html]
The output of the HTML code to demonstrate the use of keyboard shortcuts attribute is shown below:
Readonly Attribute
The readonly attribute can be applied to any of the form Input Controls. When the readonly attribute is applied the users cannot change the content of the Input Control. The HTML code given below demonstrates the use of readonly attribute:
[html]
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<h3>Demonstrates Readonly Attribute on Input Control of Web Page Form</h3>
<form name=”f1″ method=”get” action=”” >
Name: <input type=”text” name=”sname” />
<br/><br/>
Password: <input type=”password” name=”pwd” value=”abcdef” readonly=”readonly” />
<br/><br/>
<input type=”submit” name=”bt1″ value=”Register” accesskey=”S” />
</form>
</body>
</html>
[/html]
The output of the HTML code to demonstrate the use of readonly attribute is shown below:Output:
Disabled Attribute
The disabled attribute can be applied to any of the form Input Controls. When the disabled attribute is applied the users cannot use the Input Control which is disabled. The HTML code given below demonstrates the use of disabled attribute:
[html]
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<h3>Demonstrates Disabled Attribute on Input Control of Web Page Form</h3>
<form name=”f1″ method=”get” action=”” >
Name: <input type=”text” name=”sname” />
<br/><br/>
Password: <input type=”password” name=”pwd” value=”abcdef” disabled=”disabled” />
<br/><br/>
<input type=”submit” name=”bt1″ value=”Register” accesskey=”S” />
</form>
</body>
</html>
[/html]
The output of the HTML code to demonstrate the use of the disabled attribute is shown below:
Complete Web Form
The HTML code given below demonstrate the use of all the <input> tag with different type attributes and <select> tag as well as <textarea> tag to create a complete HTML Web Form:
[html]
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<h3>Demonstrates creating HTML Form</h3>
<form name=”f1″ method=”get” action=”” >
Name: <input type=”text” name=”sname” /> <br/><br/>
Password: <input type=”password” name=”pwd” /> <br/><br/>
Vehicle Type:
<input type=”checkbox” name=”veh” value=”BK”/>Bike
<input type=”checkbox” name=”veh” value=”CA”/>Car
<input type=”checkbox” name=”veh” value=”SU”/>SUV
<input type=”checkbox” name=”veh” value=”CY”/>Cycle
<br/><br/>
Gender:
<input type=”radio” name=”gen” value=”M”/>Male
<input type=”radio” name=”gen” value=”F”/>Female
<br/><br/>
Countries:
<select name=”country”>
<option value=”US”>United States of America</option>
<option value=”GR”>Germany</option>
<option value=”IN”>India</option>
<option value=”UK”>United Kingdom</option>
</select>
<br/><br/>
Companies:<br/>
<select name=”company” multiple=”multiple”>
<option value=”AU”>Audi</option>
<option value=”ME”>Mercedes</option>
<option value=”VO”>Volvo</option>
<option value=”TO”>Toyota</option>
</select>
<br/><br/>
Address: <br/>
<textarea name=”addr”></textarea> <br/><br/>
<input type=”submit” name=”bt1″ value=”Register” />
<input type=”reset” name=”bt2″ value=”Clear” /> <br/>
</form>
</body>
</html>
[/html]
The output of the above HTML code is shown below:
Grouping of Form Input Controls
The <fieldset> tag, along with <legend> tag is used to group related or set of form Input Controls. The purpose of this grouping is to elegantly design the form web page. The HTML code to demonstrate the use of <fieldset> with <legend> tag is given below:
[html]
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<h3>Demonstrates creating HTML Form with Grouping</h3>
<form name=”f1″ method=”get” action=”” >
<fieldset>
<legend>Personal Information</legend>
Name: <input type=”text” name=”sname” /> <br/><br/>
Password: <input type=”password” name=”pwd” /> <br/><br/>
Gender:
<input type=”radio” name=”gen” value=”M”/>Male
<input type=”radio” name=”gen” value=”F”/>Female
</fieldset>
<br/><br/>
<fieldset>
<legend>Economic Data</legend>
Vehicle Type:
<input type=”checkbox” name=”veh” value=”BK”/>Bike
<input type=”checkbox” name=”veh” value=”CA”/>Car
<input type=”checkbox” name=”veh” value=”SU”/>SUV
<input type=”checkbox” name=”veh” value=”CY”/>Cycle
<br/><br/>
Countries:
<select name=”country”>
<option value=”US”>United States of America</option>
<option value=”GR”>Germany</option>
<option value=”IN”>India</option>
<option value=”UK”>United Kingdom</option>
</select>
<br/><br/>
Companies:<br/>
<select name=”company” multiple=”multiple”>
<option value=”AU”>Audi</option>
<option value=”ME”>Mercedes</option>
<option value=”VO”>Volvo</option>
<option value=”TO”>Toyota</option>
</select>
</fieldset>
<br/><br/>
<fieldset>
<legend>Residence Data</legend>
Address: <br/>
<textarea name=”addr”></textarea> <br/><br/>
<input type=”submit” name=”bt1″ value=”Register” />
<input type=”reset” name=”bt2″ value=”Clear” /> <br/>
</fieldset>
</form>
</body>
</html>
[/html]
The output of the above HTML code is shown below:
In conclusion, this post describes the use of different tags available in HTML to create forms to have interaction with the user and take input from the user.