HTML HTML intro.
  1. HTML intro
  2. Web pages and you
HTML basics
  1. HTML getting started
  2. HTML basics
  3. HTML document
HTML text
  1. HTML text formatting 1
  2. HTML text formatting 2
  3. HTML text formatting 3
  4. HTML fonts
  5. HTML entities
HTML links
  1. HTML links
  2. HTML email links
HTML images
  1. HTML images
  2. HTML image maps
HTML forms
  1. HTML forms
  2. HTML form labels
  3. HTML fieldset/legend
HTML tables
  1. HTML tables
  2. HTML tables concepts
HTML frames
  1. HTML frames
HTML backgrounds/color
  1. HTML backgrounds
  2. HTML colors
  3. HTML color shades
  4. HTML color usage
HTML style/layout
  1. HTML stylesheets
  2. HTML div/span
HTML media
  1. HTML audio
  2. HTML video
  3. HTML objects
  4. HTML download media
HTML declaratives
  1. HTML head section
  2. HTML meta tags
  3. HTML scripts
  4. HTML declarations
  5. HTML document types
Practical HTML
  1. HTML tag rules
  2. HTML things to avoid
  3. URL formatting
  4. URL encoding/decoding
  5. HTML use/access
  6. HTML publish work
HTML extras
  1. HTML marquees
HTML wrap-up
  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

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

Attributes of the <form> tag:
Example:
<form name="regForm" action="register.php"> <!-- form content goes here --> </form>

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.

Attributes of the <input> 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".

Example:
<form> Name: <input type="text" name="name" size="23" maxlength="21" /> <br /> E-mail: <input type="text" name="email" size="23" /> </form>
Output:
Name: E-mail:

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.

Example:
<form> Username: <input type="text" name="name" /> <br /> Password: <input type="password" name="password" /> </form>
Output:
Username: Password:

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

Example:
<form> Name: <input type="text" name="name" /> <br /> E-mail: <input type="text" name="email" /> <br /> <input type="hidden" name="firstTimeVisit" value="Yes" /> </form>
Output:
Name: E-mail:

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.

Example:
<form> <input type="button" value="Click here for a message" /> </form>
Output:

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.

Attributes of the <textarea> tag
Example:
<form> <textarea name="textarea1" rows="5" cols="20"></textarea> </form>
Output:

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.

Example:
Which web browser do you use? <form> <input type="radio" name="browser" value="Firefox" />Firefox <input type="radio" name="browser" value="Opera" />Opera <input type="radio" name="browser" value="Chrome" />Chrome <input type="radio" name="browser" value="Safari" />Safari <input type="radio" name="browser" value="Internet Explorer" />Internet Explorer <input type="radio" name="browser" value="Other" />Other </form>
Output:
Which web browser do you use? Firefox Opera Chrome Safari Internet Explorer Other

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.

Example:
Which genre(s) of books do you like? <form> <input type="checkbox" name="genre" value="Science_Fiction" />Science Fiction <input type="checkbox" name="genre" value="Adventure" />Adventure <input type="checkbox" name="genre" value="Comedy" />Comedy <input type="checkbox" name="genre" value="Mystery" />Mystery <input type="checkbox" name="genre" value="Suspense" />Suspense </form>
Output:
Which genre(s) of books do you like? Science Fiction Adventure Comedy Mystery Suspense

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.

Example:
<form> <select name="objects"> <option value="Chair">Chair</option> <option value="Box">Box</option> <option value="Door">Door</option> <option value="Ladder">Ladder</option> </select> </form>
Output:

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.

Example:
<form> <select name="languages"> <optgroup label="Client Side"> <option>HTML</option> <option>CSS</option> <option>Javascript </optgroup> <optgroup label="Server side"> <option>PHP</option> <option>PERL</option> <option>ColdFusion </optgroup> <optgroup label="Software"> <option>C</option> <option>C++</option> <option>FORTRAN</option> </optgroup> </select> </form>
Output:

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

Example:
<form> <select name="objects"> <option>Chair</option> <option>Box</option> <option selected="selected">Door</option> <option>Ladder</option> </select>
Output:

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.

Example:
<form> <select name="objects" size="3"> <option>Chair</option> <option>Box</option> <option>Door</option> <option>Ladder</option> </select> </form>
Output:

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

Example:
<select name="objects" size="3" multiple="multiple"> <option>Chair</option> <option>Box</option> <option>Door</option> <option>Ladder</option> </select>
Output:

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

Example:
<form> <select name="objects" size="4" multiple="multiple"> <option >Chair</option> <option selected="selected">Box</option> <option selected="selected"> Door</option> <option selected="selected">Ladder</option> </select> </form>
Output:

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

Example:
<form> <input type="file" /> </form>
Output:

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

Example:
<form> <input type="text" name="text1" value="Try to edit me....." readonly="readonly /> <textarea rows="5" cols="20" readonly="readonly"> I am the phantom of the night..the uneditable textarea! </textarea> </form>
Output:

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.

Example:
<form> Name: <input type="text" name="name" /> <br /> E-mail: <input type="text" name="email" /> <br /> <input type="reset" value="Reset" /> </form>
Output:
Name: E-mail:

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.

Example:
<form name="data" action="form_process.php> <input type="text" name="text" /> <br /><br /> <input type="submit" value="Submit" /> </form>
Output:

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

Example:
<form name="data" action="form_process.php"> <input type="text" name="text" value="Click on the apple to get nutritious!" size="35" /> <br /><br /> <input type="image" src="/images/apple.jpg" /> </form>
Output:

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.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information