HTML Tutorial
INTRODUCTION
HTML BASIC TAGS
INLINE & BLOCK ELEMENTS
HTML LISTS
HTML TABLES
HTML FORMS
HEAD ELEMENTS
HTML MEDIA
MISCELLANEOUS TAGS
More on HTML Forms
HTML forms are fundamental to building interactive and dynamics websites. In this lesson, we go beyond basic inputs types and explore essential form attributes-including both traditional and HTML5-specific options. We also cover built-in form validation to help ensure user- submitted data is accurate and complete.
Common form Attributes
action
Specific the URL to which the form data will be sent after submission.
<form action="/submit.php" method="POST">
<!-- form elements -->
</form>
method
Defines how data is sent to the server:
GET: Appends data to the URL (visible).POST: Send data invisibly in the request body.
<form action="/submit.php" method="POST">
</form>
name
Gives a name to the form or its inputs field. This name is used to identify the data when submitted or accessed via script.
<input type="text" name="username">
New HTML5 Form Attribute
placeholder
Shows a short hint inside the input field to guide users on what to enter.
<input type="text" placeholder="Enter your username">
required
Forces users to fill out the field before the form can be submitted.
<input type="email" required>
autofocus
Automatically focuses on the input field when the pages loads.
<input type="text" autofocus>
HTML5 Validation Attributes
required
Prevent the form from being submitted if the field is left empty.
<input type="text" required>
pattern
Defines a regular expression that the input must watch for the form to be considered valid.
<input type="text" pattern="[a-zA-Z0-9]+">
This example only allows alphanumeric characters.
Conclusion
By mastering these HTML form attributes-especially the newer HTML5 features-you can create smarter, cleaner, and more secure forms. These built-in capabilities reduce the need for extra JavaScript and enhance the overall user experience.