HTML5 Tutorial - HTML Forms Attribute

HTML Form Attribute

In previous chapter we have been introduced with HTML forms. We know that how many types of Form Control Elements are there.

Forms generally used to collect the user input data. To accumulate the data, forms send all the information to server with the help of server side scripts like PHP, CGI, and ASP etc.

The Action attribute 

To embed the server side scripts with the HTML forms we use a form attribute is called ‘action’.  The action attribute defines the action to be performed when the form is submitted. When submit button in an HTML form is clicked, HTML form sends all the input information to a script webpage on the server where data is process the data as per server side script and store in the server or give the output.

<form action = "update.php">

The Method Attribute

The Method attribute specifies the transmission method of form date. It controls the HTTP method to upload the data when submitting the form. There are two methods we frequently use in an HTML form ‘GET’ and ‘POST’.

<form action = 'update.php' method = 'GET'>

<form action = 'update.php' method = 'POST'>

Difference between GET and POST Methods

1. GET Method append the form data in to the URL in name-value pair.
        POST Method does not append the form data in to the URL

2. GET Method allows about 3000 characters in the URL.
     POST method has no size limitation. It can be used to send the large amount of data.

3. GET Method is better for non –secure data like Query String in Search Engines.
       POST Method is better for both non-secure and secure data. Secure data like passwords, Credit Card Numbers etc.

4. Form submission with GET Method can be bookmarked.
     Form submission with POST Method cannot be bookmarked.

Where to use GET and POST?

GET is a by default method while submitting an HTML form. However, when GET is used, the submitted form data is visible in the page address field (URL) in the name value pair. We should always use POST method if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field.

The Autocomplete Attribute

Autocomplete attribute specifies that the browser should attempt to automatically complete the input based on user’s previous inputs to similar fields. When autocomplete is on, the browser automatically completes the input value based on values that previously entered by the uses. By default value of autocomplete attribute is on which can be replaced with off to disable the auto complete feature.

The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.

It is possible to have autocomplete ‘on’ for the form and ‘off’ for individual input fields in same form and vice versa. For example in the ‘Payment forms’ Names input fields can be autocomplete ‘on’ but Card No Input field can be autocomplete ‘off’.

<form action = 'update.php' method = 'POST' autocomplete = 'on'>

The Enctype Attribute

The Enctype Attribute lets you define an encoding type for your HTML form. This attribute works only with post method. There are three possible values of Enctype Attribute.

If we do not define any enctype attribute on HTML forms then the default value is application/x-www-form-urlencoded. This option is most used in simple HTML forms.

<form action = 'update.php' method = 'POST' enctype = 'application/x-www-form-urlencoded'>

If the uses required uploading any files from the forms then multipart/form-data is an essential option.

<form action = 'update.php' method = 'POST' enctype = 'multipart/form-data'>

text/plain is a valid option, although it sends the data without any encoding at all. It is not recommended, as its behavior is difficult to predict.

<form action = 'update.php' method = 'POST' enctype = 'text/plain'>

The Target Attribute

The Target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form. This attribute is used to open the response from script page in same browser window or a new browser window. The two possible values are “_self” and “_blank”.

The target attribute example - '_self'

<form action = 'update.php' method = 'POST' target = '_self'>

The target attribute example - '_blank'

<form action = 'update.php' method = 'POST' target = '_blank'>

The Novalidate Attribute

The Novalidate attribute is a Boolean attribute. When this attribute is present in HTML form, it specifies that the form input data should not validated when submitted.

<form action = 'update.php' method = 'POST' novalidate = 'novalidate'>

The Name Attribute

The name attribute specifies the name of an <input> element when using inside input tag individually. When the name attribute is used inside <form> tag, it refers the element in Java Script or specifies the name that used to identify the form. Only form elements with a name attribute will have their values passed when submitting a form.

<form action = 'update.php' method = 'POST' name = 'form_x'>

The Accept-charset Attribute

The Accept-charset attribute specifies the charset when form is submitted. This attribute specifies the character encodings that are to be used for the form submission. By default the form uses the web page charset.

The default character set in HTML 4 was 8859-1 and HTML 5 is UTF-8.

<form action = 'update.php' method = 'POST' accept-charset = 'ISO-8859-1'>

HTML5 Tutorial - HTML Forms Attribute

Related Topics

---