Supplement Creating Forms

Objectives Show how forms are used How to create the Form element HTML elements used for creating input fields

Usage of Forms Forms are used to interact with a web server Forms are used to send information to a secondary server (e.g. Database) Forms are used to send information to a person (e.g. via )

The 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

Tags used as form elements is the workhorse. It’s used to create a variety of different types of input fields is a drop-down or list-box form element is a large, multi-line text input area

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 “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 “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 Ship by UPS Ship by FedEx

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 Ship Quickly

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 “submit” Used to perform an the form’s action Required attributes: – Name & ID: Used for reference Optional: – Value: Text that appears on the button (Submit by default)

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 “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

“Select” 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) Ship by UPS Ship by FedEx

“TextArea” 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