HTML Form Elements
In our previous tutorial we have discussed the basic HTML form. The <form> tag is used to contain multiple form elements like input box, submit button, radio and check boxes. Let us explore all the elements part of HTML form in this tutorial.
What are the elements that go into a form? Let’s start by building a simple form.
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.
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.
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.
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
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!
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:-)!
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>
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.
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.
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>
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:
<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.