Coding for a Form

Here is a very basic outline of the workings of a form. Please note that any form parts on this page will not "send"; their sole purpose here is to illustrate the various parts of a form.

Every form begins with <form> and ends with </form>. But there are several variables (some hidden and some visible) from which to choose within a form. It can be as simple or as complex as you like.

You can have any number of text boxes and checkboxes. But you must ensure that each field has a unique name; all input fields within one group of checkbox choices must take the same name. (with the exception of radio buttons in one group: each radio button has a unique name.) There cannot be any spaces in the names and the names are case-sensitive. Some servers specify that the text box name for e-mail MUST be name="email" (note that there is no hyphen or space between the e and mail) or the form won't get sent to you. Also, some systems choke on hyphens and underscores in the names.

hidden values

There are some things that can seem to be hidden from general view on a form. For instance, you may want to 'hide' the tag that points to the form processor. Note the type="hidden" spec in the following code. This is what 'hides' the element. But do be aware that the tags that have this spec are only hidden from a browser's www window. They can still be seen by viewsource, search bots, etc.

Please use a secure form processing script to store sensitive information (phone numbers, email addresses, etc.), instead of relying on the hidden attribute. You can find secure form processing scripts in your CPanel under Scripts and Fantastico. You can also take a look at the php form mail tutorial.

If you want to have a reply page, you must create it so that the form will have somewhere to go. The simplest reply is a generic "Thank you for your response." You can also just configure the reply to go back to your main page or wherever you want your viewers to be sent after they have filled in your form.

The italic sections in the following code can (and indeed should) be changed to fit your form. Please remember that all names must be different within each form.

Code (hidden values coding in bold):

The italic sections in the following code can (and indeed should) be changed to fit your form.

Code (hidden values coding in bold):

<form method="post" action="ExAcT_URL_to_your_form_processor">


<input type="hidden" name="reply" value="ExAcT_URL_Of_RePLy_PaGe" />



[visible parts of form go here ]

</form>

Note that in the above coding example, the second input tag is pointing to a reply page. If you are indicating a reply page, you must create it so that the form will have somewhere to go. You can also just configure the reply to go back to your main page or wherever you want your viewers to be sent after they have filled in your form.

label

The label tag for greater accessibility can be used in any input, textarea, or select form element. The for in the label tag must be the same as the id of the field. Clicking on the labelled field will put the cursor focus into the field for that label.

Coding:

<label for="fieldone">Field 1</label>
 
<input type="text" name="fieldone" id="fieldone" /><br />

 
<label for="fieldtwo">Field 2</label>
 
<input type="text" name="fieldtwo" id="fieldtwo" />

Watch for other examples of the label tag throughout the rest of this tutorial.

text boxes

The name must be unique for each category. The for in the corresponding label must match the id for its field. The size number determines the width of the box. The maxlength number determines the maximum number of characters that can be entered into the box. You don't have to fill in the value if you want the box to be empty by default. (However, it is helpful for those who use text-to-speech browsers if the box has something in it.) If you do fill in the value, please insert onfocus="this.value=''" into the input spec. The values can have spaces in them but remember, no spaces in the names and all names must be unique within each form

The italic sections in the following code can (and indeed should) be changed to fit your form.

Coding (textbox coding in bold):

<p><label for="SenderName">Your name</label><br />
                                                                                          
<input type="text" size="32" maxlength="80" name="SenderName" id="SenderName" value="your name"  onfocus="this.value=''" /><br />

<label for="SenderAddress">Your e-mail address</label><br />

<input type="text" size="32" maxlength="80" name="SenderAddress"  id="SenderAddress" value="" /><br />

<label for="Nationality">Your Nationality</label><br />

<input type="text" size="16" maxlength="80" name="Nationality"  id="Nationality" value="" />

</p>

drop down menu (only one item per menu can be selected)

In the A to E dropdown menu, the first option is empty. That is done by leaving the value in the option tag empty: <option value="">choose from A to E</option>. In the "F to J" dropdown menu, the empty option has been omitted. You can choose whichever way works best for you.

You can have as many options as you want in each dropdown menu. If you use more than one dropdown menu, the name in the select tag of each dropdown menu must be different ... remember, no spaces in the names and all names must be different within each form.

The italic sections in the following code can (and perhaps should) be changed to fit your form.

Coding (dropdown menu coding in bold):


Select a Letter:<br />

<label for="AtoE">from A to E</label>
 
<select name="AtoE" id="AtoE" title="choose from A to E">

<option value="">choose from A to E</option> <!-- this line is optional -->

<option value="A">A</option>

<option value="B">B</option>

<option value="C">C</option>

<option value="D">D</option>

<option value="E">E</option>

</select>



<label for="FtoJ">from F to J</label>
 
<select name="FtoJ" id="FtoJ" title="choose from F to J">

<option value="F">F</option>

<option value="G">G</option>

<option value="H">H</option>

<option value="I">I</option>

<option value="J">J</option>

</select>

optgroup

The optgroup tag can be used in dropdown boxes to group together sections into one dropdown box. Take a look at the coding:

<label for="shapes">Select a Shape:</label><br />

 
<select name="shapes" id="shapes">


<option value="">2D or 3D</option> <!-- this line is optional -->

 

<optgroup label="2D">
 
<option value="circle">circle</option>
 
<option value="triangle">triangle</option>
 
<option value="square">square</option>
 
