W O R K I N G W I T H F O R M S

CHAPTER 2

ESSENTIAL OUTCOMES1. Analyze, categories and create various types

of forms by being able toa. Plan and creating a formb. Compare and contrast the various form

elementsc. Create the various forms elements & attributes:

1. text fields, 2. text areas, 3. control labels, 4. menus, 5. drop-down menus, 6. checkboxes, 7. radio button8. submit and reset buttons

f. Note similarities and differences in form controlsg. Define key words in the chapter.

FORM WORKFLOW

1. Plan the form: it is best to provide choices for users to select rather than allowing them to type freely

2. Type the HTML to create the form

3. Format the form with CSS

4. Make the form work.

CREATING A FORM

• Element and attribute• Empty form

<form id=“contact_form”>

</form>

NESTING A TABLE

• Create the form elements• Inside the form elements, a nested table is created1. The Page Layout

Table2. The empty form

elements & attributes

3. Nested Table

NESTING A TABLE

<form id=“contact_form”>

<table> <tr> <td>Row 1 Col 1</td>

<td>Row 1 Col 2</td>

</tr></table>

</form>

CONTROL LABELS

• Form elements need labels• <label></label>:

paired elementidentifies a text label for a form element

• for=“name of form”: must match id of element

<label for=“fname”>First Name:</label>

• Using <label> element enables users to click either form element (text field) or text label to place cursor in text field to begin typing.

FORM CONTROLS

• Form Control: controls which user can interact• Form controls can be form

elements• Ex. “input” element

<input></input> element creates

text fieldscheckboxes and button controls

FORM CONTROLS

TEXT FIELDS

• Used to collect SINGLE LINES OF TEXT name address email address

• <input> tag creates text field• Single element• “type” is the attribute

FORM CONTROLS

TEXT FIELDS ATTRIBUTES

• Five Field Attributes type=“text”: text field elementsize=“#”: width of text fieldmaxlength=“#”: maximum # of

charactersname=“First Name”: Actual text

field—normally matches the “id”id=“fname”: identifies text field-

normally matches “name”

ELEMENT AND ATTRIBUTE

<label for="name">Name:</label>

<input type="text" name="Name" id="name" />

FORM CONTROLS

TEXT AREAS

• Used to collect multiple-line text• Comments• Questions

• User usually types in information• <text area></textarea> element

FORM CONTROLS

TEXT AREAS ATTRIBUTES

• rows: height of text area

• cols: width of text area

• name: identifies the text area; normally matches the “id”

• id: identifies text area; matches name

FORM CONTROLS

TEXT AREAS ATTRIBUTES

• rows: height of text area• cols: width of text area• name: identifies the text area; normally

matches the “id”

<label for="comments">Comments:</label>

<textarea cols="32" rows="7" name="Comments"

id="comments"></textarea>

FORM CONTROLS

SELECT MENUS

• Drop-down menus: list from which to choose; helps reduce errors or bad data

• Two elements required:1. <select></select>: creates

the container for menu items2. <option></option: displays

the menu options

• Attribute: value=“” (default selection)

FORM CONTROLS

SELECT MENUS ATTRIBUTES

• value: what is sent to server and is helpful in presenting one thing to user, but sending another thing to server when user completes form• size: transforms the drop-down

menu into a scrolling list• multiple: allows multiple

selections to be made by control-clicking menu items.

FORM CONTROLS

VALUE ATTRIBUTE EX.

<select name=“fruit” id=“fruit”>

<option>Apples</option>

<option>Bananas</option>

</select>

<select name=“fruit” id=“fruit”>

<option>Apples</option>

<option>Bananas</option>

</select>

<select name=“fruit” id=“fruit”>

<option value=“app”>Apples</option>

<option value=“ban”>Bananas</option>

</select>

<select name=“fruit” id=“fruit”>

<option value=“app”>Apples</option>

<option value=“ban”>Bananas</option>

</select>

Helpful in e-commerce applications where you

want to present a friendly product name to

users, but if selected, have the form process a

product ID number instead.

FORM CONTROLS

SELECT MENUS

<label for="fav">What is your favorite fruit?</label>

<select name="Favorite Fruit" id="fav"> <option value=“org”>Oranges</option> <option value=“app”>Apples</option> <option value=“ban”>Bananas</option> <option value=“pea”>Pears</option></select>

FORM CONTROLS

CHECKBOXES

• Checkboxes: way for user to make multiple selections

• Use <input> tag• Single tag• Attributes:

type: creates a checkbox value: processed when form is submitted checked: displays check in checkbox name: identifies the checkbox id: matches the name; used with <label>

FORM CONTROLS

CHECKBOXES

<input type="checkbox" name="Blues" id="blues"

value="More blues" />

<label for="blues">Blues</label>

FORM CONTROLS

RADIO BUTTONS

• Radio Buttons: similar to checkboxes, but used when users are to make a single selection

• Mutually exclusive: only one selection may be made

• Good Example: Gender

• <input /> single element

FORM CONTROLS

RADIO BUTTONS

<input type="radio" name="Working Bank" id="yes" value="yes"

checked="checked" />

<label for="yes">Yes</label>

FORM CONTROLS

RADIO BUTTONS

• Attributes for submitting buttons: type: creates a radio button value: processed when form is submitted checked: displays check in radio button name: identifies group of radio buttons id: matches the name; used with <label>

FORM CONTROLS

RADIO BUTTONS

• Pre-checked: Is you want a button

pre-checked, use the pre-check attribute

Why? You may have a very common answer, so instead of having users have to check it, it is already checked for them

FORM CONTROLS

SUBMIT & RESET BUTTONS

• Submit: sends the information• Reset: deletes answers so user can

re-answer

FORM CONTROLS

BUTTONS

• Attributes for submitting buttons: type: determine if button is submit or

reset value: displayed as a button name: identifies the button; matches the

id id: rarely need with buttons but good to

have

SUBMITTING FORM DATA

• Need a “form handler” or “form processor”

• Form handler: can be HTML file with a little bit of JavaScript or written in complete different programming language such as C++ or PERL

• Free form handlers on web but read carefully so it reads your form correctly

SUBMITTING FORM DATA

• Methods:1. Get: sends your data

as a URL string; everything typed shows up in web browser’s address bar;

2. Post: more secure; can’t bookmark a results page when data is submitted

3. More on this later…

CSS INTRODUCTION

• Use of “style” related to CSS• Inline style for form

<td class="form-Left-col">

• Place in first row of each column

W O R K I N G W I T H F O R M S

CHAPTER 2

SEE YA LATER