Basic Forms

Forms are used on web pages to allow data entry.
A form starts with the <form> tag and ends with the </form> tag.
In between these tags can be html codes and form controls (see below).
Each form should have a submit button that invokes the action specified in the form tag.

Form Tag

METHOD is POST or GET and refers to how data is passed from the browser to the form processing application residing on the server. In most cases it is best to use POST.

if you use the "Get" method, then data from the form is encoded into the url that is passed to the server JSP/ASP page

e.g. "ProductList.jsp?name=jack hammer&price=104.99&sku=10000"

if you use the Post method, the url is not changed, instead the data is passed internally in the request to the jsp.

ACTION specifies the url to invoke to respond to the form, actions can be email messages ("MAILTO:myemail@myaddress"), server application programs, or server scripts ("HTTP://www.mycompanyy.com/cgi-bin/application").
TARGET is the window name for the output to be directed to.
ENCTYPE tells how the form data should be encoded for the application. Leave this parameter off unless the ACTION is a mailto url. Then use ENCTYPE = "text/plain".
form name is a name given to the form so that it can be accessed by Javascript

Controls:

Single Line Text Input

Allows for a single line of text entry. The text box will be SIZE characters wide and allow MAXLENGTH characters of input. NAME defines the field name for the server application

Passwords input

Masks user input while they are typing. The text box will be SIZE characters wide and allow MAXLENGTH characters of input. NAME defines the field name for the server application

Multiple Line Text Input

<TEXTAREA Name="name" Rows=N Cols=N>default text</TEXTAREA>

Allows user to enter more than one line of text. NAME is the field name, ROWS, COLS specify how big the text box is in terms of characters high/wide. NAME defines the field name for the server application. Default text is optional.

Radio Buttons

Draws a radio button. These commands are normally used in groups all of which have the same name. This allows for only one to be checked at a time. The CHECKED parameter is put on just one button to denote a default setting. Value is returned to the server application if the box is checked. (nothing is returned if the box is not checked).

Check Boxes

Draws a check button. Value is returned to the server application if the box is checked. (nothing is returned if the box is not checked). The CHECKED parameter is used to denote a default setting.

Listbox

<OPTION VALUE="option1" SELECTED >Option 1 text</OPTION>

<OPTION VALUE="option2" SELECTED >Option 2 text</OPTION>

</SELECT>

Name in the SELECT specifies the name of the menu to the server application. SIZE refers to the number of lines visible, leaving size off or setting it to 1 will have the effect of a drop down box. If the MULTIPLE parameter is present then the user can select more than one option. OPTION tags must appear between <SELECT> and </SELECT>. The value within the option tag is returned to the server application if that item was selected. If the SELECTED parameter is present, then that option is selected by default. Text following the Option tag is the text which appears in the menu list.

Push Buttons

Draws a button filled with the text in the VALUE parameter.

Browse Button

Defines a file-select field and a "Browse..." button (for file uploads)

Submit Form Buttons	<INPUT TYPE = "SUBMIT" NAME="field name" VALUE="value" />	Draws a button filled with the text in the VALUE parameter. Invokes the server application when pressed by the user. Giving the buttons the same name and different values allows you to have multiple submit buttons, the server can then check the value to perform different actions when invoked.
Submit Form Buttons	<INPUT type="IMAGE" Name = "field name" src="image url" VALUE="value" />	Draws a button whose image is specified in the src parameter. Invokes the server application when pressed by the user. Giving the buttons the same name and different values allows you to have multiple submit buttons, the server can then check the value to perform different actions when invoked.

Reset/Clear

Draws a button filled with the text in the VALUE parameter. Resets all fields on the form to their default values.

Tab indexes - you can add a tabindex parameter to any form tag specifying its place in the tab order. e.g.

<INPUT NAME="field name"
TYPE= "TEXT"
SIZE=N MAXLENGTH = N VALUE="default value"
tabindex = "1" />

For other input types check out http://www.w3schools.com/html5/att_input_type.asp (note, not all types are supported by all browsers)

Example:

Information Request Form

Please enter all information so that we can better help you!

<H2>Information Request Form </H2>

<P><B><I>Please enter all information so that we can better help you!</I></B></P>

<P><FORM METHOD="POST" ACTION="mailto:nobody@nowhere.xyz" ENCTYPE="text/plain"></P>

<TABLE>
<TR>
<TD>Name:</TD>

<TD><INPUT type="text" name="name" size=20 maxlength=30></TD>
</TR>

<TR>
<TD>Street Address :</TD>

<TD><INPUT type="text" name="street" size=20 maxlength=30></TD>
</TR>

<TR>
<TD>City:</TD>

<TD><INPUT type="text" name="city" size=20 maxlength=30></TD>
</TR>

<TR>
<TD>State:</TD>

<TD><INPUT type="text" name="state" size=3 maxlength=2></TD>
</TR>

<TR>
<TD>Zip:</TD>

<TD><INPUT type="text" name="zip" size=15 maxlength=15></TD>
</TR>

<TR>
<TD>Email Address:</TD>

<TD><INPUT type="text" name="email" size=30 maxlength=40></TD>
</TR>
</TABLE>

<P>Have you ever purchased from us before? <INPUT type="checkbox" name="customer" value="yes"></P>

<P><BR>
Pet Type : Cat<INPUT type="radio" name="Pet Type" Value="Cat">
Dog <INPUT type="radio" name="Pet Type" Value="Dog">
Bird <INPUT type="radio" name="Pet Type" Value="Bird">
Reptile<INPUT type="radio" name="Pet Type" Value="Reptile">
Tropical Fish<INPUT type="radio" name="Pet Type" Value="Fish"> </P>

<P>Products you are interested in :</P>

<UL>
<P><SELECT NAME="Products" Size=4 MULTIPLE>
<OPTION Value="Pet Food">Pet Food
<OPTION VALUE="Collars/Leashes">Collars and Leashes
<OPTION VALUE="Medications">Medications
<OPTION VALUE="Treats">Treats
<OPTION VALUE="BOOKS">Books and Literature
<OPTION VALUE="Cages">Cages
<OPTION VALUE="Aquariums">Aquariums and supplies
</SELECT></P>
</UL>

<P>Enter questions or further information here:</P>

<P><TEXTAREA NAME="INFO Request" Rows=4 Cols=50>enter your questions here</TEXTAREA></P>

<P>
<INPUT type="Submit" Name="action" Value="send">
<INPUT type="reset" Value="clear">

</FORM>

Name:
Street Address :
City:
State:
Zip:
Email Address: