HTML Forms

In HTML the <form> element is used to collect user information. An HTML form is a section of document that contains interactive controls that enable a user to submit information to a web server. The HTML forms collect different kinds of user inputs, such as contact details like name, email address, phone numbers, credit card details etc.

A form will take input from the user and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application. The syntax of HTML form is :
<form action="server_page_URL" method="GET | POST">
   form elements like input, textarea etc.
</form>
The above syntax declared the html form. Here is an example of form element :
<form action="login_page.php" method="post">
	Username :
	<input type="text" name="username" maxlength="30"/>
	Password :
	<input type="password" name="Password" maxlength="30"/>
</form>
The output of above code will be :


Form Attributes :

The Form element has following attributes :

Action : The action attribute defines the action to be performed when the form is submitted. Normally, the form data is sent to a web page on the server when the user clicks on the submit button. In the example above, the form data is sent to a page on the server called "login_page.php". This page contains a server-side script that handles the form data.

Method : The method attribute specifies the HTTP method GET or POST to be used when submitting the form data. For more details about when to use GET or Post method, check our previous post. HTTP GET and POST method.

Target : The target attribute specifies if the submitted result will open in a new browser tab, a frame, or in the current window. The default value is "_self" which means the form will be submitted in the current window. To make the form result open in a new browser tab, use the value "_blank". Example :
<form action="login_page.php" method="post" target="_blank">

  • name : Specifies a name used to identify the form (for DOM usage: document.forms.name).
  • accept-charset : Specifies the charset used in the submitted form (default: the page charset).
  • autocomplete : Specifies if the browser should autocomplete the form (default: on).
  • enctype : Specifies the encoding of the submitted data (default: is url-encoded).
  • novalidate : Specifies that the browser should not validate the form.
  • application/x-www-form-urlencoded : This is the standard method most forms use in simple scenarios.
  • mutlipart/form-data : This is used when you want to upload binary data in the form of files like image, word file etc.

The HTML Form contains special elements like inputbox, checkbox, radio-buttons, submit buttons etc. These special elements are also known as form controls. Some of them are as follows :

  • Text Input Controls
  • Password Input Controls
  • Multiple-Line Text Input Controls
  • Checkboxes Controls
  • Radio Box Controls
  • Select Box Controls
  • File Select boxes
  • Hidden Controls
  • Clickable Buttons
  • Submit and Reset Button



Next Topic :