Creating a Form

Example:

Do you like apples?     Or Yes. No.

What music do you like?. Pop. Rock & Roll. Heavy Metal. Soul & Motown. Other, please state.

A form consists of the following:

<FORM>

Where <INPUT> is the information to be gathered.

<input type="button">

• You can use the following to create a standard grey button.

<form>
<input type=button value="Your Button" onclick=location="yourpage.htm">
</form>

<input type="checkbox">

Checkboxes allows the user to select more than one option.

Example:
Please select your choice of fruits.

Checkboxes can be checked by default and as with the textbox changed by the user.

apples:
yes

oranges:

pears:
yes

Notice that oranges does not return a yes, this is because the checkbox was blank so this would be taken as a no.

If you want a definate answer then you would have to include a checkbox for that purpose.

Example;

Do you want Oranges?
<input type="checkbox" name="oranges" value="yes> Yes
<input type="checkbox" name="oranges" value="no> No

This would then return a Yes or No providing one of the boxes was checked.

<input type="file">

The file upload input allows you to send a file off your harddrive.
The File input is displayed with a text box and a Browse button.
Browse to files location, on selecting, the files path and file name is entered into the text box.

Once this is done you now have to decide what you want to do with it.

For my example I am having the image you choose display in the right table cell.

I have done this by adding a button to call a "Javascript" function.

<script type="text/javascript">
<!--
function upload(){ // called by the 'Apply' button
which_image=document.f1.image_file.value // files path and name
if(which_image==""){ // if no image selected do nothing
return
}
else{
which_image=which_image.replace(/\\/g,'/')
document.image1.src='file:///'+which_image // show image
}
}
// -->
</script>

<form name="f1" method="post" enctype="multipart/form-data">
<INPUT type="file" name="image_file">
<INPUT type="button" value="Apply" onclick="upload()">
</form>

<img name="image1" src="">

When using this type of input, you must include ENCTYPE="multipart/form-data" in your FORM tag.
form method="post" enctype="multipart/form-data" action='mailto:where-ever.com'

Using Image Buttons

The text box and browse button displayed with the "File" input are a single item.
You cannot change the appearance of, or move, the "Browse" button.

To have this facility you have to use a separate "Textbox" and "Button" in conjunction with the "File" input.

The workround here is that the "File" input is hidden using a "CSS" attribute.
The "Textbox" is then used to display the "File" inputs value and the "Browse" button is pressed using the "Button" input with an onclick event.

<script type="text/javascript">
<!--
function upload(){
which_image2=document.f2.image_file2.value
if(which_image2==""){
return
}
else{
which_image2=which_image2.replace(/\\/g,'/')
document.image2.src='file:///'+which_image2
}
}
// -->
</script>

<form name="f2" method="post" enctype="multipart/form-data">
<input name="image_file2" type="file" style="display:none" onchange="txt2.value=this.value">
<input type="text" name="txt2">
<input type="image" src="browse.gif" onclick="image_file2.click(); return false">
<input type="image" src="apply.gif" onclick="upload();return false">
</form>

<img name="image2" src="">

Add return false to cancel image buttons default action

The opacity for this example is set at 50 so that you can see exactly what is going on

Select a graphic from your hard drive

<input type="hidden">

HIDDEN input is a name and value pair that is returned to you but does not show up on the web page.

If you had the same form on different sites, and you needed to know which site a form had come from, you could place a HIDDEN input with the name of that site as the inputs VALUE.

HIDDEN inputs are useful for cgi scripts.
Many Internet Service Providers have a cgi script you can send your forms to.
When you click the submit button the form data is sent to the this script for processing then it is sent back to you.
The hidden input tells the cgi script who you are and where to send the processed data.

<input type="image">

<input type="password">

The Password box is exactly the same as the Textbox except that you cannot see what has been typed.

It displays asterisks instead of the actual input. The browser still sends you the input.

<input type="radio">

Radio buttons only allow the user to select one of several options

Example;
Which fruit would you like?

Radio buttons can be checked by default and changed by the user.

