HTML FORM ATTRIBUTES

HTML Form Attributes

An HTML form attribute is a property that you can include within the <form> tag to specify various characteristics and behaviors of the form. These attributes allow you to control how the form interacts with users and how the form data is handled when it is submitted. 

Here are some common HTML form attributes:

1. action: Specifies the URL of the server-side script or endpoint that will process the form data when it is submitted.

Example:

<form action="/submit-form.php">
  <!-- form elements here --> </form>

In this example, "/submit-form.php" is the script that will receive the form data.

2. method: Specifies the HTTP method used to send the form data to the server. It can be either "get" or "post". The form data may be sent as an HTTP post transaction (with method="post") or as URL variables (with method="get").

Example:

Using the POST method when submitting the form data:

<form action="/submit-form.php" method="get"> 
  <!-- form elements here --> </form>

Here, method="get" indicates that the form data will be sent as URL variables.

Example:

Using the GET method when submitting the form data:

<form action="/submit-form.php" method="post"> 
  <!-- form elements here --> </form>

Here, method="post" indicates that the form data will be sent in the request body.

3. enctype: Specifies how form data should be encoded before sending it to the server. This attribute is typically used when you have file upload <input type="file"> within the form. Common values include "application/x-www-form-urlencoded", "multipart/form-data", and "text/plain". 

Example:

<form action="/submit-form.php" method="post" enctype="multipart/form-data"> 
  <!-- form elements here --> </form>

Here,  enctype="multipart/form-data" indicates that the form data will be encoded as multipart/form-data, which is necessary for file uploads.

4. target: Specifies where to display the response received after submitting the form. Common values include "_self" (the default, displays in the same frame or window) and "_blank" (displays in a new window or tab). 

Example:

<form action="/submit-form.php" method="post" target="_blank">
  <!-- form elements here --> </form>

Here, target="_blank" will open the form submission response in a new tab or window.

5. autocomplete: Controls whether the browser should automatically complete form fields based on the user's input history. Values can be "on" or "off". 

Example:

Using OFF method for browser should automatically complete form.

<form action="/submit-form.php" method="post" autocomplete="off"> 
  <!-- form elements here --> </form>

Here, autocomplete="off" disables the browser's autocomplete feature for the form.

Example:

Using ON method for browser should automatically complete form.

<form action="/submit-form.php" method="post" autocomplete="on"> 
  <!-- form elements here --> </form>

Here, autocomplete="on" disables the browser's autocomplete feature for the form.

6. name: Assigns a name to the form. This attribute is mainly used when referencing the form in scripts or for styling purposes. 

Example:

<form action="/submit-form.php" method="post" name="myForm"> 
  <!-- form elements here --> </form>

Here, name="myForm"> gives the form a name of "myForm".

7. novalidate: Prevents the browser from validating form input before submitting. This attribute is useful when you want to perform custom validation using JavaScript. 

Example:

<form action="/submit-form.php" method="post" novalidate>
  <!-- form elements here --> </form>

Here, novalidate tells the browser not to perform its built-in form validation.

8. onsubmit: Specifies a JavaScript function to execute when the form is submitted. This attribute is often used for client-side form validation or to perform actions before submitting the form data to the server. 

Example:

<form action="/submit-form.php" method="post" onsubmit="return validateForm()">
  <!-- form elements here --> </form>

Here, onsubmit="return validateForm()" calls a JavaScript function validateForm() when the form is submitted.