Using CGI is a good way to create order forms, opt-in’s or to collect information. Building a form in HTML is easy if you understand the different elements of a form and how you can use them to collect the information you want.
When building a form withing a traditional HTML page, you begin the form section of the page with a form tag – <form METHOD=”post” ACTION=”script.url”> - and end it with </form>. This is a very basic representation of the code and for purposes of this post we are only covering the definition of the elements of a form. Not the ‘METHOD’ or ‘ACTION’ parts of the tag.
For each case we will name the form element, give a brief description and show a sample code with a short explanation for each part. The code is in blue with explanations in italics.
Text Box – This allows the visitor to type in limited information, i.e, name, address, state, phone number, etc.
Address: <input type=”text” name=”address” size=”30″ maxlength=”50″ />
Address – identifies the text box to the visitor
<input type=”text” – identifies the input data as text
name=”address” – identifies the text as ‘address’ to the server and to your script
size=”30″ – defines the allowed number of characters (30) to be displayed in the form
maxlength=”50″ – sets 50 as the maximum number of characters that the visitor can enter in the box
/> – finishes the text box element
Larger Text Box- This would be used when you want to allow the visitor to write comments or send a question. This area can be as large as you want and will expand as needed if the visitor enters more information than fits into the display area. You may want to preceed the ‘text box’ with explanatory text, i.e. Comments/Questions Here:
<textarea name=”comments” rows=”8″ cols=”65″ wrap=”wrap”>Comments?</textarea>
<textarea – identifies this as a larger sized text box
name=”comments” – ‘comments’ is the word that will identify the input data to the server and your script
rows=”8″ – height of the text area in rows (default is 4)
cols=”65″ – width of the text area in characters (defaualt is 40)
wrap=”wrap” – lets the text wrap
Comments? – is the default text. If you did not want any text, you could type  
</textarea> – completes the text area
Radio Buttons – Allow the visitor to make a single choice from a list by selecting only 1 button. When using radio buttons you will have at the very least 2 lines of code.
Size: <input type=”radio” name=”category1″ value=”large” />
Size: – introductory text so the visitor knows what to do with the buttons. You could also use ‘select one of the following’.
<input type=”radio” – identifies the input data as ‘radio’
name=”category” – identifies the data being sent to the script AND links the radio buttons together ensuring only 1 button can be checked
value=”large” – where ‘large’ is sent to the server if the radio button is checked.
/> – finishes the radio button element
Checkboxes – allow the visitor to check as many boxes as they like from the list of options. Again, you would have a minimum of two lines of code.
<input type=”checkbox” name=”options” value=”fankit” />Fan Kit
<input type=”checkbox” – identifies the input data as being a ‘checkbox’
name=”options” – identifies the data being sent to the script AND links the checkboxes together
value=”fankit” – defines the value for each checkbox, in this case our checkbox is ‘fankit’
/> - finishes the checkbox element
Menus - allow you to offer the visitor a choice from a pre-set menu. Menus have 2 HTML tags: select and option. The common name attribute is set in the ‘select’ tag; the individual value attribute is set in each of the ‘option’ tags.
<select name=”location”>
<option value=”North”>North</option>
<option value=”South”>South</option>
<option value=”East”>East</option>
<option value=”West”>West</option>
</select>
<select name=”location”> – this is the common name for the group
<option value=”North”> – each one of the locations ( North, South, East, West) is an individual name and will be displayed giving the visitor the option to select one.
</select> – finishes the select element
Submit Button – sends the information to the server
<input type=”submit” value=”Submit Information”/>
<input type=”submit” – identifies the input as to be submitted
value=”Submit Information” – this is the text that will appear in the button
/> – finishes the submit process
Reset Button – allows the visitor to ‘erase’ any information they may have entered and start over
<input type=”reset” value=”reset information” />
<input type=”reset” – identifies the input as to be reset
value=”reset information” – this is the text that will appear in the button.
/> - finishes the reset process
Using the above elements to create a simple form should get you going with the basics. You can find more information on writing HTML forms in one of the HTML Quickstart Guides by Elizabeth Castro
