In this HTML tutorial article, you will be told in detail about the HTML `<form>` tag. Here you will get to understand:
- What is the `<form>` tag?
- Why and how is it used?
- What are the input tags inside the form?
- What are the important attributes of the `<form>` tag?
- How is this form helpful in SEO (Search Engine Optimization)?
Let's understand step-by-step this is an important topic for HTML.
What is a form tag?
The `<form>` tag in HTML is used to collect data from any user. Whenever you sign up, login or give feedback on a website, you fill a form. All this is done with the help of the `<form>` tag.
A form is a structure that contains multiple fields, such as:
* Name
* Email
* Password
* Radio buttons
* Checkboxes
* Submit button, etc.
This form collects data from the user and then sends it to the backend or server for processing.
Why and how is the form tag used?
The form tag is used to:
* Take input from the user.
* Send the input data to a server or backend script (e.g. PHP, Node.js).
* Create user interaction.
Why and how is the form tag used?
The `<form>` tag contains all the input fields. When the user presses the "Submit" button, the form data is sent to the server (when specified in the 'action' attribute).
Important properties of the form tag
The form tag has several important properties that control its behavior. These attributes are given below:
1. Action - It tells which URL the data will go to after the form is submitted.
*Example: `action='/submit-form'`
2. Method - It tells how the data is sent: `GET` or `POST`.
* `GET` - The data is displayed in the URL.
* `POST` - The data is saved, not displayed in the URL.
3. Target - It decides in which window/tab the result will be opened.
* `_self` (default), `_blank`, `_parent`, `_top`
4. enctype - Used when a file is to be uploaded.
* Example: `enctype='multipart/form-data'`
5. autocomplete - Used to turn on or off whether the browser remembers the previous input.
6. novalidate - Used if you want form validation to be disabled.
Example of form tag (simple version)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Form Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 0;
background-color: #8a10e7;
}
form {
max-width: 400px;
margin: auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
input[type="text"],
input[type="email"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #8a10e7;
color: white;
padding: 10px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
input[type="submit"]:hover {
background-color: #7109c1;
}
</style>
</head>
<body>
<form action="submit.php" method="post">
<label for="username">Name:</label>
<input type="text" id="username" name="username" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Submit">
</form>
</body>
</html>
For example, user name and email is being taken and when the user submits, the data will be sent via POST method in the `submit.php` file.
About Input Tags
Inside HTML form we use input tags. These input tags are of different types and are used for different purpose. All commonly used input tags are mentioned below:
1. `<input type='text'>` - For text field in which user can enter any text.
2. `<input type="password">` - Password field in which the entered text is not visible.
3. `<input type='email'>` - For email address.
4. `<input type='number'>` - For taking number input only.
5. `<input type='checkbox'>` - For creating checkboxes.
6. `<input type="radio">` - For creating radio buttons (select options).
7. `<input type='submit'>` – To submit the form.
8. `<input type='reset'>` – To reset the form (clear all fields).
9. `<input type='file'>` – To upload a file.
10. `<input type=”hidden”>` – To send hidden data (not visible to the user).
11. `<input type='date'>` – For date picker.
12. `<input type='tel'>` – For phone number input.
13. `<input type='url'>` – For URL input.
14. `<input type='range'>` – For range slider.
15. `<textarea>` – for long messages or feedback (multi-line input).
16. `<select>` and `<option>` – for creating dropdown menus.
17. `<button>` – for creating custom buttons (or submit reset or any other action).
Example of full input tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Compact Responsive Form</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f5f5f5;
}
form {
max-width: 900px;
margin: auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
margin-bottom: 20px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input,
select,
textarea {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
width: 100%;
}
.form-row {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 15px;
}
.form-group {
flex: 1;
min-width: 180px;
}
.inline-group {
display: flex;
align-items: center;
gap: 15px;
}
input[type="radio"],
input[type="checkbox"] {
width: auto;
margin-right: 5px;
}
.button-group {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
input[type="submit"],
input[type="reset"] {
width: 48%;
padding: 10px;
font-weight: bold;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
}
input[type="reset"] {
background-color: #f44336;
color: white;
}
input[type="submit"]:hover {
background-color: #45a049;
}
input[type="reset"]:hover {
background-color: #e53935;
}
</style>
</head>
<body>
<form action="/submit-form" method="post" enctype="multipart/form-data">
<h2>Registration Form</h2>
<!-- Row 1: Name, Age, Email, Phone -->
<div class="form-row">
<div class="form-group">
<label for="username">Name</label>
<input type="text" id="username" name="username" required />
</div>
<div class="form-group">
<label for="age">Age</label>
<input type="number" id="age" name="age" min="0" />
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required />
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone" />
</div>
</div>
<!-- Row 2: Password, Gender, Country, File Upload -->
<div class="form-row">
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required />
</div>
<div class="form-group">
<label>Gender</label>
<div class="inline-group">
<label><input type="radio" name="gender" value="male" required> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>
</div>
</div>
<div class="form-group">
<label for="country">Country</label>
<select id="country" name="country">
<option value="">-- Select Country --</option>
<option value="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
</div>
<div class="form-group">
<label for="resume">Resume</label>
<input type="file" id="resume" name="resume" />
</div>
</div>
<!-- Row 3: Website, Birth Date -->
<div class="form-row">
<div class="form-group">
<label for="website">Website</label>
<input type="url" id="website" name="website" />
</div>
<div class="form-group">
<label for="dob">Birth Date</label>
<input type="date" id="dob" name="dob" />
</div>
</div>
<!-- Row 4: Hobbies -->
<div class="form-row">
<div class="form-group">
<label>Hobbies</label>
<div class="inline-group">
<label><input type="checkbox" name="hobby" value="reading"> Reading</label>
<label><input type="checkbox" name="hobby" value="sports"> Sports</label>
</div>
</div>
<div class="form-group">
<label for="rating">Rating (1 to 10)</label>
<input type="range" id="rating" name="rating" min="1" max="10" />
</div>
</div>
<!-- Row 5: Message -->
<div class="form-row">
<div class="form-group" style="flex: 1 1 100%;">
<label for="message">Message</label>
<textarea id="message" name="message" rows="4"></textarea>
</div>
</div>
<input type="hidden" name="userID" value="12345" />
<div class="button-group">
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</div>
</form>
</body>
</html>
How does it help in SEO?
The form tag itself cannot directly boost SEO rankings, but:
* Improves user experience, which indirectly helps in SEO.
* Increases user engagement be it with feedback forms, contact forms, or newsletter subscription forms.
* Proper labeling and semantic HTML within the form makes the structure easier for search engine bots to understand.
* Fast and accessible forms work on bounce rates.
So indirectly, if implemented correctly, it is beneficial for SEO.
Conclusion
HTML's `<form>` tag is an important part of web development. Without it, you cannot take data from any user. In this tutorial, we learned:
* What is form tag and how to use it
* All about input fields
* Important properties
* Its role in SEO
* Practical examples
If you are a beginner, start practicing form tag. It will take your HTML skills to the next level.