Introduction
HTML uses predefined tags and elements that inform the browser how to display the content on screen, and form is one of them. An HTML form is a section of a document that contains controls such as text fields, password fields, checkboxes, radio buttons, submit buttons, menus, etc. An HTML form facilitates the user to enter data that is to be sent to the server for processing, such as name, email address, password, phone number, etc. In this article, we will learn about HTML form its element and how we can use it on our web page.
HTML Form
The form is generally used when we want to collect information(data) from users. For example, a person wants to buy a shirt online, so first, he will fill in the address details in the address form and payment details in the payment form.
Syntax
<form>
<!-- form elements -->
</form>
HTML Form Elements
- label
- input
- button
- select
- fieldset
- textarea
- legend
- output
- datalist
- optgroup
- option
HTML <input> Element
This element is a fundamental form element. It is used to create form fields and to take input from the user. You can apply different input filed to gather different data from the user.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<!-- setting the character encoding -->
<meta charset="UTF-8">
<!-- Adding the author name -->
<meta name="author" content="Punar Dutt"/>
<title>Introduction to forms in HTML</title>
</head>
<body style="background-color: rgb(153, 176, 197); text-align: center;">
<div>
<h1>Introduction To Forms in HTML</h1>
</div>
<form>
Enter your name <br>
<input type="text" name="username"> <!-- input box for username -->
</form>
</body>
</html>
Output
![forms-in-html]()
HTML <label> Element
We use the <label> tag by providing the <input> and id atattributesThe <label> tag requires a for attribute whose value is the same as the input id. The <input> tag uses e directly inside the <label> tag. In this case, the for and id attributes are not needed because the association is implicit.
- for- It refers to the input control that this label is for. Its value must be the same as the value of the input control's id attribute.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<!-- setting the character encoding -->
<meta charset="UTF-8">
<!-- Adding the author name -->
<meta name="author" content="Punar Dutt"/>
<title>Introduction to forms in HTML</title>
</head>
<body style="background-color: rgb(153, 176, 197); text-align: center;">
<div>
<h1>Introduction To Forms in HTML</h1>
</div>
<form>
<label for="doctor"> <!-- Use of lable tag -->
Doctor
</label>
<input type="radio" name="Occupation"
id="doctor" value="doctor"><br>
<label for="Engineer">
Engineer
</label>
<input type="radio" name="Occupation"
id="Engineer" value="Engineer"><br>
<label for="Lawyer">
Lawyer
</label>
<!-- Ends label tags here -->
<input type="radio" name="Occupation"
id="Lawyer" value="Lawyer">
</form>
</body>
</html>
Output
![label-output]()
HTML <textarea> Element
The <textarea> tag is used for multiline input control. It is used in form to collect user inputs that are in multi-lines like comments and reviews. It can hold an unlimited number of characters. Its size is specified by row and col attributes, or we can define it with the help of CSS. The name attribute defines to reference of the form data after the form is submitted. The id attribute associates the text area with the label.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<!-- setting the character encoding -->
<meta charset="UTF-8">
<!-- Adding the author name -->
<meta name="author" content="Punar Dutt"/>
<title>Introduction to forms in HTML</title>
</head>
<body style="background-color: rgb(153, 176, 197); text-align: center;">
<div>
<h1>Introduction To Forms in HTML</h1>
</div>
<form id="user">
Name: <input type="text" name="username">
<input type="submit">
</form>
<br>
<textarea rows="9" cols="70" name="comment" form="user">
Enter text here</textarea>
</body>
</html>
Output
![textarea output]()
HTML <legend> Element
HTML <legend> tag is used to give a title or caption to its parent element such as <fieldset>. The legend elements are the parent elements.
Syntax
<legend> Text </legend>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<!-- setting the character encoding -->
<meta charset="UTF-8">
<!-- Adding the author name -->
<meta name="author" content="Punar Dutt"/>
<title>Introduction to form in HTML</title>
</head>
<body style="background-color: rgb(153, 176, 197);">
<div>
<h1>Introduction To Forms in HTML</h1>
</div>
<div>
<form>
<fieldset>
<legend>Student details:</legend>
<label>First Name</label><br>
<input type="text" name="fname"><br>
<label>Last Name</label><br>
<input type="text" name="lname"><br>
<label>Enter Email</label><br>
<input type="email" name="email"><br><br>
<input type="Submit"><br>
</fieldset>
</form>
</div>
</body>
</html>
Output
![legend output]()
HTML Password
In the HTML password field control, the password is not visible to the user.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<!-- setting the character encoding -->
<meta charset="UTF-8">
<!-- Adding the author name -->
<meta name="author" content="Punar Dutt"/>
<title>Introduction to forms in HTML</title>
</head>
<body style="background-color: rgb(153, 176, 197); text-align: center;">
<div>
<h1>Introduction To Forms in HTML</h1>
</div>
<form id="user">
Name: <input type="text" name="username">
<input type="submit">
<label for="password">Password: </label>
<input type="password" id="password" name="password"/> <br/>
</form>
<br>
<textarea rows="9" cols="70" name="comment" form="user">
Enter text here</textarea>
</body>
</html>
Output
![password output]()
HTML <button> form Attribute
The HTML button form attribute is for the one or more forms that the <button> elements belong to.
Syntax
<button form="form_id">
Example
<!DOCTYPE html>
<html lang="en">
<head>
<!-- setting the character encoding -->
<meta charset="UTF-8">
<!-- Adding the author name -->
<meta name="author" content="Punar Dutt"/>
<title>Introduction to forms in HTML</title>
</head>
<body style="background-color: rgb(153, 176, 197); text-align: center;">
<div>
<h1>Introduction To Forms in HTML</h1>
</div>
<form id="user">
Name: <input type="text" name="username">
<label for="password">Password: </label>
<input type="password" id="password" name="password"/> <br/>
</form>
<br>
<textarea rows="9" cols="70" name="comment" form="user">
Enter text here</textarea> <br>
<button form="user">Submit</button>
</body>
</html>
Output
![button form attribute output]()
The <optgroup> and <select>
HTML <optgroup> is used to group related options within the <select> element. This tag is used when there is a long list of items that exist.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<!-- setting the character encoding -->
<meta charset="UTF-8">
<!-- Adding the author name -->
<meta name="author" content="Punar Dutt"/>
<title>Introduction to forms in HTML</title>
</head>
<body style="background-color: rgb(153, 176, 197); text-align: center;">
<div>
<h1>Introduction To Forms in HTML</h1>
</div>
<label >Select Your Brand</label>
<select>
<optgroup label="Four Wheelar Maufacturur">
<option value="Tata">Tata</option>
<option value="Hyundai">Hyundai</option>
<option value="MG">MG</option>
<option value="Tesla">Tesla</option>
</optgroup>
<optgroup label="Motorbike Manufacturer">
<option value="Hero">Hero</option>
<option value="Yamaha">Yamaha</option>
<option value="Bajaj">Bajaj</option>
<option value="Royal Enfield">Royal Enfield</option>
</optgroup>
</select>
</body>
</html>
Output
![forms-in-html]()
The Action Attribute
The action attribute is used to define the action to be performed when the form is submitted.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<!-- setting the character encoding -->
<meta charset="UTF-8">
<!-- Adding the author name -->
<meta name="author" content="Punar Dutt"/>
<title>Introduction to forms in HTML</title>
</head>
<body style="background-color: rgb(153, 176, 197); text-align: center;">
<div>
<h1>Introduction To Forms in HTML</h1>
</div>
<form action="action.html" method="post">
<label>User Name:</label><br>
<input type="text" name="name"><br><br>
<label>User Password</label><br>
<input type="password" name="pass"><br><br>
<input type="submit">
</form>
</body>
</html>
The Method Attribute
The method attribute defines the HTTP method to be used when submitting the form data. The form data can be sent as URL variables (with method= "get") or as HTTP post transaction (with method= "post").GET is the default method when submitting the form.
The Target Attribute
The target attribute describes where to display the response that is received after submitting the form. target attribute can have one of the following different values.
| Value |
Description |
| _blank |
The response is displayed in a new window or tab. |
| _self |
The response is displayed in the current window |
| _top |
The response is displayed in the full body of the window |
| _parent |
The response is displayed in the parent frame |
| framename |
The response is displayed in a named iframe. |
We can use desired target values as per our requirements.
Conclusion
We have seen the basic form creation in HTML and its attributes. An HTML form is a section of a document that contains controls such as text fields, password fields, checkboxes, radio buttons, submit buttons, menus, etc. that facilitates the user to enter data that is to be sent to the server for processing.