</optgroup>

 

<optgroup label="3D">
 
<option value="sphere">sphere</option>
 
<option value="pyramid">pyramid</option>
 
<option value="cube">cube</option>
 
</optgroup>
 
</select>

radio button (only one item per category can be selected)

The name must be the same for all radio selects within each category. In this example, there are two categories. If you want to preselect one of the buttons, put checked into the input tag. Here, blue is checked ... remember, no spaces in the names. Note that within each category, each name remains the same but each id is unique. The id must go with its corresponding label. This example has two categories. Only one radio button per category can be selected.

The italic sections in the following code can be changed to fit your form.

Coding (radio button coding in bold):

<p>Choose a Primary Colour:<br />
                           
<input type="radio" name="pColour" id="pColour1" value="red" /><label for="pColour1">red</label>


<input type="radio" name="pColour" id="pColour2" value="blue" checked="checked" /><label for="pColour2">blue</label>

<input type="radio" name="pColour" id="pColour3" value="yellow" /><label for="pColour3">yellow</label></p>



<p>Choose a Secondary Colour:<br />

<input type="radio" name="sColour" id="sColour1" value="green" /><label for="sColour1">green</label>

<input type="radio" name="sColour" id="sColour2" value="orange" /><label for="sColour2">orange</label>


<input type="radio" name="sColour" id="sColour3" value="violet" /><label for="sColour3">violet</label></p>

check box (you can select any number of these)

Please refer to http://www.w3schools.com/html/html_forms.asp for the coding of checkboxes. (ejm, July 2008) The name must be unique for each checkbox. If you want to preselect a checkbox, put checked into the input tag. In this example, "1" and "5" are checked ... remember, no spaces in the names. More than one box can be checked.

~~The italic sections in the following code can (and indeed should) be changed to fit your form.~~

~~Code (checkbox coding in bold):~~

<p>Choose a number:<br /> <label for="number1" title="click here to put focus on 'one'">one</label> <input type="checkbox" name="number1" value="1" checked="checked" /> <label for="number2" title="click here to put focus on 'two'">two</label> <input type="checkbox" name="number2" value="2" /> <label for="number3" title="click here to put focus on 'three'">three</label> <input type="checkbox" name="number3" value="3" /> <label for="number4" title="click here to put focus on 'four'">four</label> <input type="checkbox" name="number4" value="4" /> <label for="number5" title="click here to put focus on 'five'">five</label> <input type="checkbox" name="number5" value="5" checked="checked" /> </p>

fieldset and legend

checkboxes | dropdown menu | fieldset | hidden values | label | legend | optgroup | radio buttons | reset button | submit button | textarea | text box

Schools college
university
hard knocks

Work Places office
home
field

The fieldset tag is used to group several related form elements together. Some browsers will show the groupings; others will read the form elements aloud. The fieldset also facilitates tabbed navigation. A caption can be added to a fieldset tag with the legend tag, which some screen readers will read aloud. Note that the legend tag is not widely supported by current browsers and that it must be placed directly after fieldset, before any other elements.

<fieldset> <legend>Schools</legend> <label for="college">college</label> <input type="text" name="college" id="college" /><br /> <label for="university">university</label> <input type="text" name="university" id="university" /><br /> <label for="hardknocks">hard knocks</label> <input type="text" name="hardknocks" id="hardknocks" /><br /> </fieldset> <fieldset> <legend>Work Places</legend> <label for="office">office</label> <input type="text" name="office" id="office" /><br /> <label for="home">home</label> <input type="text" name="home" id="home" /><br /> <label for="field">field</label> <input type="text" name="field" id="field" /> </fieldset>

textarea box

checkboxes | dropdown menu | fieldset | hidden values | label | legend | optgroup | radio buttons | reset button | submit button | textarea | text box

Your message
optional pretyped text

The cols number alters the width of the box. The rows number alters the depth ... remember, there should be no spaces in the names and all names must be different within each form. If you would like your textarea to contain some text for the user to read, type it between the opening and closing <textarea> tags.

The italic sections in the following code can be changed to fit your form.
Coding (text area coding in bold):

<label for="comment">Your message</label><br /> <textarea name="comment" id="comment" cols="24" rows="5">optional pretyped text</textarea>

reset button

checkboxes | dropdown menu | fieldset | hidden values | label | legend | optgroup | radio buttons | reset button | submit button | textarea | text box

The value can be anything you like; when the button is hit, the form will reset to its default values.

The italic sections in the following code can be changed to fit your form.
Coding (reset button coding in bold):

<form> <input type="reset" value="Reset Form" /> </form>

submit button

checkboxes | dropdown menu | fieldset | hidden values | label | legend | optgroup | radio buttons | reset button | submit button | textarea | text box

Please note that this button will not send anything; the sendbutton is solely here for illustration.

The value can be anything you like. Hitting the submit button sends the form. It's a good idea to suggest to your senders that before hitting send, they proofread and/or copy and paste the contents should they wish to keep a record.

The italic sections in the following code can (and indeed should) be changed to fit your form. The values can have spaces in them.
Coding (submit button coding in bold):

<input type="submit" value="Please Send Now" />

And there you have it. Those are the basics of form coding.

© llizard 2003, 2005, 2008

CWC reference pages . ASCII-art . illustrations and gif animations . llinks to ridiculously useless sites . home page

Crosswinds WebHosting