Creating Forms
An HTML Reference		 From Raw Materials for the Mind: Teaching & Learning in Information & Technology Rich Schools -- http://landmark-project.com/rmfm/
Tags Explanation Examples
Form Tags  
  
<form method="POST" action="http://cgi34.Freedback.com/mail.pl">

Input and other form tags

</form>

 The <form></form> tag defines the entire form.  The method atribute determines the format in which the information will be sent and the action attribute describes where the it will be sent. N/A
Single Line Entry Tag  
  
<input type="text" name="T1" size="20" value="" maxlength="20"> There are a variety of <input> tags. There format is determined by the type attribute.
Attribute Explanation
Type When type equal "text" then the input device becomes a single line entry tool.
Name The name attribute defines the label for the entered information
Size The size determines the width of the entry tool in characters
Maxlength The Maxlength attribute determines the maximum number of characters that can be entered into the field.
Value The value will insert prompting text into the entry tool, a default value.
Password Entry Tag  
  
<input type="password" name="T1" size="20" value="" maxlength="20">
Type A type attribute of "password" produces a single line entry tool where the entered text is displayed as dots or asterisks.
All other attributes are identical to those in the standard single line entry tool.
Hidden Input Tags  
  
<input type="hidden" name="T1" value="george@aol.com"> A hidden input tag is not really an entry tool, since it does even appear on the web page. 
Type The type attribute of "hidden" produces a hidden input tool that forces information into the system.
Name The Name attribute, as in other input tools, labels the information that has been entered.
Value In the hidden input, the Value is required.  The Value attribute determines the information that will be foreced into the system.
N/A
Checkboxes  
  
<input type="checkbox" name="C1" value="Yes" checked>Check This The checkbox is another type of input tag that is either check "true" or left "untrue."
Type The Type attribute of "checkbox" produces a box that can be checked or X'ed by clicking it.
Name The Name attribute, as above, labels the information from the checkbox.
Value The Value attribute holds the information that will be forwarded into the system if the checkbox is checked "true."
Checked The presence of the word "checked" indicates that the checkbox should be checked as a default.
Yes
Radio Button  
  
<input type="radio" value="V1" checked name="R1"> The radio button is another type of input tag that is either check "true" or left "untrue."
Type The Type attribute of "radio" produces a circle that can be dotted by clicking it or left empty.
Name The Name attribute, as above, labels the information from the checkbox.
Value The Value attribute holds the information that will be forwarded into the system if the radio button is clicked "true."
Checked The presence of the word "checked" indicates that the radio button should be clicked as a default.
Yes
Drop-Down Menu  
  
<select name="D1" size="1">

<option selected value="Red">Red</option>

<option value="Bule">Blue</option>

<option value="Green">Green</option>

<option value="Yellow">Yellow</option>

</select>

 The drop-down menu is produced with <select></select> and <option></option> tags.
Select The Select tag defines the entire drop-down menu.
Name The Name attribute labels the information that is selected by the user.
Size A size of one (1) makes the multiple choice tool a drop-down menu.
Option The Option tags define each option in the drop-down menu.
Value The Value attribute in each Option tag holds the information that will be forwarded to the system if its option is selected.
Selected The presence of the word "selected" indicates that the option should be selected as a default.
Scrolling Menu  
  
<select name="D2" size="3">

<option selected value="Red">Red</option>

<option value="Bule">Blue</option>

<option value="Green">Green</option>

<option value="Yellow">Yellow</option>

</select>

 The scrolling menu is produced with <select></select> and <option></option> tags.
Select The Select tag defines the entire scrolling menu.
Name The Name attribute labels the information that is selected by the user.
Size A size greater than 1 but less than the number of items makes the multiple choice tool a drop-down menu.
Option The Option tags define each option in the scrolling menu.
Value The Value attribute in each Option tag holds the information that will be forwarded to the system if its option is selected.
Selected The presence of the word "selected" in the <option></option> tag indicates that the option should be selected as a default.
Multiline Input Boxes  
  
<textarea rows="4" name="S1" cols="21" wrap=virtual>

</textarea>

 The multiline input box is produced with beginning and ending <textarea></textarea> tags.  There are also a variety of attributes that are exclusively associated with textareas.
Cols The value is a number, which indicates the width of the multiline input box in characters.  If cols=50, then the box will be 50 characters wide.
Rows The rows value defines the height of the multiline input box. If rows=4, then the box will be four rows of text in height.
Name Name, as above, labels the information that is being sent to the system.
Wrap The wrap attribute indicates the style of word wrapping that is utilized in the multiline input box.  If wrap is OFF, then there is no word wrap.  Wrap of PHYSICAL will engage word wrap and the line feeds will be sent to the system when the submit button is pressed.  A wrap of VIRTUAL will strip out the linefeeds as the information is sent to the system.
Submit Button  
  
<input type="submit" value="Submit Information" name="B1"> The submit button is defined by an <input> tag. 
Type The type attribute must be "Submit."  This is what defines it as a button that will engage the actions in the beginning <form> tag.
Value The text assigned to the Value attribute will be the text that labels the submit button.  In the case of our example, it is "Submit Information."
Name The Name attribute will likely have special meaning to the system that will receive the information.  Consult the programmer or vendor who is handling your data.
Reset Button  
  
<input type="reset" value="Erase Form & Start Over"> The reset button is defined by an <input> tag. 
Type The type attribute must be "Reset."  This is what defines it as a button that will erase the form and set all inputs back to their default values.
Value The text assigned to the Value attribute will be the text that labels the submit button.  In the case of our example, it is "Submit Information."