HTML <form> Tag
In this blog we will look at the <form> Tag and also look at the tags inside the form tag with examples
An HTML <form> can be a section of a document that has controls such as text fields, positive identification fields, checkboxes, radio buttons, submit button, menus, etc.
The HTML <form> allows the user to enter the information sent to the server for processing such as name, email address, password, signaling, etc.
Table of Contents
Why use HTML <form>?
HTML creates the required square measure if you want to gather some knowledge from the location visitor.
For example:- If the user needs to purchase some items on the net, he should fill in the form like shipping address and credit / debit card details so that the item will be sent to the given address.
Example:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML form Tag</title>
</head>
<body>
<h1>HTML form Tag Example</h1>
<form action="#" method="get">
<label for="name">Enter Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="name">Enter Password:</label>
<input type="text" id="name" name="name"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Output:-
Let’s look at a list of HTML5 <form> Tags. And let’s look at the example of all its Tags.
HTML <form> Tags
- <form>
- <input>
- <textarea>
- <label>
- <fieldset>
- <legend>
- <select>
- <optgroup>
- <option>
- <button>
- <datalist>
- <keygen>
- <output>
HTML <input> Tag
The HTML <input> Tag is used to represent form input control in an HTML document. This form input control allows the user to input data and communicate with the website or application. Let’s take the example of an HTML form with three input fields, two text fields and a button for submission.
Example:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML input Tag</title>
</head>
<body>
<h1>HTML input Tag Example</h1>
<form action="#">
First name: <input type="text" name="FirstName" placeholder="enter firstname..."><br> <br>
Last name: <input type="text" name="LastName" placeholder="enter lastname..."><br> <br>
<input type="submit" value="Submit">
</form>
</body>
</html>Output:-
HTML <textarea> Tag
HTML <textarea> Tag
HTML <textarea> tags are used to define multiple line text input controls.
Using HTML <textarea> tags you can hold an unlimited number of characters and texts are displayed in a fixed width font (usually a courier) and texts are displayed in a fixed width font (usually a courier).
The height and width of HTML textarea is defined by the and attribute, or it can also be defined by the CSS height height and width properties.
Example:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Textarea Tag</title>
</head>
<body>
<h1>HTML Textarea Tag Example</h1>
<form action="#">
ADDRESS : <textarea rows="5" cols="50" placeholder="Enter your Address"></textarea>
<input type="submit" value="Submit">
</form>
</body>
</html>Output:-
HTML <label> Tag
HTML <label> Tag
The tag is used to specify a label for the element of the form. It adds a label to the form control such as text, email, password, textrae etc. It toggles the control when the user clicks on the text in the <label> element.
It is considered better to have a label in the form. Because it makes the code parser / browser / user friendly.
If you click on a label tag, it will become an expert in text management. To do this, you want to get the attribute in the label tag that should be the same as the ID attribute of the input tag.
Note:- It is good to use the tag with the form, although it is X Gracia. However, if you can use it, then you will notice it after you tap or click on the label tag. It deserves extra with the touchscreen.
Example:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Label Tag</title>
</head>
<body>
<h1>HTML Label Tag Example</h1>
<form>
<label for="firstname">First Name: </label> <br>
<input type="text" id="firstname" name="firstname"/> <br>
<label for="lastname">Last Name: </label> <br>
<input type="text" id="lastname" name="lastname"/> <br> <br>
<input type="submit" name="submit">
</form>
</body>
</html>Output:-
HTML <fieldset> Tag
HTML <fieldset> Tag
The HTML <fieldset> Tag is used to clustering logically connected fields/labels in the Associate Hypertext Markup Language type.
The use of this tag is optional when creating HTML forms, but using <filedset>, it is easier to understand the purpose of the grouped elements of the form.
