HTML form attributes

HTML form attributes control various aspects of how a form behaves and interacts with the user. Here’s a detailed look at some of the key HTML form attributes:

1. action

Specifies the URL where the form data should be sent when the form is submitted.


<form action="/submit-form">

2. method

Defines the HTTP method (either GET or POST) used to send form data.


<form method="post">

GET: Appends form data to the URL (not recommended for sensitive data).

POST: Sends form data as part of the HTTP request body (more secure for sensitive data).

3. terget

Specifies where to open the response after form submission.


<form target="_blank">

_blank: Opens in a new tab or window.

_self: Opens in the same frame as the form.

_parent: Opens in the parent frame.

_top: Opens in the full window.

4. enctype

Specifies how the form data should be encoded when submitting it to the server. Used with POST method.


<form enctype="multipart/form-data">

application/x-www-form-urlencoded: Default encoding, suitable for most forms.

multipart/form-data: Used for forms that include file uploads.

text/plain: Submits data as plain text (rarely used).

5. autocomplete

Controls whether the browser should automatically complete fields based on previous entries.


<form autocomplete="on">

on: Enables auto-completion.

off: Disables auto-completion.

6. novalidate

Disables form validation when submitting the form.


<form novalidate>

7. name

Assigns a name to the form, which can be used for referencing it in scripts.


<form name="myForm">

8. accept-charset

Specifies the character encodings that the server can handle.


<form accept-charset="UTF-8">

Example Form Using Various Attributes


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form with Attributes</title>
</head>
<body>
    <h2>Form with Various Attributes</h2>
    <form action="/submit-form" 
          method="post" 
          target="_blank" 
          enctype="multipart/form-data" 
          autocomplete="on" 
          novalidate 
          accept-charset="UTF-8">
        
        <!-- Text Input -->
        <label for="username">Username:</label><br>
        <input type="text" id="username" name="username" placeholder="Enter your username" required><br><br>

        <!-- Password Input -->
        <label for="password">Password:</label><br>
        <input type="password" id="password" name="password" minlength="6" required><br><br>

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

        <!-- File Upload -->
        <label for="resume">Upload Resume:</label><br>
        <input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx"><br><br>

        <!-- Submit Button -->
        <input type="submit" value="Submit">
    </form>
</body>
</html>