Hyper text markup language(HTML) is the markup language which is used by the browsers to interpret any web page in human readable form/view.  With this article i going to describe the HTML form tag functionality and its properties.  I assumed that you knows the basics of HTML before reading this article.  If not then don’t worry i will post about the basics of HTML soon.  So let’s understand the HTML form tag and its properties.

Forms allows us to input some data at one end and then send that data on to the other end, which is further handled by any programming script/language.

Note:  Here we are not talking about any specific server side script/programming language.

Forms can send data using two methods: GET and POST.  Both methods plays an important role in any form submission at other end.  I mentioned the role of these methods in the method attribute of the form tag.  So now let’s create a simple form and then we will understand its attributes one by one.

<!– Creating a simple form –>

<form method=”get” action=”somescript.php”>

<label>username: <input name=”text” name=”u1″ /></label>

<label>password: <input type=”password” name=”p1″ /></label>

<button type=”submit”>Submit</button>

</form>

<!-- form ends here -->

Note:  I use PHP script to process this form but there are lots of other server side scripts/programming languages which could be used such as python, JSP, ASP.Net and many more.

Basic Attributes of form in HTML

We have many form attributes, but it is not necessary to enter all or any attributes, because they all are optional.  Mostly we use action and method attributes in the forms.  Here are few form attributes which we need to understand before implementing all of them.

action attribute:

action attribute tells the browser that what to do with the form contents after submitting the form.  If the user wrongly or mistakenly entered some invalid input then form will redirect to the same form again.

method attribute:

This attribute is used when we need to send data to database or query for any topics.  For this we used GET and POST methods.  GET is used when the form submission is passive such as database query for search engine, because having data visible in the page URL will allow the page to be bookmarked.  It is risky to send sensitive information like username and password through GET method.

On the other hand POST method offers better security for sensitive data.  GET method suited for short amounts of data because it has size limitations because the URL can be long in many cases.  But in case of POST we can send any amount of data.

accept-charset attribute:

The accept-charset attribute allows us to specify which character encoding the server can handle in the submitted form data.  However to avoid any “character is not displaying” error, we always use UTF-8 when dealing with encoding. It supports all popular languages.

enctype attribute:

This attribute is used to specify how to encode the form data when it is sent.  It takes three values: application/x-www-form-urlencoded, multipart/form-data and text/plain.  We use this attribute mostly when we need file uploading functionality in any form.  In that case this attribute should contain a value of multipart/form-data, which allows the form to deal with binary data.

target attribute:

The attribute tells the browser where to open the specific URL in the action attribute.  It takes mainly three values:

i) _blank: It opens the URL in new window.

ii) _self: It opens the URL in the same window.

iii) _parent: It opens the URL in the parent browsing context.

name attribute:

name attribute is used to identify form to scripts. A unique ID represents any form used on a page.  For instance, in JavaScript we access form through the “document.form” property which contains a reference to all forms on the page.

autocomplete and novalidate attributes:

The autocomplete attribute tells the browser to automatically fill in remembered values in the form and on the other hand novalidate attribute allows us to validate the form input.

Note:  HTML5 also brings some new form attributes and their values, so please review all those attributes of HTML 5 to get more deep knowledge of form tag.

Uploaded by:  Author