• Home
• About
• Contact
• Link
• Sitemap

1. HTML intro
2. Web pages and you

1. HTML getting started
2. HTML basics
3. HTML document

1. HTML text formatting 1
2. HTML text formatting 2
3. HTML text formatting 3
4. HTML fonts
5. HTML entities

1. HTML links
2. HTML email links

1. HTML images
2. HTML image maps

1. HTML forms
2. HTML form labels
3. HTML fieldset/legend

1. HTML tables
2. HTML tables concepts

1. HTML frames

1. HTML backgrounds
2. HTML colors
3. HTML color shades
4. HTML color usage

1. HTML stylesheets
2. HTML div/span

1. HTML audio
2. HTML video
3. HTML objects
4. HTML download media

1. HTML head section
2. HTML meta tags
3. HTML scripts
4. HTML declarations
5. HTML document types

1. HTML tag rules
2. HTML things to avoid
3. URL formatting
4. URL encoding/decoding
5. HTML use/access
6. HTML publish work

1. HTML marquees

1. HTML history
2. HTML summary

HTML forms

Forms are the key to interaction on the world wide web and are used for many things on webpages such as e-commerce, guestbook signing, and sending e-mail.

This tutorial focuses on:

• The <form> tag
• Form elements
• Setting form elements to be read only
• Resetting a form
• Submitting a form

The <form> tag

The <form> tag is used to create a form. All of a form's elements go in between the <form> and </form> tags.

Form elements

Most form elements are created with the <input> tag. The form element to display is specified by the <input> tag's type attribute.

NOTE: The <input> tag has no end tag.

Textboxes

Textboxes are used to input small, relatively simple data from the user. Textboxes are created by using the <input> tag and setting its type attribute to "text".

Password fields

Password fields are simply textboxes that will display a special character (usually asteriks) instead of the text that is actually typed. Password fields are created by using the <input> tag and setting its type attribute to "password".

NOTE:> While password fields hide data, this data is not encrypted and will be sent as regular text unless the protocol used for transmission is HTTPS and/or the data is encrypted through a scripting language.

Hidden fields

You can use hidden fields to store data that should not be displayed on a webpage but might have something to do with the individual user (such as in a membership website), or might affect the way a page is displayed (such as the width of a new window)

Hidden fields are created by using the <input> tag and setting its type attribute to "hidden".

NOTE: While hidden fields are not visible on a webpage, they can be seen within the source code for a webpage (along with whatever value they store).

Buttons

Buttons are created by using the <input> tag and setting its type attribute to "button". Another attribute that can be used with buttons is the value attribute. The value given to the value attribute is what appears on the button.

Textareas

Textareas overcome the textboxes limits by allowing more than a single line of text, and its width and height can be changed as well. Textareas are created by using the <textarea> tag.

Radio buttons

Radio buttons get their name from older car radios where if you pushed one button, the dial moved. When you pushed another button, the first button would pop out and the dial moved to your new choice. Radio buttons act in a similar way. Radio buttons act as a group where only one value can be selected.

Radio buttons are created by using the <input> tag and setting its type attribute to "radio". When using radio buttons, you are giving the user a choice of two or more different values, therefore radio buttons should be placed within the same category. This is done by giving a group of radio buttons the same name using the name attribute, but different values. After the tag for the radio button, you place the text that you want to appear next to it on the page.

Checkboxes

Checkboxes are similar to radio buttons, but with checkboxes you can select more than one option at a time.

Checkboxes are created by using the <input> tag and setting its type attribute to checkbox. Just as with radio buttons, when using checkboxes, you are giving the user a choice of two or more different values, therefore checkboxes should be placed within the same category. This is done by giving a group of checkboxes the same name using the name attribute, but different values. After the tag for the checkbox, you place the text that you want to appear next to it on the page.

NOTE: The difference between checkboxes and radio buttons is that the user can select more than one of the checkboxes in a checkbox group while with radio buttons the user can select just one of the radio buttons in a radio button group.

Drop-down lists

The drop-down list is a box which looks like a textbox but is much more powerful. The drop-down list stores a list of items from which an item can be selected.

The drop-down list is created using the <select> tag, and items are added to it using the <option>tag. The value attribute of the <option> tag sets the value of a particular option in a drop-down list.

The name of a drop-down list is specified using the name attribute of the <select> tag.

Try to select an item from the above drop-down list.

You can also group a related set of choices in a drop-down using the <optgroup> tag.

What if you want an item in the drop-down list to be selected by default? This is achieved by using the selected attribute in the <option> tag and setting it to "selected".

NOTE: Without specifying anything, the first item in a drop-down will be selected by default.

Listboxes

The drop-down list lets you see just one choice in the list at a item, but you can overcome this limitation by turning the drop-down list to a listbox. To do this, the size attribute is used to specify how many items in the drop-down list can be seen at once.

In the above example, we have specified that three items in the drop-down list can be seen at once and the drop-down list has become a listbox.

You can take it a step further and make it possible to select more than one item at a time from a listbox by using the multiple attribute and setting its value to "multiple".

To select multiple items from the above drop-down list, press and hold the Ctrl key and select as many items as you need to select.

You can have multiple items selected in a listbox by default by using the selected attribute in the <option> tag and setting it to "selected".

File upload buttons

File upload buttons allow the user to upload files such as images, sounds, videos, text documents, etc. File upload buttons are created by using the <input> tag and setting its type attribute to "file".

Notice how the file upload button automatically displays a textbox to the left of it. This textbox will display the absolute path (from the hard drive such as C:\Windows\file.txt) of a file that the user tries to upload.

Try clicking the File upload button in the above example. It should automatically pop up a box allowing you to choose a file from your hard drive to upload.

Setting form elements to be read-only

Sometimes you want to include form elements on your pages, but you don't want people editing the content within them. This is achieved by using the readonly attribute and setting it to "readonly".

Resetting a form

Resetting a form refers to setting all the fields of a form to their default values (usually blank). To be able to reset a form, you have to create a reset button. Reset buttons are created by using the <input> tag and setting its type attribute to "reset". Another attribute used with reset buttons is the value attribute. The value given to this attribute will be what appears on the reset button.

Enter some data into the form files and click the "Reset" button. The form should then be reset.

Submitting a form

To be able to submit a form, you have to create a submit button. Submit buttons are created by using the <input> tag and setting its type attribute to "submit". Another attribute used with submit buttons is the value attribute. The value given to this attribute will be what appears on the submit button.

Instead of a button, you can alternatively display an image that will submit a form when it is clicked.

To have an image instead of a submit button, set the type attribute of the <input> tag to "image", and the src attribute to the path of the image.

But what happens to all that data when the form gets submitted?

First of all, there is another important attribute in the <form> tag which decides in which way the form will be submitted. This attribute is the method attribute. The method attribute can take the value of either "post" or "get".

The difference between these two methods is that the post method puts the values from a form into the headers of an HTTP communication, while the get method puts the values from a form right into the URL.

After the data is sent, it gets processed however you specify it to process. Meaning, it can go into a database, it can validate against another set of data, it can be sent by email, and many other possibilties.

The logisitics and mechanisms by which form data is submitted and processed are outside the scope of this tutorial (and actually, outside the scope of HTML). For details about those things you should learn a server-side language like PHP.

If you want to learn about data submission and processing right away, visit our PHP forms tutorial.