Categories


How to Write HTML Forms, Part 1

formHTMLUsing 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  –  

 –  and end it with
.  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:

Addressidentifies the text box to the visitor

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:

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  

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:

Size:introductory text so the visitor knows what to do with the buttons. You could also use ‘select one of the following’.

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. 

Fan Kit

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.

finishes the select element

Submit Button – sends the information to the server

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 Buttonallows the visitor to ‘erase’ any information they may have entered and start over

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   . . .  and, if you want to learn how to write your own scripts The Quickstart Guide by Elizabeth Castro for Perl and CGI  is an excellent reference.


Comments are closed.