HTML Form Attributes

The <form> element in HTML supports several attributes that control how form data is sent and displayed. These attributes define behavior, appearance, and validation for forms.

Common Form Attributes

Attribute	Description	Example
`action`	Specifies the URL where form data is sent	`<form action="submit.php">`
`method`	Defines the HTTP method (`GET` or `POST`)	`<form method="post">`
`enctype`	Specifies encoding type for sending data (`application/x-www-form-urlencoded`, `multipart/form-data` for file upload)	`<form enctype="multipart/form-data">`
`name`	Assigns a name to the form	`<form name="contactForm">`
`id`	Unique identifier for the form	`<form id="form1">`
`target`	Specifies where to display the response (`_self`, `_blank`, `_parent`, `_top`)	`<form target="_blank">`
`autocomplete`	Enables/disables autofill of form fields (`on` / `off`)	`<form autocomplete="off">`
`novalidate`	Disables HTML5 form validation	`<form novalidate>`

Example Code Using Attributes

<!DOCTYPE html>
<html>
<head>
<title>Form Elements Example</title>
</head>
<body>

<h2>Registration Form</h2>

<form action="submit.php" method="post">

<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br><br>

<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>

<label>Gender:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>

<label for="hobby">Hobbies:</label><br>
<input type="checkbox" id="reading" name="hobby" value="reading">
<label for="reading">Reading</label>
<input type="checkbox" id="sports" name="hobby" value="sports">
<label for="sports">Sports</label><br><br>

<label for="country">Country:</label><br>
<select id="country" name="country">
<option value="india">India</option>
<option value="usa">USA</option>
</select><br><br>

<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="30"></textarea><br><br>

<input type="submit" value="Submit">
<input type="reset" value="Reset">

</form>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Form Elements Example</title>

</head>

<body>

<h2>Registration Form</h2>

<label for="email">Email:</label><br>

<label>Gender:</label><br>

<label for="female">Female</label><br><br>

<label for="hobby">Hobbies:</label><br>

<label for="reading">Reading</label>

<label for="sports">Sports</label><br><br>

<label for="country">Country:</label><br>

<option value="india">India</option>

</select><br><br>

<label for="message">Message:</label><br>

</form>

</body>

</html>

Explanation

action="submit.php" → Sends form data to submit.php.
method="post" → Data is sent securely in HTTP request body.
enctype="multipart/form-data" → Allows file uploads.
id="regForm" → Unique identifier for CSS or JS.
autocomplete="on" → Browser can auto-fill fields.

Key Points

Always set the action and method attributes for proper form submission.
Use enctype="multipart/form-data" when handling file uploads.
autocomplete and novalidate help improve user experience and form control.

HTML Form Attributes

HTML Form Attributes

Common Form Attributes

Example Code Using Attributes

Explanation

Key Points

You may also like...

Leave a Reply Cancel reply

NumPy Tutorial

HTML Form Attributes

HTML Form Attributes

Common Form Attributes

Example Code Using Attributes

Explanation

Key Points

You may also like...

HTML Canvas Graphics

HTML and JavaScript

HTML Headings

Leave a Reply Cancel reply

NumPy Tutorial