Notice the name of all three radio inputs are the same but with different values, whereas the checkbox names are different, but have the same values.

<input type="reset">

Mistakes are often made or maybe a change of mind, the reset button clears the form ready to start again.

<input type="reset" name="reset" value="Clear the form">    

<select>.....</select>

This is another type of input which is used instead of INPUT.
SELECT requires a closing tag.

SELECT is used to create a list of options.
Within the select tags the list options are stated using the <OPTION> tag

<FORM>

<FORM> <SELECT NAME="fruit" SIZE=4> <OPTION VALUE="apple">Apple <OPTION VALUE="orange">Orange <OPTION VALUE="pear">Pear <OPTION VALUE="peach">Peach <OPTION VALUE="peach">Plum </SELECT> </FORM>

An open list Apple Orange Pear Peach Plum

Adding the SIZE attribute to the opening SELECT tag lets you create one of three lists. Setting SIZE equal to the number in the list produces an open list.

<FORM> <SELECT NAME="FRUIT"> <OPTION VALUE="apple">Apple <OPTION VALUE="orange">Orange <OPTION VALUE="pear">Pear <OPTION VALUE="peach">Peach <OPTION VALUE="peach">Plum </SELECT> </FORM>

A drop down list Apple Orange Pear Peach Plum

Setting SIZE to 0 or leaving it out will produce a dropdown list

<FORM> <SELECT NAME="fruit" size=3> <OPTION VALUE="apple">Apple <OPTION VALUE="orange">Orange <OPTION VALUE="pear">Pear <OPTION VALUE="peach">Peach <OPTION VALUE="peach">Plum </SELECT> </FORM>

A scrolling list Apple Orange Pear Peach Plum

Making SIZE less than the list length will produce a scrolling list.

You can have an option selected by default by adding SELECTED to the <OPTION"> tag

<FORM> <select name="fruit" size=5 multiple="multiple"> <option value="apple">Apple <option value="orange">Orange <option value="pear">Pear <option value="peach">Peach <option value="peach">Plum </select> </FORM>

Apple Orange Pear Peach Plum

Adding multiple allows you to select more than one by pressing CTRL whilst making the selection.

Grouping within a select box.

<select> <optgroup label="Fruit"> <option value ="apple">Apple</option> <option value ="orange">Orange</option> </optgroup> <optgroup label="Vegetable"> <option value ="potatoe">Potato</option> <option value ="carrot">Carrot</option> <option value ="pea">Pea</option> </optgroup> </select>

Apple Orange Potato Carrot Peas

<input type="submit">

This is the button that starts the ball rolling and submits the form.

<input type="submit" name="submit" value="Send the Form">    

<input type="text">

Each INPUT must have a name. And it should relate to the information that is required.

Whatever is typed in the box becomes the INPUTS VALUE and is paired with the INPUTS NAME.

Example:

How many Apples do you require?

After processing you would get;

Apples Required:
12

Here is how the above was done

Notice how the question and the INPUT NAME relate to each other

You can also state a default value, as I have done in the example above,

This can be changed by the user with the new entry then becoming the new value.

Another attribute you can use is SIZE which determines the length of the textbox.

<INPUT TYPE="text" SIZE="10">   

<INPUT SIZE="text" SIZE="50">

This does not limit the amount of text that can be entered only the amount that can be seen.

To limit the amount of text that can be entered you include the MAXLENGTH attribute.

<INPUT TYPE="text" MAXLENGTH="5">   

Now you can only type in five letters.....try it.

<textarea>.....</textarea>

To send a large amount of text this is what you use

<TEXTAREA NAME="comments" COLS=20 ROWS=10>.....</TEXTAREA> COLS = width of the textarea ROWS = height of the textarea

Your Text Here

Another attribute is WRAP;

WRAP = off.....Text in the box does not wrap and is sent exactly the way it is typed in.

WRAP = soft.....Text in the box wraps but it is sent as one long continuous string.

WRAP = hard.....Text in the box wraps and it is sent that way.