SupplementSupplement

Creating Forms

ObjectivesObjectives

Show how forms are usedHow to create the Form elementHTML elements used for creating input fields

Usage of FormsUsage of Forms

Forms are used to interact with a web serverForms are used to send information to a

secondary server (e.g. Database)Forms are used to send information to a

person (e.g. via e-Mail)

The <FORM> TagThe <FORM> Tag The opening & closing Form tags surround the input

fields & action buttons on the form “Required” attributes include:

– Action: States what happens when the form is submitted– Name & ID: References that are used in other parts of the

document to reference the contents of the form– Method: values can be “get” or “post”, “get” is default

although “post” is usually recommended “Optional” attributes:

– EncType: what type of elements are used on the form application/x-www-form-urlencoded multipart/form-data if a file is uploaded with the other data

<FORM ACTION="http://hosting.globaleyes.com/TestForm.php" NAME="MyForm“ ID="MyForm" method="post">

Tags used as form elementsTags used as form elements

<INPUT> is the workhorse. It’s used to create a variety of different types of input fields

<SELECT> is a drop-down or list-box form element

<TEXTAREA> is a large, multi-line text input area

Input type “text”Input type “text”

Standard entry field used in form tags Used for entering name, address, etc. Required attributes:

– Name & ID: Used for reference & variable names– Size: Width as the field appears on the web page– MaxLength: Maximum number of characters that can be

entered Optional attributes:

– Readonly (4.0 only)– Value: if you want to set a default text for the field

<INPUT TYPE="text" NAME="Name" ID="Name" SIZE="30" MAXLENGTH="50">

Input type “hidden”Input type “hidden”

Used to send information to form processing application that you don’t want the user to see

Required attributes:– Name & ID: Used for reference & variable names– Value: The value associated with the variable (ID) that

is to be sent

<INPUT TYPE="hidden" NAME=“ServerInfo" ID=“ServerInfo" VALUE="MyForm">

Input type “radio”Input type “radio”

Creates multiple options from which the user can select only one

Required attributes:– Name & ID: Used for reference, variable names, and to group

radio buttons together– Value: Used as the value that gets sent when the form is submitted

if this button is selected Optional attributes:

– Checked: Used to select this button when the form is loaded<INPUT TYPE="radio" NAME="ShippingOption" ID="ShippingOption" VALUE="UPS“ CHECKED> Ship

by UPS<INPUT TYPE="radio" NAME="ShippingOption" ID="ShippingOption" VALUE="FedEx">Ship by FedEx

Input type “checkbox”Input type “checkbox”

Creates a Yes/No option available to users Required attributes:

– Name & ID: Used for reference & variable names Optional attributes:

– Checked: Used to select this button when the form is loaded

– Value: Used as the value that gets sent when the form is submitted if this button is selected

Caveat: If button is not checked, no variable or value is sent to form processor

<INPUT TYPE="checkbox" NAME="Ship" ID="Ship" VALUE="T" CHECKED>Ship Quickly

Input type “button”Input type “button”

Used to perform an action (e.g. check values, automatically fill in values, submit, etc.)

Required attributes:– Name & ID: Used for reference– Value: Text that appears on the button

Caveat: Useless without DHTML

<INPUT TYPE="button" NAME="Something" ID="Something" VALUE="Do Something">

Input type “submit”Input type “submit”

Used to perform an the form’s actionRequired attributes:

– Name & ID: Used for reference

Optional: – Value: Text that appears on the button (Submit

by default)

<INPUT TYPE="submit" NAME="Submit" ID="Submit" VALUE="Send">

Input type “reset”Input type “reset”

Used to perform reset the values on the form to what the default values were, erasing all user input

Required attributes:– None

Optional: – Name & ID: Used for reference– Value: Text that appears on the button (Reset by

default)

<INPUT TYPE="reset" NAME="Reset" ID="Reset" VALUE="Reset">

Input type “file”Input type “file”

Used to send a file to the program processing the form

Required attributes:– Name & ID: Used for reference & variable names

Optional: – Size: Number of characters to display the name of the

file

<INPUT TYPE="file" NAME="UploadFile" ID="UploadFile" SIZE="3">

““Select” fieldSelect” field

Creates multiple options from which the user can select one or more

Required attributes:– Name & ID: Used for reference, variable names, and to

group radio buttons together– Size: How many lines are used to display the listbox (1

for a dropdown box)

<SELECT NAME="ShippingOption2" ID="ShippingOption2" SIZE="1"><OPTION VALUE="UPS" SELECTED>Ship by UPS</OPTION><OPTION VALUE="FedEx">Ship by FedEx</OPTION>

</SELECT>

““TextArea” fieldTextArea” field

Entry field used in forms for submitting large amounts of text information

Used for entering name, address, etc. Required attributes:

– Name & ID: Used for reference & variable names– COLS: Width as the field appears on the web page– ROWS: Number of lines

<TEXTAREA COLS="40" ROWS="3" NAME="Description" ID="Description"></TEXTAREA>