HTML Forms

HTML Forms :

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	EXPLANATION	EXAMPLE
text size= maxlength= name= value= align= tabindex=	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.

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, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.

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:

And the resulting output from it:

HTML Forms :

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	EXPLANATION	EXAMPLE
password size= maxlength= name= value= align= tabindex=	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.

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, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM. 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.mydomain.com/myformhandler.cgi" 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 :

HTML Forms :

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:

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.mydomain.com/myformhandler.cgi" 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>

HTML Forms :

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	EXPLANATION	EXAMPLE
checkbox name= value= align= tabindex= checked	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.

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, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.

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.mydomain.com/myformhandler.cgi" 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

HTML Forms :

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	EXPLANATION	EXAMPLE
radio name= value= align= tabindex= checked	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.

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, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.

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.mydomain.com/myformhandler.cgi" 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

HTML Forms :

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.

SETTINGS:

Below is a listing of valid settings for drop-down menus:

HTML	EXPLANATION	EXAMPLE
select name= size= multiple= option selected value=	Drop-down menu Name of the field. Visible items in list. Allows multiple choices if yes. Individual items in the menu. Default select the item. Value to send if selected.

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.mydomain.com/myformhandler.cgi" 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:

HTML Forms :

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.

SETTINGS:

Below is a listing of valid settings for submit buttons:

HTML	EXPLANATION	EXAMPLE
submit name= value= align= tabindex=	Submit button Name of the button. Text written on the button. Alignment of the button. 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, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.

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:

And the resulting output from it:

HTML Forms :

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	EXPLANATION	EXAMPLE
reset name= value= align= tabindex=	Reset button Name of the button. Text written on the button. Alignment of the button. 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, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section.

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:

And the resulting output from it:

HTML Forms :

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.

SETTINGS:

Below is a listing of valid settings for image buttons:

HTML	EXPLANATION	EXAMPLE
image name= src= align= border= width= height= vspace= hspace= tabindex=	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.

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, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.

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:

And the resulting output from it:

HTML	EXPLANATION	EXAMPLE
textarea rows= cols= name= tabindex= wrap= off virtual physical	Text area - several lines Rows in the field. Columns in the field. Name of the field. Tab order of the field. Turns off linebreaking Shows linebreaking, but sends text as entered. Inserts linebreaks when needed and even sends it.