Forms
Simple Form
Simple Email Form
Simple Select Form

Tags used in tables:(Top of Page)
<TABLE> .... </TABLE>
Tag Type Tag Start Tag End Example Information
Form Tag <FORM> </FORM> <FORM>...elements...</FORM> Form elements are place between beginning and ending FORM tags.  The FORM tag also has attributes and JavaScript associations.
Input Tag <INPUT>   <INPUT TYPE='text'> Form element to allow user input: text fields, buttons, radio buttons, and checkboxes.
Select Tag <SELECT> </SELECT> <SELECT SIZE='4'> ..options ... ..</SELECT> Form element to allow user input: selection boxes with lists of options for user to select. 
Textarea Tag <TEXTAREA> </TEXTAREA> <TEXTAREA ROWS='10'> </TEXTAREA> Form element to allow user input: selection boxes with lists of options for user to select. 

Form Attribute

Attribute Purpose
NAME Name used to identify particular form within a page (DOM, JavaScript usage).
ACTION Specifies the URL of the script to be processed when form completed -- Server-side, URL, JavaScript, or email.
METHOD GET or POST primarily for server-side functionality.
ENCTYPE Encoding type -- for now 'plain/text' later in conjunction with server-side other encoding may be used.
TARGET Place the results into a frame usually for JavaScript processing.
onSubmit Event handler for server-side or email associated with the SUBMIT button.
onReset Event handler used often with JavaScript -- standard RESET does not change JavaScript properties only HTML.

 

Tag Form Control Description
<INPUT TYPE='TEXT'> Data-entry field A one-line data-entry field
<INPUT TYPE='PASSWORD'> Password field A one-line data-entry field with input hidden with astericks.
<INPUT TYPE='CHECKBOX'> Checkbox Select an item by clicking its corresponding checkbox.
<INPUT TYPE='RADIO'> Radio button Select one from a group of buttons.
<INPUT TYPE='SUBMIT'> Button When clicked, performs action of the form.
<INPUT TYPE='RESET'> Button When clicked, resets values in form elements.
<TEXTAREA> Multi-line data-entry field Enter many lines of text in a text box.
<SELECT> List selection Select one or more items from a list.

Input Attribute

Attribute Purpose
NAME Name used to identify particular input element within a page (DOM, JavaScript usage).
TYPE Identifies the type of input element:  text, button, radio, checkbox, submit, reset, image, password, hidden, file.
VALUE Default value for input element.
MAXLENGTH Indicates the number of characters for the text input field (text or password).  Not same as SIZE
SIZE Specifies the width of the input field (text or password) in characters.
Simple Form (Top of Page)
Name:

 

Simple Form for Email (Top of Page)

Name:

Subject:

(The submit button will cause the action of the form to be invoked.  In this example the mailto protocol is used 'mailto:ranger@ecst.csuchico.edu'


HTML CODE:

<form method="POST" action="mailto:ranger@ecst.csuchico.edu">

<p>Name: <input type="text" name="Name" size="30" value="Your name here"></p>

<p>Subject: <input type="text" name="Subject" size="40"></p>

<p><textarea rows="10" name="Message" cols="60">Enter what you want to send.</textarea></p>

<p><input type="submit" value="Submit" name="submit_button"><input type="reset" value="Reset" name="reset_button"></p>

</form>

 

 

Simple Select Forml (Top of Page)
Make a selection:


HTML CODE

<form method="POST" action="http://www.ecst.csuchico.edu/~ranger/cgi-bin/test.cgi">

Make a selection:

<select size="1" name="Select">

     <option>Good</option>

     <option>Bad</option>

     <option selected>Indifferent</option>

</select>

<BR>

<input type="submit" value="Submit" name="select_submint">

<input type="reset" value="Reset" name="select_reset">

<BR>

</form>