Skip to main content

HTML Form Attributes

By SamK
0
0 recommends
Topic(s)

This tutorial details the various attributes for the HTML <form> element.

The Action Attribute

The action attribute specifies the action to be taken when the form is submitted.

Typically, when the user clicks the submit button, the form data is sent to a file on the server.

In the example below, the form data is sent to a file named submission_page.php, which contains a server-side script (PHP) for processing the form data.

<form action="/submission_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

Note: If the action attribute is not specified, the form will submit data to the current page.

The Target Attribute

The target attribute determines the location where the response to the form submission will be displayed. This attribute can have the following values:

_blank: The response appears in a new window or tab

_self: The response appears in the current window

_parent: The response appears in the parent frame

_top: The response appears in the full body of the window

_framename: The response appears in a named iframe

By default, the target attribute is set to _self, indicating that the response will be displayed in the current browsing context or window.

<form action="/submission_page.php" target="_blank">

The Method Attribute

The method attribute determines the HTTP method used for sending form data.

Data can be sent as URL variables with method GET or as an HTTP POST transaction with method POST

The default method for submitting form data is GET.

Example

In this example, the form data is submitted using the GET method:

<form action="/submission_page.php" method="get">

Example

In this example, the form data is submitted using the POST method.

<form action="/submission_page.php" method="post">

Notes on GET:

  • Appends the form data to the URL, in name/value pairs
  • NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!)
  • The length of a URL is limited (2048 characters)
  • Useful for form submissions where a user wants to bookmark the result
  • GET is good for non-secure data, like query strings in Google
  • GET also allows you to copy and use direct links to form submission values, like links to specific search pages.

Notes on POST:

  • Appends the form data inside the body of the HTTP request (the submitted form data is not shown in the URL)
  • POST has no size limitations, and can be used to send large amounts of data.
  • Form submissions with POST cannot be bookmarked

Note: When the form data contains sensitive or personal information, it's crucial to always use the POST method for submitting the data.

The Autocomplete Attribute

The autocomplete attribute determines whether a form should have autocomplete enabled or disabled.

When autocomplete is enabled, the browser automatically fills in form fields based on the user's previous entries.

<form action="/submission_page.php" autocomplete="on">

The Novalidate Attribute

The novalidate attribute, when included, indicates that the form data should not be validated upon submission.

<form action="/submission_page.php" novalidate>

List of All <form> Attributes

accept-charset: Defines the character encodings used for form submission.

action: Indicates the URL where the form-data will be sent upon submission.

autocomplete: Toggles whether the form should have autocomplete enabled or disabled.

enctype: Determines how the form-data is encoded when submitted to the server (applicable only for method="post").

method: Specifies the HTTP method (GET or POST) for sending the form-data.

name: Assigns a name to the form.

novalidate: Prevents form validation upon submission.

rel: Describes the relationship between the linked resource and the current document.

target: Defines the destination where the response should be displayed after form submission.

Questions & Answers