Scribd
Upload
31 views

HTML Forms:: Search This Site

Forms allow users to enter information into fields like text boxes and drop-down menus. When submitted, the form data is sent to a program on the server. Common examples include search forms, which send search terms to a program to search a database and return results, and login forms, which validate user credentials against a database. Forms are defined using HTML tags like <form> to contain the fields and <input> for different field types like text, password, submit buttons etc. Attributes specify properties of the fields.

Uploaded by

shoilo
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
31 views

HTML Forms:: Search This Site

Forms allow users to enter information into fields like text boxes and drop-down menus. When submitted, the form data is sent to a program on the server. Common examples include search forms, which send search terms to a program to search a database and return results, and login forms, which validate user credentials against a database. Forms are defined using HTML tags like <form> to contain the fields and <input> for different field types like text, password, submit buttons etc. Attributes specify properties of the fields.

Uploaded by

shoilo
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 18

HTML Forms:

INTRODUCTION
A form is simply an area that can contain form fields.
Form fields are objects that allow the visitor to enter information - for example text boxes,
drop-down menus or radio buttons.
When the visitor clicks a submit button, the content of the form is usually sent to a program
that runs on the server. However, there are exceptions.
Javascript is sometimes used to create magic with form fields. An example could be when
turning options in a drop-down menu into normal links.
EXAMPLES
A typical form example would be a search engine.
SEARCH!

SEARCH THIS SITE

This is what happens when the form is submitted:

The search words are sent to a program on the server.

The program will search a database for matches.


The program creates a webpage with the results.
The results webpage is sent back to the visitor.

Another example would be a logon page.

Username:
Password:
Log In

NEW USERS: SIGN UP HERE!


FORGOT YOUR PASSWORD?

This is what happens when the form is submitted:

The ID and password are sent to a program on the server.

The program will search a database for valid entries.


If the entry is valid the visitor is sent to the protected page.
If the entry is invalid the visitor is sent to a "failure" page.

