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
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.
|
- application/x-www-form-urlencoded: Standard form data submission.
- multipart/form-data: Used for file uploads like images, documents, etc.
|
- Get Method: Limited URL character length, and used when we have to get data from somewhere like server.
- Post Method: No size limits, submissions cannot be bookmarked and used when we sends data to server.
|
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.
HTML
<!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.
HTML
<!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
Last Updated :
20 Dec, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...