Robinson_CIS_285_2005 HTML FORMS CIS 285 Winter_2005 Instructor: Mary Robinson

Robinson_CIS_285_2005

HTML FORMS

CIS 285 Winter_2005Instructor: Mary Robinson


Agenda Class #3

Forms JavaScript


Objectives

Define terms related to forms Describe the different form controls

and their uses Use the <form> tag Use the <input> tag Create radio buttons Create a text field Create a textarea field


Objectives

Use the <select> tag Use the <option> tag Create a selection menu Insert options into a selection menu Create a Submit button Create a Reset button


Introduction

Forms interact with Web page visitors in a variety of ways: Get feedback about the Web page Find out who is visiting the Web

page Sell products or services Act as a guestbook


HTML Forms

HTML forms are enhanced HTML documents that look like paper forms

When a user submits a form to the Web server, the browser Submits the value of each form element to

the Web server as a parameter Submits the form element values in a

parameter list, containing the name of every form element and its current value

A form can be created anywhere within an HTML document using the form tag


Creating Web Page Forms

A Web page form has three components Input controls FORM tag, which contains the

information necessary to process the form

Command buttons, which a user clicks to perform an action


Input Controls

An input control is a type of input mechanism on a form

A data input control allows a user to simply make a selection

A text input control allows the user to enter text into the control


Forms – Text Input Controls

Text Password Text Areas


Text Control

Allows for a single line of input Two attributes:

SIZE: determines the number of characters that display on the form

MAXLENGTH: specifies the maximum length of the input field


Text Code

Please give us your name:

<input name=“name1” type=“text” size =“50” maxlength=“52” />

<br />


Password Control

Same as a regular text field, but characters display as asterisks or bullets

Holds the password entered by a visitor

Protects a visitor’s password from being observed by others


Password Code

And your password:

<input name=“text1” type=“password” size =“8” maxlength=“8” />

<br />


Textarea Control

Allows multiple lines of input Two primary attributes

ROWS: specifies the number of rows in the textarea field

COLS: specifies the number of columns in the textarea field


Textarea Code

<p>Which golf accessories will you need in the next year ? <br /> <textarea name=“text1” rows=“6”

columns=“50” name=“accessories”> </textarea> <br />

</p>


Forms - Check Boxes

Define an element that can have one of two opposite values, such as true or false, or on or off

If the check box’s tag contains the checked attribute, the check box appears checked when the form first appears


Checkbox Control

Allows users to select more than once choice from a list of choices

Each choice in a checkbox list can be either on or off Checkboxes are deselected by default


Check Box Code

<p>Which course(s) do you like to play? <ul> <br />

<input type= “checkbox” name=“course" value=“kap“ />Kapalua <br />

< input type =checkbox name =“course " value =“sta“ />St. Andrews < br />

<input type =“checkbox” name =“course " value =“muir“ />Muirfield < br />

< input type =checkbox name =“course " value =“lap1“ />La Paloma </ul >

Note: checked=“checked” would be in the code if the check box was to be shown as selected upon “retrieval” of the Web page

</ ul> </p>


Check Box Syntax

type tells the browser to produce a checkbox field

name specifies the variable where the returned value will be stored

value stores what will be returned in the variable when the box is checked. VALUE can be anything you choose. If you don't specify a VALUE, the value of

checked fields defaults to "on". If a field is not checked, no value is

returned to the ACTION program (as though the field did not even exist on the form).


Forms - Radio Buttons

Radio Buttons allow the user to select a single value from a group of related values

Related radio buttons are defined as a radio button group, which allows the user to select only one button in the group at a time

Each radio button in a radio button group has the same name attribute value


Radio Buttons

Limits the Web page visitor to only one choice from a list of choices

Each choice is preceded by a radio button, typically an open circle Radio buttons are deselected by default


Radio Button Code

<p> Do you like to golf? <input name=“golf” type=“radio”

value=”yes” />Yes <input name=“golf” type=“radio”

value=”no” />No Note: checked=“checked” would be in

the code if the radio button was to be shown as selected upon “retrieval” of the Web page

</p>


