Home 〉 HTML Tutorials 〉 HTML '<form>' Tag - Learn Syntax, Attributes & Examples for Forms
HTML '<form>' Tag - Learn Syntax, Attributes & Examples for Forms !
HTML '<form>' Tag - Learn Syntax, Attributes & Examples for Forms !
Are you trying to learn how to build web forms using HTML? The detailed blog post on the HTML '<form>' tag explains everything from syntax and attributes to complete examples with styling. You'll also learn how to use related form tags and improve user interaction. The guide is simple and beginner-friendly, helping you build forms with confidence. For a complete understanding of the HTML '<form>' tag, the detailed blog post is as follows.
Introduction:
The '<form>' tag in HTML is used to collect user inputs and send data to a server. It is a core element in building interactive websites where users can sign up, log in, submit feedback, and more. Forms are essential for creating functional web applications.
In this tutorial, you'll learn everything about the '<form>' tag — its syntax, common attributes, usage examples, inline styling, and related tags like '<input>', '<textarea>', '<button>', and others.
Syntax of HTML '<form>' Tag:
Syntax ✍
<form action="submit.php" method="post">
<!-- form controls go here -->
</form>
- '<form>': The opening tag to begin a form.
- 'action': Specifies where the form data should be sent (URL or script).
- 'method': Defines the HTTP method for sending data ('get' or 'post').
- '</form>': The closing tag of the form.
- Element Type: '<form>' is a block-level element.
HTML '<form>' Tag Attributes:
1. 'action'
URL to which the form data will be sent.
Example:
Example 📄
<form action="submit.php"></form>
This sends form data to 'submit.php'.
2. 'method'
HTTP method for submission ('get' or 'post').
Example:
Example 📄
<form method="post"></form>
'post' sends data in the body of the HTTP request.
3. 'target'
Where to display the response ('_blank', '_self', etc.).
Example:
Example 📄
<form target="_blank"></form>
Opens the response in a new tab.
4. 'autocomplete'
Enables or disables auto-complete.
Example:
Example 📄
<form autocomplete="off"></form>
Disables browser auto-complete suggestions.
5. 'novalidate'
Prevents form validation.
Example:
Example 📄
<form novalidate></form>
Browser will skip built-in form validations.
6. 'enctype'
Encoding type ('application/x-www-form-urlencoded', 'multipart/form-data', etc.)
Example:
Example 📄
<form enctype="multipart/form-data"></form>
Required when uploading files.
Example with Inline CSS Styling:
Code : 1 📝 
<!DOCTYPE html>
<html>
<body>
<form action="/submit" method="post" style="width: 300px; padding: 20px; border: 1px solid #ccc; border-radius: 8px; background-color: #f9f9f9;">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" style="width: 100%; padding: 8px;"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" style="width: 100%; padding: 8px;"><br><br>
<input type="submit" value="Submit" style="padding: 10px 15px; background-color: #007BFF; color: white; border: none; border-radius: 4px;">
</form>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
- Inline CSS adds styling to the form and inputs for better visual appearance.
- Uses 'width', 'padding', 'border', 'border-radius', and 'background-color'.
Conclusion:
The '<form>' tag is an essential part of any HTML document where user interaction is needed. From collecting names and emails to uploading files, this tag plays a crucial role. By understanding its attributes and combining it with input-related tags, you can build dynamic and functional web forms.
Suggested Topics:
- CSS background-color Tutorial with Examples - Learn Easily
- CSS Border Property Explained with Easy Examples for Beginners
- CSS Border-Radius Property Explained with Examples for Beginners
- CSS color Property Tutorial with Examples - Learn Text Color in CSS
- CSS Padding Explained with Examples | CSS Box Model Guide
- CSS Width and Height Property Tutorial with Examples for Beginners
Related Topics:
- HTML '<button>' Tag - Syntax, Attributes, Examples & Styling
- HTML input Tag - Types, Attributes, Syntax, and Examples
- HTML select and option tag - Complete Guide with Syntax, Attributes, and Examples
- HTML '<textarea>' Tag - Attributes, Examples, and Styling | Complete Guide
Frequently Asked Questions (FAQs)
What is the purpose of the '<form>' tag in HTML?
The '<form>' tag is used to create a section for user inputs and send the collected data to a server.
Can I submit a form without using the 'action' attribute?
Yes, but the form will reload the current page without sending data to any server.
Which method is better: 'get' or 'post'?
Use 'post' for sensitive data or large forms. Use 'get' for simple data submission or bookmarking.
What is 'enctype' used for?
It specifies how form data should be encoded before sending it to the server. It is essential for file uploads.
Can I style the '<form>' tag with CSS?
Yes, you can use inline CSS for styling like 'width', 'padding', 'margin', 'border', 'background-color', etc.