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
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
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
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>
Join the conversation! Your thoughts help the community grow.