How to Create Forms in HTML?

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. In this article, we will explain how to create forms in HTML along with various form control options.

Structure of HTML Form

Let us create a simple HTML form to understand the structure:

<FORM NAME=”form” ACTION=”call_script.asp” METHOD=”GET”>
<!– NAME is used in the script to process the form data. ACTION is nothing but a program on the server which will be called when this form is submitted. METHOD is the way the form is submitted to the server – example methods are GET/POST –>

(Here goes all your form elements!!!)

</FORM>

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. It is used in the script to get the data referenced from the form name. Since, name is not supported in HTML5, you can 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.

Attributes of INPUT Tag

<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.

HTML Form Elements

The <form> tag is used to contain multiple form elements like input box, submit button, radio and check boxes. What are the elements that go into a form? Let’s start by building a simple form.

1. Textbox

First we will put a textbox on it. The way to do that is to code:

Enter Your Name: <INPUT TYPE="text" NAME="textbox" MAXLENGTH="10" SIZE="50">

This is what it looks – try entering 11 characters in it and see what happens.

• The size attribute is used to restrict the form width to accommodate only 50 characters. Remember it is not the actual characters of the input text, this is merely the size of the input box. Also size attribute is not supported in HTML, hence you should use CSS to adjust the size of the input boxes.
• Type=”text” attribute is used to create single line text input.
• Name – Used in the server script to identify which form element send the data to process it further.
• Maxlength – maximum number of characters that an input box allows. In the above example, you can’t manually input more than 10 characters.

2. Password

Next we will put a password box by typing:

Enter Your Password: <INPUT TYPE="password" NAME="password" SIZE="50" MAXLENGTH="12">

See what kind of characters appear when you type in it!

Remember the password you enter will be showing as dots to make it hidden from eyes. But this does not mean it is safe and secure. You should ensure the form data when submitted is sent over HTTPS connection using secure socket layer (SSL) in order to protect the information.

3. Textarea 

When the amount of data to be entered is more, use something called a textarea. This is coded in this fashion:

<TEXTAREA NAME="textarea" ROWS="3" COLS="50"></TEXTAREA>

And it is displayed like this…

Rows and columns are used to define the size of the textarea. Remember textarea should have opening and closing tags unlike <INPUT> which only has a opening tag.

4. Checkbox 

Now let’s add some mechanisms for selection. The first is a checkbox.

<INPUT TYPE="checkbox" NAME="chkbox" VALUE="1"> Unchecked Box

To start the checkbox in a checked state during the form load, add the keyword CHECKED to the tag like this:

<INPUT TYPE="checkbox" NAME="chkbox" VALUE="2" CHECKED> Checked Box

5. Radio buttons 

The second mechanism for selection is a set of radio buttons. Only one out of a set of buttons can be selected at a time – to do this all the buttons should be given the same value for the NAME attribute. For example:

<INPUT TYPE="radio" NAME="rdb" VALUE="1"> Radio button 1
<INPUT TYPE="radio" NAME="rdb" VALUE="2"> Radio button 2

You will find that you can select only one of the two radio buttons! Both these buttons start off in the unselected mode.

And one of these buttons starts off in the selected mode. And guess what makes the difference? Yes, it is the CHECKED keyword again!

Remember the value attribute in radio buttons and check boxes should have unique value for each radio button so that the server can identify the source.

6. Listbox 

And the third is a listbox (not a combo) that is included in the form by coding the following:

<SELECT NAME="lstLocation" SIZE="10">
<OPTION VALUE="America">America</OPTION>
<OPTION VALUE="England">England</OPTION>
<OPTION VALUE="China">China</OPTION>
<OPTION VALUE="India">India</OPTION>
<OPTION VALUE="Russia">Russia</OPTION>
<OPTION VALUE="Canada">Canada</OPTION>
</SELECT>

• The SIZE attribute gives the number of elements that the listbox shows at one time.
• The VALUE attribute indicates what will be sent to the server when the form is submitted.
• The text in between the two OPTION tags will be used for display purposes.

You’ll find that some browsers forgive you even if you don’t use the VALUE attribute – however it is suggested that you play by the book and do all the coding :-). Here’s what it looks like…

Here’s a listbox with no initial selections made.

