The HTML <form>
tag creates input areas for user data, users can interact with the form, feedback collection, and data submission to the database as well as servers. Integrating forms in your content enhances user engagement, boosts interactivity, and the site more attractive.
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:
Example 2: 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 >Radio Button Form</ title >
</ head >
< body >
< center >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< form action = "#" method = "post" >
< label for = "male" >Male</ label >
< input type = "radio" id = "male"
name = "gender" value = "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:
Supported Browsers
- Google Chrome 1 and above
- Edge 12 and above
- Firefox 1 and above
- Opera 15 and above
- Safari 4 and above