HTML <form> Tag
Our topic in this post is Tag form examples. In hopes that it would provide learners with what they need to learn.
In HTML, the <form> tag is used to create an interactive form on a webpage that allows users to input data and submit it to the server for further processing. The <form> tag is typically used in conjunction with other form-related elements such as input, label, and button tags to create a complete form.
The following HTML form has multiple input fields and a single submit button:
Example:
<!DOCTYPE html>
<html>
<body>
<form action="/action-page.php" method="get">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="education">Qualifications</label>
<input type="text" id="education" name="education"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Here is an HTML form with checkboxes:
Example:
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" method="get">
<input type="checkbox" name="lang1" value="python">
<label for="lang1"> I am a python developer</label>
<br>
<input type="checkbox" name="lang2" value="java">
<label for="lang2"> I am a java developer</label>
<br>
<input type="checkbox" name="lang3" value="flutter" checked>
<label for="lang3"> I am a flutter developer</label>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The following HTML form has radio buttons:
Example:
<!DOCTYPE html>
<html>
<body>
<form action="/action-page.php" method="get">
<input type="radio" id="paypal" name="Payment Methond" value="paypal">
<label for="paypal">Paypal</label>
<br>
<input type="radio" id="mastercard" name="Master Card" value="mastercard" checked>
<label for="mastercard">Master Card</label>
<br>
<input type="radio" id="visa" name="visa" value="visa">
<label for="visa">Visa</label><br><br>
<input type="radio" id="cod" name="cod" value="cod">
<label for="cod">Cash on Delivery</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Here is an example of the <form> tag with some CSS applied to it:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
form {
width: 50%;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
}
input[type="checkbox"] {
margin-right: 10px;
}
label {
font-weight: bold;
}
input[type="submit"] {
background-color: maroon;
color: white;
padding: 12px 20px;
border-radius: 10px;
border: none;
cursor: pointer;
margin-top: 20px;
}
input[type="submit"]:hover {
background-color: maroon;
}
</style>
</head>
<body>
<form action="/action_page.php" method="get">
<input type="checkbox" name="lang1" value="python">
<label for="lang1"> I am a python developer</label>
<br>
<input type="checkbox" name="lang2" value="java">
<label for="lang2"> I am a java developer</label>
<br>
<input type="checkbox" name="lang3" value="flutter" checked>
<label for="lang3"> I am a flutter developer</label>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Table Of Content-
Tag Form Usage
Using the Tag form <form>, you can create an HTML form that allows users to input information.
The <form> element can be composed of one or more of the following form elements:
Here are some common uses of the <form> tag:
- The most common use of the <form> tag is to create a form that allows users to input data such as their name, email, phone number, and message. The data submitted by the user can then be processed by the server or sent to a specific email address.
- Forms can be used to create user registration pages that allow users to create an account with your website. This typically involves collecting information such as the user’s name, email address, and password.
- Forms can be used to collect feedback or conduct surveys from website visitors. This can be a great way to gather information about the user experience and improve your website.
- A contact form can be created using the <form> tag that allows visitors to send a message or get in touch with the website owner. The form typically includes fields for the user’s name, email address, message, and other relevant information.
- Forms are used extensively in e-commerce websites to collect information such as billing and shipping addresses, payment information, and order details.
- Search forms are commonly used on websites to allow users to search for specific content within the site. The form typically includes a search field and a submit button.
Browser Compatibility
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <form> | Yes | Yes | Yes | Yes | Yes |
Attributes
| Attribute | Value | Overview |
|---|---|---|
| action | URL | When submitting a form, indicates where you should send the data. |
| autocomplete | on off | Sets, whether the form autocomplete, should be enabled or disabled for a form. |
| accept-charset | character_set | Provides details about the character encoding used in the form submission. |
| name | text | Sets the form’s name. |
| enctype | application/x-www-form-urlencoded multipart/form-data text/plain | Provides instructions for encoding the form data (only for method=”post”) before it is submitted to the server. |
| method | get post | This method defines how should be sent form data via HTTP. |
| rel | external help license next nofollow noopener noreferrer opener prev search | Describes the relationship between a linked resource and the current document. |
| target | _blank _self _parent _top | Indicates where it will show the response once the form has been submitted. |
| novalidate | novalidate | Instructs the form not to be validated once submitted. |
Attributes
Global
The Tag form <form> is also compatible with HTML’s Global Attributes.
Event
The Tag form <form> is also compatible with HTML’s Event Attributes.<!–
Advertisement
–><!–
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]
–>
Predefined CSS
Most internet browsers show the Tag form with the following default values:
form {
display: block;
margin-top: 0em;
}HTML form tag Advantages
The HTML <form> tag has several advantages for creating interactive web pages:
- The <form> tag allows you to specify the type of data that should be entered in each field, such as text, numbers, or email addresses. This helps to ensure that users enter valid data, which can help to reduce errors and improve the overall user experience.
- By using the <form> tag to create forms, you can improve the accessibility of your website for users who rely on assistive technologies such as screen readers. This is because the <form> tag provides a clear structure for form elements, making it easier for users to navigate and understand the content.
- Forms created using the <form> tag can be used to collect data from website visitors, which can be useful for a variety of purposes such as user feedback, surveys, or e-commerce transactions.
- The <form> tag allows you to specify the method used to submit form data to the server, such as HTTP POST or GET, which can help to ensure that sensitive data is transmitted securely.
- The <form> tag can be customized using CSS to create visually appealing and user-friendly forms that match the overall design of your website.
- The <form> tag is supported by all major web browsers, making it a reliable and widely used tool for creating interactive web pages.
If this article was informative enough to fulfill your educational desires, then do leave your reaction below in order to appreciate our efforts or to suggest improvements for the betterment of this site.
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
