HTML form Tag
The <form> tag is used to create an HTML form for user input. It serves as a container for various input elements like text fields, checkboxes, and buttons, enabling the collection of data for submission to a server or processing via client-side scripts.
Note: The <form> tag supports the Global Attributes and Event Attributes in HTML.
Syntax
<form> Form Content... </form>
Supported Elements
Attributes
Attributes | Descriptions |
|---|---|
It provides a name for the form. | |
It specifies where to display the response after form submission (like a new window or the current window). | |
Sends form data to the server upon submission. | |
| |
| |
It specifies the character encodings that is to be used for the form submission | |
It specifies whether a form should have autocomplete on or off | |
It specifies that the form should not be validated before submitting | |
It specifies the relationship between a linked resource and the current document. |
Example 1: In this example we will see about form tag with an example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>User Form</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h1 {
text-align: center;
color: #333;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 16px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
</head>
<body>
<form>
<h1>User Information</h1>
<label for="fname">First Name</label>
<input type="text"
id="fname"
name="fname"
placeholder="Enter your first name" required>
<label for="lname">Last Name</label>
<input type="text"
id="lname"
name="lname"
placeholder="Enter your last name" required>
<input type="submit"
value="Submit">
</form>
</body>
</html>
Output:
HTML form Tag Example Output
Example 2: In this example we creates a form with radio buttons for gender selection. It’s properly structured with opening and closing <form> tags, labels, and radio input elements within a centered layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radio Button Form</title>
</head>
<body>
<center>
<h1 >
HTML form Tag
</h1>
<form action="#" method="post">
<label for="male">Male</label>
<input type="radio"
id="male"
name="gender" v
alue="male">
<label for="female">Female</label>
<input type="radio"
id="female"
name="gender"
value="female">
<label for="other">Other</label>
<input type="radio"
id="other"
name="gender"
value="other">
<input type="submit" value="Submit">
</form>
</center>
</body>
</html>
Output:
HTML form Tag Example Output
Supported Browsers
Contact Us