HTML Forms Tutorial
What does the term “filling out a form” mean to you? That’s right! That’s the very same meaning it has in HTML. In our previous tutorials, all this while we saw at how you could play with the layout. If you need to fill some details then how is this possible? Form comes to your rescue in such a situation. It is similar to you filling your details in an application form which will have boxes for entering your name, address, selecting your gender etc.
Structure of HTML Form
Let us create a simple HTML form to understand the structure:
A HTML form is created using <form>….</form> tags. The form tag has the following attributes:
- Name – this is the name of the form which is optional. Name is used in the script to get the data referenced from the form name. Name is not supported in HTML5, hence use ID attribute instead.
- Action – It is nothing but the URL on the server side. The mentioned URL page will receive the form data when submitted.
- Method – It is the way the form data is submitted to the server. Data in a form submitted with a GET method is sent as part of the URL. This will be the part after the question mark, called query string. On the other hand, form data submitted with POST method is sent in the HTTP header for the request of the new page.
How Does HTML Form Work?
Let us take a practical example of a search form available on Google website. User enters a query and hits the search button. Here the query is a form input and the search button is like a submit button. The content of the query along with the form controls are sent to Google server. The server then process the query using scripting languages like PHP and send the output page to the browser. And finally the user sees the search results page.
Elements of a HTML Form
<INPUT> tag is used to add elements to a form and has the following attributes:
- NAME – this is control name of the element which can be used in the script processing
- TYPE – text / password / textarea / checkbox / radio/ submit / reset / button / hidden / file
- VALUE – can be used to fill a default value in the textbox
- MAXLENGTH – refers to the total number of characters that can be entered
- SIZE – indicates the physical size of the textbox
In addition to the above types, you can also add a listbox to a form.
Hidden Text Field
Hidden text fields shall be used to send the hidden text data to the server.
<INPUT TYPE="hidden" NAME="additional_information" VALUE ="Text">
Hidden text is not visible in the browser, hence cannot be modified by the user. It should have a VALUE attribute set and the VALUE data will be sent to the server along with other form data.
File Upload in a Form
Forms can also have an option to upload a file to a server. This can be done with the following code:
<INPUT TYPE="file" NAME="upload">
Though it is possible to use MAXLENGTH and SIZE attributes, it is not recommended since the length of the file path may exceed the specified size.
Image Control in a Form
Images can be used in a form to show the submit button in a graphical manner.
<INPUT TYPE="IMAGE" SRC="submit.png" alt="Submit" NAME="imagename">
Sample HTML Form
Below is a simple HTML form created using various form elements. Click here to learn more about form elements.
There are many other elements part of a HTML form like input box, submit button, radio and check boxes. Refer separate article on form elements to get more details.