Learn about HTML form attribute with example

HTML form elements support various attributes that provide additional functionality and control over form behavior. Here are some commonly used form attributes:

1. action: Specifies the URL or server-side script to which the form data is submitted. For example, action="/submit".

2. method: Specifies the HTTP method used to submit the form data. The two most common methods are GET and POST. For example, method="POST".

3. name: Assigns a name to the form element, which is used to identify the data on the server-side when the form is submitted.

4. id: Provides a unique identifier for the form element. It is used for associating labels with form controls and for JavaScript manipulation.

5. value: Sets the initial value of the form element. For input fields, it represents the default value. For checkboxes and radio buttons, it specifies the value sent when the form is submitted.

6. placeholder: Displays a short hint or example value within an empty input field. It provides a suggestion to users regarding the expected input.

7. required: Indicates that the form field must be filled out before the form can be submitted. It helps enforce mandatory input.

8. disabled: Disables the form element, preventing user interaction and excluding it from form submission.

9. readonly: Makes the form element read-only, allowing users to see the value but not modify it.

10. maxlength and minlength: Specifies the maximum and minimum number of characters allowed for an input field.

11. pattern: Defines a regular expression pattern that the input value must match for it to be considered valid.

12. autocomplete: Enables or disables the browser's autocomplete feature for the form element. Values can be "on" or "off".

13. autofocus: Automatically focuses the input field when the page loads, allowing immediate user input.

14. multiple: Indicates that multiple options can be selected in a select dropdown or that multiple files can be selected for file uploads.

Here's an explanation of each form attribute along with example code:

1. action attribute:

   • Description: Specifies the URL or server-side script where the form data should be submitted.
   • Example: <form action="/submit-form" method="POST">...</form>

2. method attribute:

   • Description: Specifies the HTTP method used for submitting the form data.
   • Example: <form action="/submit-form" method="POST">...</form>

3. name attribute:

   • Description: Assigns a name to the form element, used to identify the data on the server-side.
   • Example: <input type="text" name="username">

4. id attribute:

   • Description: Provides a unique identifier for the form element, useful for associating labels or accessing it with JavaScript.
   • Example: <input type="text" id="username" name="username">

5. value attribute:

   • Description: Sets the initial value of the form element.
   • Example: <input type="text" name="username" value="John Doe">

6. placeholder attribute:

   • Description: Displays a hint or example value within an empty input field.
   • Example: <input type="text" name="username" placeholder="Enter your username">

7. required attribute:

   • Description: Specifies that the form field must be filled out before the form can be submitted.
   • Example: <input type="text" name="username" required>

8. disabled attribute:

   • Description: Disables the form element, preventing user interaction and excluding it from form submission.
   • Example: <input type="text" name="username" disabled>

9. readonly attribute:

   • Description: Makes the form element read-only, allowing users to see the value but not modify it.
   • Example: <input type="text" name="username" value="John Doe" readonly>

10. maxlength and minlength attributes:

• Description: Specifies the maximum and minimum number of characters allowed for an input field.
• Example: <input type="text" name="username" maxlength="20">

There are few attributes also which is used inside form

pattern attribute:
Description: Defines a regular expression pattern that the input value must match for it to be considered valid.
Example: <input type="text" name="zipcode" pattern="[0-9]{5}">

autocomplete attribute:
Description: Enables or disables the browser's autocomplete feature for the form element.
Example: <input type="text" name="username" autocomplete="off">

autofocus attribute:
Description: Automatically focuses the input field when the page loads.
Example: <input type="text" name="username" autofocus>

multiple attribute:
Description: Indicates that multiple options can be selected in a select dropdown or multiple files can be selected for file uploads.
Example: <select name="colors" multiple>...</select>