And in this listbox, “America” is selected by default. How? No, the keyword is not CHECKED this time, it is SELECTED:-)!

7. File Upload

You can allow users to upload file through the HTML form using the below code:

<FORM ACTION="script-URL"
METHOD="post">
<p>Upload Document</p>
<INPUT TYPE="file" NAME="file1" /><br />
<INPUT TYPE="submit" value="submit" />
</FORM>

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. The output on the browser will look like below:

Users can click on the “choose File” button and select the file from local computer. Note the appearance of the browse window depends on the operating system and can’t be controlled through form inputs. The submit button will send the file to the script mentioned in the action URL. You must use post method to upload files and the get method can’t be used.

8. The Buttons

There are three types of buttons can be added in a HTML form.

Submit button – The HTML code to include a submit button is as below:

<INPUT NAME=cmdSubmit VALUE="Submit">

This sends the form content to the server when clicked.

Another one is the Reset button

<INPUT NAME=cmdReset VALUE="Reset">

Contrary to popular expectations, it does not clear the form but resets it to its original state. For example if a textbox started off with a default value of “Me” and it was subsequently changed to “You” by the user, clicking on the Reset button will change it back to “Me”.

The third type is a General Button

<INPUT NAME=cmdSubmit VALUE="Submit">

doesn’t do anything when clicked. You have to write some script to make it work! Then why use it at all? Well, there may be times when some action other than submitting a form needs to be done on a button click.

You can add hidden control to the button element using type=”hidden” attribute. This will not be visible on the page and used for form control or validation. Though the hidden inputs are not visible on the browser, users can view the code by viewing the source.

9. Form Labels

Each form inputs can have a label attached to it. Labels are used by screen readers and useful for visually challenged users.

<LABEL>Enter Your Name: <INPUT TYPE="text" NAME="textbox" MAXLENGTH="10" SIZE="50"></LABEL>

10. Hidden Text Field

You can use the hidden text fields 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.

11. 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">

Grouping Form Elements

Large forms will have many elements and it is necessary to group similar fields together. For example, the input for address may have multiple text boxes for entering street, province, zip code and country. It makes sense to group all these fields together in one box within a form. It is done by <fieldset> tag as in the below example and the <legend> tag is used to add caption to the grouped elements.

<FIELDSET>
<LEGEND>Address:</LEGEND>
<LABEL>Street:<br />
<input type="text" name="street" /></LABEL><br />
<LABEL>Province:<br />
<input type="text" name="province" /></LABEL><br />
<LABEL>Country:<br />
<input type="text" name="country" /></LABEL>
</FIELDSET>

It will look in the browser like below:

Entering Date, Email and URL in Form

HTML5 allows many additional inputs like date, email and URL through the form. Below is how you should add date filed in the form:

<FORM ACTION="action-script"
METHOD="post">
<LABEL for="users">Choose date:</LABEL>
<INPUT TYPE="date" NAME="date1" />
<INPUT TYPE="submit" VALUE="Submit" />
</FORM>

Below is the result:

Similar to date, you can add email and URL elements using the below code:

<input type="email" name="email" />
<input type="url" name="site" />

Adding Search Box in Form

You can add search to form with the below code:

<FORM ACTION="action-script"
METHOD="post">
<LABEL for="users">Search</LABEL>
<INPUT TYPE="search" NAME="search1" />
<INPUT TYPE="submit" VALUE="Submit" />
</FORM>

It will look like below on the browser:

Sample HTML Forms

Here is a sample form created using some of the above explained elements. Try out yourself and create simple HTML forms.

On real site, the forms will have validations using JavaScript for each field. For complete understanding, below is the real contact form we use on this site. Remember, unlike all other example, this form is real and will submit your content to our server.

Points to Note When Creating HTML Forms

1. To display the form elements in a visually appealing way, put them into table cells.
2. If you plan to use client-side scripting, use the BUTTON rather than SUBMIT.
3. If you want to use a listbox that allows the user to select more than one element, add the keyword MULTIPLE to the SELECT tag.
4. For radio buttons and checkboxes, if you want to have a particular element selected by default, add the keyword CHECKED.
5. For listboxes, put the attribute SELECTED for the option that you want selected by default.
6. You can use the VALUE attribute in textboxes, textareas and password boxes to make the form load with those predefined values.

---