Forms - Selection Lists

Define a list from which the user can select specified values

The Web developer can populate the list using static values or from a database


Creating a Form with Selection Menus

The select control creates a selection menu

This control only allows the visitor to choose pre-defined choices – user does not type anything in the form

There are four types of selection menus:


Selection Menu Types


Select Control – 1 Choice Selection(s) Visible - One

<tr><td>1) Favorite color:</td> … </tr> <tr><td>&nbsp</td> <td>&nbsp</td>

<td>&nbsp</td> <td>&nbsp</td></tr>

<tr><td><select name=“color” size=“1”> <option value=“red”>Red</option> <option value=“blue”>Blue</option> <option value=“yellow”>Yellow</option> <option value=“green”>Green</option>

</select></td></tr>


Select Control – 1 Choice Selection(s) Visible - Three



<tr><td><select name=“color” size=“3”> <option value=“red”>Red</option> <option value=“blue”>Blue</option> <option value=“yellow”>Yellow</option> <option value=“green”>Green</option>

</select></td></tr>


Select Control – Multiple Choices Selection(s) Visible - Three



<tr><td><select name=“color” size=“3” multiple=“multiple” /> <option value=“red”>Red</option> <option value=“blue”>Blue</option> <option value=“yellow”>Yellow</option> <option value=“green”>Green</option>

</select></td></tr>


Select Control – Multiple Choices Selection(s) Visible - Four



<tr><td><select name=“color” size=“4” multiple=“multiple” > <option value=“red”>Red</option> <option value=“blue”>Blue</option> <option value=“yellow”>Yellow</option> <option value=“green”>Green</option>

</select></td></tr>


Command Buttons

A command button is a form element that a user clicks to perform an action

A special kind of command button called a submit button can be created by setting the type attribute value to submit


Command Buttons

When a user clicks a submit button, the form submits the values of the form elements as parameters to a form processing program defined in the form definition tag

A reset button can also be created in a Web form

reset button: form clears all form element values or resets them to their initial values

To create a reset button, the input type attribute value is set to reset


Reset and Submit Controls

The reset button clears any input that was entered in the form

The submit button sends the information to the appropriate location for processing Web page forms must include a

Submit button


Submit and Reset Code

<p><input type=“submit value=“Submit the Form” />

<input type=“reset” value=“Reset the Form” /></p>


Notes on Hidden Fields

A hidden form element is an element that is not visible to the user

Developers use hidden form elements to submit data values to the Web server that are not currently visible on the form

Technically, hidden fields are not meant for data input


Hidden Fields

General syntax: <input type=“hidden” name=“Name

value=“value /> A use of hidden fields is to enable a

single general script to process data from different forms – script needs to know which form is sending the data, and a hidden fields can provide this info.

Drawback: Can be seen in the source code


Input Controls Summary


Input Control Attributes:

Each input control has the following one or two attributes name: Identifies the specific

information that is being sent All controls have a NAME

value: The data that is contained in the named input control All controls except “textarea" have a

value attribute


Form Attributes

name: is required if you want form controls

processed on the client side; otherwise, it is optional

action: Specify the destination Web page

where the form is processed method:

Specify how to send form to the Web server, either “post” or “get”


The Form Process

<form> attributes method: Specifies the manner in

which the form is sent to the server The GET method sends the name-value

pairs to the end of the URL indicated in the ACTION attribute

The POST method sends a separate data file to the URL This project will utilize the POST method


Identifying the Form Process

<form> attributes action: specifies the action that will

be taken when the form is submitted Information can be sent by e-mail to a

central e-mail address Information can be sent to the Web

server for processing Web sites can process information from

forms using Common Gateway Interface (CGI) scripting


Identifying the Form Process

<form method=“post” action=“mailto:[email protected]”/>

Determines how data is to be sent

Action to be taken when submitted


What You Should Know

Identify the Form Process Text Fields and Password Fields Textarea Fields Radio Buttons Selection Menus Create Submit and Reset Buttons

Documents

Robinson_CIS_285_2005 HTML FORMS CIS 285 Winter_2005 Instructor: Mary Robinson