In this we will see various HTML form attribute.

Action attribute

action attribute defines the action after submitting the form.

Data sends to the server when user click on submit button.

The action attribute value defines the web page where information proceed. It can be .php, .jsp, .asp, etc. or any URL where you want to process your form.

See the Pen action by Arpit (@soniarpit) on CodePen.

Tip: If the action attribute is omitted, the action is set to the current page.

Target attribute

The target attribute defines where to open the response after submitting the form. The following are the keywords used with the target attribute.

The target attribute can have one of the following values:

Value	Description
_blank	The response is displayed in a new window or tab
_self	The response is displayed in the current window
_parent	The response is displayed in the parent frame
_top	The response is displayed in the full body of the window
framename	The response is displayed in a named iframe

The default value is _self which means that the response will open in the current window.

Example

<form action="action.html" method="get" target="_blank">  

Method Attribute

The method attribute specifies the HTTP method to be used when submitting the form data.

The form-data can be sent as URL variables (with method="get") by default is get or as HTTP post transaction (with method="post").

Example for get

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

Example for post

<form action="/action_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

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

Tip: Always use POST if the form data contains sensitive or personal information! like in registration for or login form because this forms contains password field.

Autocomplete attribute

The HTML autocomplete attribute enables an input field to complete automatically.

It can have two values “on” and “off” which enables autocomplete either ON or OFF. The default value of autocomplete attribute is “on”.

Try example,

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

Novalidate Attribute

The novalidate attribute is a boolean attribute.

When present, it specifies that the form-data (input) should not be validated when submitted.

In the following example, the email field is there. That’s means the user must put a valid email (we will also discuss the email field). But if we write novalidate attribute then the form allows submitting the email field without checking whether it is a valid email or not.

try this example by removing novalidate attribute

See the Pen novalidate by Arpit (@soniarpit) on CodePen.

enctype attribute

The HTML enctype attribute defines the encoding type of form-content while submitting the form to the server. The possible values of enctype can be

Example

<form action="action.html" method="post" enctype="multipart/form-data">  

Useful when submit image with file input.

List of All

Attributes

Attribute	Description
accept-charset	Specifies the character encodings used for form submission
action	Specifies where to send the form-data when a form is submitted
autocomplete	Specifies whether a form should have autocomplete on or off
enctype	Specifies how the form-data should be encoded when submitting it to the server (only for method=“post”)
method	Specifies the HTTP method to use when sending form-data
name	Specifies the name of the form
novalidate	Specifies that the form should not be validated when submitted
rel	Specifies the relationship between a linked resource and the current document
target	Specifies where to display the response that is received after submitting the form

Hope you enjoyed. happy coding :)

Previous: #21 HTML Forms – Basic

Next: #23 HTML Form Elements