An HTML form is a segment within a webpage that includes elements like text fields, password fields, checkboxes, radio buttons, a submit button, menus, and more.
An HTML form enables users to input data that will be transmitted to the server for further processing, including details like name, email address, password, phone number, and more.
Why use HTML Form
HTML forms are essential when gathering information from visitors to a website.
For instance: When a user wishes to buy products online, they are required to complete a form including their shipping address and credit/debit card information so that the purchased item can be dispatched to the specified address.
HTML Form Syntax
<form action="server url" method="get|post">
//input controls e.g. textfield, textarea, radiobutton, button
</form>
HTML Form Tags
Let's see the list of HTML 5 form tags.
| Tag | Description |
|---|---|
<form> |
It defines an HTML form to enter inputs by the used side. |
<input> |
It defines an input control. |
<textarea> |
It defines a multi-line input control. |
<label> |
It defines a label for an input element. |
<fieldset> |
It groups the related element in a form. |
<legend> |
It defines a caption for a <fieldset> element. |
<select> |
It defines a drop-down list. |
<optgroup> |
It defines a group of related options in a drop-down list. |
<option> |
It defines an option in a drop-down list. |
<button> |
It defines a clickable button. |
HTML 5 Form Tags
Let's see the list of HTML 5 form tags.
| Tag | Description |
|---|---|
<datalist> |
It specifies a list of pre-defined options for input control. |
<keygen> |
It defines a key-pair generator field for forms. |
<output> |
It defines the result of a calculation. |
HTML <form> element
The HTML <form> element offers a designated area within a document where users can input data. This element includes a range of interactive features like text fields, text areas, password fields, and more, allowing users to submit information to a web server.
Note: The <form> element does not itself create a form but it is container to contain all required form elements, such as <input>, <label>, etc.
Syntax:
<form>
//Form elements
</form>
HTML <form> element
The HTML <input> element is a crucial form element that enables the creation of form fields for user input. Various input fields can be implemented to collect diverse information from users. Below is an illustration demonstrating a basic text input.
Example:
<body>
<form>
Enter your name <br>
<input type="text" name="username">
</form>
</body>
Output:
HTML TextField Control
The attribute type="text" in the input tag generates a textfield control, also referred to as a single-line textfield control. While the name attribute is not mandatory, it becomes necessary for server-side components like JSP, ASP, PHP, and others.
<form>
First Name: <input type="text" name="firstname"/> <br/>
Last Name: <input type="text" name="lastname"/> <br/>
</form>
Output:
Note: If you will omit 'name' attribute then the text filed input will not be submitted to server.
HTML <textarea> tag in form
The <textarea> tag within HTML is employed to include text that spans across multiple lines within a form. The dimensions of <textarea> can be defined using either the "rows" and "cols" attributes or through CSS styling.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<form>
Enter your address:<br>
<textarea rows="2" cols="20"></textarea>
</form>
</body>
</html>
Output:
Label Tag in Form
Having a label in a form is advantageous as it enhances the user-friendliness of the code, making it more comprehensible for the parser, browser, and end-user.
Clicking on the label tag will shift the focus to the text control associated with it. This functionality requires the presence of a "for" attribute within the label tag. The value of the "for" attribute must match the "id" attribute of the input tag.
NOTE: It is good to use <label> tag with form, although it is optional but if you will use it, then it will provide a focus when you tap or click on label tag. It is more worthy with touchscreens.
<form>
<label for="firstname">First Name: </label> <br/>
<input type="text" id="firstname" name="firstname"/> <br/>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname" name="lastname"/> <br/>
</form>
Output:
HTML Password Field Control
The password remains hidden from the user within the password field control.
<form>
<label for="password">Password: </label>
<input type="password" id="password" name="password"/> <br/>
</form>
Output:
HTML 5 Email Field Control
The email input field was introduced in HTML 5 to validate the input for a correctly formatted email address. It requires the presence of both the "@" symbol and the "." symbol within the input to be considered valid.
<form>
<label for="email">Email: </label>
<input type="email" id="email" name="email"/> <br/>
</form>
It will display in browser like below:
Note: If we will not enter the correct email, it will display error like:
Radio Button Control
The radio button is employed to choose a single option from a range of options. It is commonly utilized for selecting gender, answering quiz questions, and similar scenarios.
If a single label is assigned to all radio buttons, only one radio button can be chosen simultaneously.
Utilizing radio buttons allows users to select only one option from a list of multiple choices at a time.
<form>
<label for="gender">Gender: </label>
<input type="radio" id="gender" name="gender" value="male"/>Male
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
</form>
Checkbox Control
The checkbox component is employed to select multiple choices from a group of checkboxes.
<form>
Hobby:<br>
<input type="checkbox" id="cricket" name="cricket" value="cricket"/>
<label for="cricket">Cricket</label> <br>
<input type="checkbox" id="football" name="football" value="football"/>
<label for="football">Football</label> <br>
<input type="checkbox" id="hockey" name="hockey" value="hockey"/>
<label for="hockey">Hockey</label>
</form>
Note: These are similar to radio button except it can choose multiple options at a time and radio button can select one button at a time, and its display.
Output:
Submit button control
HTML <input type="submit"> are implemented to incorporate a submission button within a web page. Upon clicking the submit button, the form is then submitted to the server.
Syntax:
<input type="submit" value="submit">
Specifying a type of "submit" indicates that it is a button used for submitting a form.
The value attribute can be any text that we assign to a button on a webpage.
The name attribute can be omit here.
Example:
<form>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</form>
Output:
HTML <fieldset> element:
The <fieldset> tag in HTML is employed to organize related information within a form. It pairs with the <legend> tag, which offers a caption for the grouped elements.
Example:
<form>
<fieldset>
<legend>User Information:</legend>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</fieldset>
</form>
Output:
HTML Form Example
Below is an illustration of a basic registration form.
<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<h2>Registration form</h2>
<form>
<fieldset>
<legend>User personal information</legend>
<label>Enter your full name</label><br>
<input type="text" name="name"><br>
<label>Enter your email</label><br>
<input type="email" name="email"><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br>
<label>confirm your password</label><br>
<input type="password" name="pass"><br>
<br><label>Enter your gender</label><br>
<input type="radio" id="gender" name="gender" value="male"/>Male <br>
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
<input type="radio" id="gender" name="gender" value="others"/>others <br/>
<br>Enter your Address:<br>
<textarea></textarea><br>
<input type="submit" value="sign-up">
</fieldset>
</form>
</body>
</html>
Output:
HTML Form Example
Let's see a simple example of creating HTML form.
<form action="#">
<table>
<tr>
<td class="tdLabel"><label for="register_name" class="label">Enter name:</label></td>
<td><input type="text" name="name" value="" id="register_name" style="width:160px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_password" class="label">Enter password:</label></td>
<td><input type="password" name="password" id="register_password" style="width:160px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_email" class="label">Enter Email:</label></td>
<td
><input type="email" name="email" value="" id="register_email" style="width:160px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_gender" class="label">Enter Gender:</label></td>
<td>
<input type="radio" name="gender" id="register_gendermale" value="male"/>
<label for="register_gendermale">male</label>
<input type="radio" name="gender" id="register_genderfemale" value="female"/>
<label for="register_genderfemale">female</label>
</td>
</tr>
<tr>
<td class="tdLabel"><label for="register_country" class="label">Select Country:</label></td>
<td><select name="country" id="register_country" style="width:160px">
<option value="india">india</option>
<option value="pakistan">pakistan</option>
<option value="africa">africa</option>
<option value="china">china</option>
<option value="other">other</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"><div align="right"><input type="submit" id="register_0" value="register"/>
</div></td>
</tr>
</table>
</form>
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<form> |
Yes | Yes | Yes | Yes | Yes |