Both examples send the contents of the form fields to programs running on the server.
On the next page you will learn how to run programs that can handle your forms (even if you
technically can't do programming on your server)....
THE FORM TAG
When a form is submitted, all fields on the form are being sent.
The <form> tag tells the browser where the form starts and ends. You can add all kinds of
HTML tags between the <form> and </form> tags.
This means that a form can easily include a table or an image along with the form fields
mentioned on the next page.
Look at this example:
<html>
<head>
<title>My Page</title>
</head>
<body>
<!-- Here goes HTML -->
<form>
<!-- Here goes form fields and HTML -->
</form>
<!-- Here goes HTML -->
</body>
</html>
Note:
Unlike a table, forms are not visible on the page.
The form in our example is useless for two obvious reasons:

First it contains no form fields. It is simply comparable to a blank sheet of paper.

Second, it does not contain a recipient for the form once it is submitted.

To let the browser know where to send the content we add these properties to the <form> tag:

action=address

method=post or method=get

The address is the url of the cgi script the content should be sent to. The post and get methods
are simply two different methods for submitting data to the script.

If you are using a pre-programmed script (which we assume here) it is not important to
understand the difference between get and post.
In the description of the script you are using it will be made clear whether the scripts should be
addressed using one method or the other.
Below is an example of a typical form tag, with both action and method specified.
<html>
<head>
<title>My Page</title>
</head>
<body>
<!-- Here goes HTML -->
<form method="post" action="http://www.echoe.com/cgi-bin/formmail.php">
<!-- Here goes form fields and HTML -->
</form>
<!-- Here goes HTML -->
</body>
</html>

All we need now, is to allow the visitor to enter some information.


The next page explains how to do that....
FORM FIELDS
These fields can be added to your forms:

Text field
Password field
Hidden field
Text area
Check box
Radio button
Drop-down menu
Submit button
Reset button
Image button

TEXT FIELD
Text fields are one line areas that allow the user to input text.
If you want several lines you should use a text area instead.
SETTINGS:
Below is a listing of valid settings for text fields:

HTML
text
size=
maxlength=
name=
value=
align=
tabindex=

EXPLANATION
One line text field
Characters shown.
Max characters allowed.
Name of the field.
Initial value in the field.
Alignment of the field.
Tab order of the field.

EXAMPLE

The size option defines the width of the field. That is how many visible characters it can
contain.
The maxlength option defines the maximum length of the field. That is how many characters
can be entered in the field.
If you do not specify a maxlength, the visitor can easily enter more characters than are visible
in the field at one time.
The name setting adds an internal name to the field so the program that handles the form can
identify the fields.
The value setting defines what will appear in the box as the default value.
The align setting defines how the field is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, The alignments are explained in
the image section. You can learn about the different alignments here.
The tabindex setting defines in which order the different fields should be activated when the
visitor clicks the tab key.

AN EXAMPLE:
Look at this HTML example:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform"
action="http://www.domain.com/myformhandler.php"
method="POST">
<div align="center">
<br><br>
<input type="text" size="25" value="Enter your name here!">
<br><br>
</div>
</form>
</body>
</html>

And the resulting output from it:


Enter your name here!

PASSWORD FIELD
Password fields are similar to text fields.
The difference is that what is entered into a password field shows up as dots on the screen. This
is, of course, to prevent others from reading the password on the screen.
SETTINGS:
Below is a listing of valid settings for password fields:

HTML
password
size=
maxlength=
name=
value=
align=
tabindex=

EXPLANATION
One line password field
Characters shown.
Max characters allowed.
Name of the field.
Initial value in the field.
Alignment of the field.
Tab order of the field.

EXAMPLE

The size option defines the width of the field. That is how many visible characters it can
contain.
The maxlength option defines the maximum length of the field. That is how many characters
can be entered in the field.
If you do not specify a maxlength, the visitor can easily enter more characters than are visible
in the field at one time.
The name setting adds an internal name to the field so the program that handles the form can
identify the fields.
The value setting defines what will appear in the box as the default value.
The align setting defines how the field is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, The alignments are explained in
the image section. You can learn about the different alignments here.
The tabindex setting defines in which order the different fields should be activated when the
visitor clicks the tab key.
AN EXAMPLE:
Look at this HTML example:
<html>
<head>

<title>My Page</title>
</head>
<body>
<form name="myform"
action="http://www.domain.com/myformhandler.php"
method="POST">
<div align="center">
Enter Password : <input type="password" size="25">
<br><br>
</div>
</form>
</body>
</html>
And the resulting output from it:
Enter Password :
HIDDEN FIELD
Hidden fields are similar to text fields, with one very important difference!
The difference is that the hidden field does not show on the page. Therefore the visitor can't
type anything into a hidden field, which leads to the purpose of the field:
To submit information that is not entered by the visitor.

SETTINGS:
Below is a listing of valid settings for hidden fields:

HTML
hidden
name=
value=

EXPLANATION
Hidden field
Name of the field.
Value of the field.

EXAMPLE

The name setting adds an internal name to the field so the program that handles the form can
identify the fields.
The value setting defines what will be sent once the form is submitted.
AN EXAMPLE:
Look at this HTML example:

<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.domain.com/myformhandler.php"
method="POST">
<div align="center">
<input type="text" size="25" value="Enter your name here!">
<input type="hidden" name="Language" value="English">
<br><br>
</div>
</form>
</body>
</html>
And the resulting output from it:
Enter your name here!

The hidden field does not show, but still, when the form is submitted the hidden field is sent
with it.
In this example the hidden field would tell the program that handles the form, that the users
preferred language is English.
TEXT AREA
Text areas are text fields that can span several lines.
Unlike most other form fields, text areas are not defined with an <input> tag.
Instead you enter a <textarea> tag where you want the text area to start and a closing
</textarea> tag where you want the area to end.
Everything written between these tags will be presented in the text area box.
SETTINGS:
Below is a listing of valid settings for text areas:
HTML
textarea
rows=
cols=
name=
tabindex=

EXPLANATION
Text area - several lines
Rows in the field.
Columns in the field.
Name of the field.
Tab order of the field.

wrap=
off
virtual

Turns off linebreaking


Shows linebreaking, but

EXAMPLE

physical

sends text as entered.


Inserts linebreaks when
needed and even sends it.

The cols and rows settings are straightforward and simple. They specify how many columns
and rows you want in your text area.
The name setting adds an internal name to the field so the program that handles the form can
identify the fields.
The tabindex setting defines in which order the different fields should be activated when the
visitor clicks the tab key.
The wrap options are the most tricky part of text areas.
If you turn wrap off the text is handled as one long sequence of text without linebreaks.
If you set it to virtual the text appears on your page as if it recognized linebreaks - but when
the form is submitted the linebreaks are turned off.
If you set it to physical the text is submitted exactly as it appears on the screen - linebreaks
included.
AN EXAMPLE:
Look at this HTML example:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.domain.com/myformhandler.php"
method="POST">
<div align="center">
This is outside the area<br><br>
<textarea cols="40" rows="5" name="myname">
Now we are inside the area - which is nice.
</textarea>
<br><br>
And now we are outside the area again.
</div>
</form>
</body>
</html>
CHECK BOX
Check boxes are used when you want to let the visitor select one or more options from a set of
alternatives. If only one option is to be selected at a time you should use radio buttons instead.
SETTINGS:
Below is a listing of valid settings for check boxes:

HTML
checkbox
name=
value=
align=
tabindex=
checked

EXPLANATION
Choose one or more options
Name of the field.
Value that is submitted if checked.
Alignment of the field.
Tab order of the field.
Default check this field.

EXAMPLE

The name setting adds an internal name to the field so the program that handles the form can
identify the fields.
The value setting defines what will be submitted if checked.
The align setting defines how the field is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT.
The alignments are explained in the image section. You can learn about the different
alignments here.
The tabindex setting defines in which order the different fields should be activated when the
visitor clicks the tab key.
AN EXAMPLE:
Look at this HTML example:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.domain.com/myformhandler.php"
method="POST">
<div align="center"><br>
<input type="checkbox" name="option1" value="Milk"> Milk<br>
<input type="checkbox" name="option2" value="Butter" checked> Butter<br>
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>
<br>
</div>
</form>
</body>
</html>

And the resulting output from it:


Milk
Butter
Cheese

RADIO BUTTON
Radio buttons are used when you want to let the visitor select one - and just one - option from
a set of alternatives. If more options are to be allowed at the same time you should use
check boxes instead.
SETTINGS:
Below is a listing of valid settings for radio buttons:
HTML
radio
name=
value=
align=
tabindex=
checked

EXPLANATION
Choose one - and only one - option
Name of the group.
Value that is submitted if checked.
Alignment of the field.
Tab order of the field.
Default check this field.

EXAMPLE

The name setting tells which group of radio buttons the field belongs to. When you select one
button, all other buttons in the same group are unselected.
If you couldn't define which group the current button belongs to, you could only have one
group of radio buttons on each page.
The value setting defines what will be submitted if checked.
The align setting defines how the field is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT,
The alignments are explained in the image section. You can learn about the different
alignments here.
The tabindex setting defines in which order the different fields should be activated when the
visitor clicks the tab key.
AN EXAMPLE:
Look at this HTML example:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform"
action="http://www.domain.com/myformhandler.php"
method="POST">
<div align="center"><br>
<input type="radio" name="group1" value="Milk"> Milk<br>
<input type="radio" name="group1" value="Butter" checked>
Butter<br>
<input type="radio" name="group1" value="Cheese"> Cheese
<hr>
<input type="radio" name="group2" value="Water"> Water<br>
<input type="radio" name="group2" value="Beer"> Beer<br>
<input type="radio" name="group2" value="Wine" checked>
Wine<br>

</div>
</form>
</body>
</html>
And the resulting output:

Milk
Butter
Cheese
Water
Beer
Wine
DROP DOWN MENU
Drop-down menus are probably the most flexible objects you can add to your forms.
Depending on your settings, drop-down menus can serve the same purpose as radio buttons
(one selection only) or check boxes (multiple selections allowed).
The advantage of a drop-down menu, compared to radio buttons or check boxes, is that it takes
up less space.
But that is also a disadvantage, because people can't see all options in the menu right away.
There is a workaround for this - with the size setting, you can customize the menu so it shows
more than just one option at a time, but when you do that - you also lose the advantage of
taking up less space.
So whatever you decide - there is always a bonus and a price to pay.

Sometimes you may want to replace text fields with drop-down menus. This might be because
selecting from a menu is easier than typing. But it could also be because the script that handles
the form can't interpret just any text entry.
For example, you will often be asked to choose your state from a drop-down menu. This might
be because picking it from the menu is easier than typing the name of the state.
Along the same line, you may often asked to enter the 2 letter initials of your state from a dropdown menu as well.
This could prevent confusion for the script that handles the form input. If, say, the script was
programmed to only accept capital letters, then a drop-down menu would secure that no invalid
entries were made.

Another typical example would be replacing links with drop-down menus.

This can be done with javascript. If you're not into programming you can easily create a dropdown link menu with our online tool.
SETTINGS:
Below is a listing of valid settings for drop-down menus:
HTML
select
name=
size=
multiple=

EXPLANATION
Drop-down menu
Name of the field.
Visible items in list.
Allows multiple choices if yes.

option
selected
value=

Individual items in the menu.


Default select the item.
Value to send if selected.

EXAMPLE

Drop-down menus combine <select> and <option>.


Both tags have an opening and a closing tag.
A typical example of the syntax would be:
<select>
<option>Milk</option>
<option>Coffee</option>
<option>Tea</option>
</select>

The <select> tag defines the menu.


The name setting adds an internal name to the field so the program that handles the form can
identify the fields.
The size option defines how many items should be visible at a time. Default is one item.
The multiple setting will allow for multiple selections if present.

The <option> tag defines the single items in the menu.


The value setting defines what will be submitted if the item is selected. This is not always the
same as what it says in the menu. If our field was defined this way:
<option value="ID">Idaho</option>
then, in the menu it would say "Idaho" but when the form was submitted the abbreviated "ID"
would actually be sent.
You can force an item to be default selected by adding the selected option: <option selected>

AN EXAMPLE:
Look at this HTML example:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform"
action="http://www.domain.com/myformhandler.php"
method="POST">
<div align="center">
<select name="mydropdown">
<option value="Milk">Fresh Milk</option>
<option value="Cheese">Old Cheese</option>
<option value="Bread">Hot Bread</option>
</select>
</div>
</form>
</body>
</html>
And the resulting output from it:

SUBMIT BUTTON
When a visitor clicks a submit button, the form is sent to the address specified in the action
setting of the <form> tag.
Since visitors aren't always perfectionists you might consider adding a javascript validation
of the content before it is actually sent.
SETTINGS:
Below is a listing of valid settings for submit buttons:
HTML
EXPLANATION
EXAMPLE
submit
Submit button
name=
Name of the button.
value=
Text written on the button.
align=
Alignment of the button.
tabindex=
Tab order of the button.
The name setting adds an internal name to the button so the program that handles the form
doesn't confuse the button with the other fields.
The value setting defines what is written on the button.
The align setting defines how the button is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT,
The alignments are explained in the image section.
You can learn about the different alignments here.

The tabindex setting defines in which order the different fields should be activated when the
visitor clicks the tab key.
AN EXAMPLE:
Look at this HTML example:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform"
action="http://www.domain.com/myformhandler.php"
method="POST">
<div align="center">
<br><br>
<input type="text" size="25" value="Enter your name here!">
<br><input type="submit" value="Send me your name!"><br>
</div>
</form>
</body>
</html>
And the resulting output from it:
Enter your name here!
Send me your name!

RESET BUTTON
When a visitor clicks a reset button, the entries are reset to the default values.
SETTINGS:
Below is a listing of valid settings for reset buttons:

HTML
reset
name=
value=
align=
tabindex=

EXPLANATION
Reset button
Name of the button.
Text written on the button.
Alignment of the button.
Tab order of the button.

EXAMPLE

The name setting adds an internal name to the button so the program that handles the form
doesn't confuse the button with the other fields.
The value setting defines what is written on the button.
The align setting defines how the button is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT,
The alignments are explained in the image section.
You can learn about the different alignments here.

The tabindex setting defines in which order the different fields should be activated when the
visitor clicks the tab key.
AN EXAMPLE:
Look at this HTML example:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform"
action="http://www.domain.com/myformhandler.php" method="POST">
<div align="center">
<br><br>
<input type="text" size="25" value="Enter your name here!">
<br><input type="submit" value="Send me your name!"> <input
type="reset" value="Reset!"><br>
</div>
</form>
</body>
</html>
And the resulting output from it:
Enter your name here!
Send me your name!

Reset!

IMAGE BUTTON
Image buttons have the same effect as submit buttons. When a visitor clicks an image button
the form is sent to the address specified in the action setting of the <form> tag.
Since visitors aren't always perfectionists you might consider adding a javascript validation
of the content before it is actually sent.
SETTINGS:
Below is a listing of valid settings for image buttons:
HTML
image
name=
src=
align=
border=
width=
height=
vspace=
hspace=
tabindex=

EXPLANATION
Submit button
Name of the image.
Url of the image.
Alignment of the image.
Border width around the image.
Width of the image.
Height of the image.
Spacing over and under image.
Spacing left and right of image.
Tab order of the image.

EXAMPLE

The name setting adds an internal name to the image button so the program that handles the
form doesn't confuse it with the other fields.
The src setting defines the URL of the image.
The align setting defines how the image is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT,
The alignments are explained in the image section.
You can learn about the different alignments here.
The border setting defines the width (in pixels) of the border around the image.
The width setting defines the width of the image.
The height setting defines the height of the image.
The vspace setting defines the spacing over and under the image (in pixels).
The hspace setting defines the spacing to the left and right of the image (in pixels).
The tabindex setting defines in which order the different fields should be activated when the
visitor clicks the tab key.
AN EXAMPLE:
Look at this HTML example:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform"
action="http://www.domain.com/myformhandler.php" method="POST">
<div align="center">
<br><br>
<input type="text" size="25" value="Enter your name here!">
<br><input type="image" src="rainbow.gif" name="image" width="60"
height="60"><br>
</div>
</form>
</body>
</html>

And the resulting output from it:


Enter your name here!

QUICK REFERENCE
If you're not familiar with the form tags you can learn in detail about each tag listed in the left
menu. Otherwise - use this quick reference for an easy overview of form tags and properties.
HTML
textarea
rows=
cols=
name=
wrap=
off
virtual

EXPLANATION
Text area - several lines
Rows in the field.
Columns in the field.
Name of the field.

text
size=
maxlength=
name=
value=
password
size=
maxlength=
name=
value=
checkbox
name=
value=
radio
name=
value=
select
name=
size=
multiple=

Control linebreaks.
Turns off linebreaks.
Shows linebreaks, but
sends text as entered.
Inserts linebreaks when
needed and even sends it.
One line text field
Characters shown.
Max characters allowed.
Name of the field.
Initial value in the field.
Password field.
Characters shown.
Characters allowed to enter.
Name of the field.
Initial value in the field.
Choose one or more options
Name of the field.
Initial value in the field.
Choose only one option
Name of the field.
Initial value in the field.
Drop-down menu
Name of the field.
Number of items in list.
Allow multiple choice if yes.

option
selected
value=
hidden
name=
value=
reset
name=
value=

Individual items in the menu.


Make an item default.
Value to send if selected.
Does not show on the form.
Name of the field.
Value to send.
Button to reset all fields
Name of the button.
Text shown on the button.

physical

EXAMPLE

Reset

submit
name=
value=

Button to submit the form


Name of the button.
Text shown on the button.

image
name=

Image behaving as button


Name of the image.

Submit

Note: This is a quick reference showing the most common settings for each field. For a
complete listing and explanation you should follow the link to the relevant field in the
menu.

You might also like