Chapter 2 class power point
-
Upload
cmurphysvhs -
Category
Technology
-
view
687 -
download
1
description
Transcript of Chapter 2 class power point
![Page 1: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/1.jpg)
W O R K I N G W I T H F O R M S
CHAPTER 2
![Page 2: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/2.jpg)
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.
![Page 3: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/3.jpg)
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.
![Page 4: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/4.jpg)
CREATING A FORM
• Element and attribute• Empty form
<form id=“contact_form”>
</form>
![Page 5: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/5.jpg)
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
![Page 6: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/6.jpg)
NESTING A TABLE
<form id=“contact_form”>
<table> <tr> <td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
</tr></table>
</form>
![Page 7: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/7.jpg)
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.
![Page 8: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/8.jpg)
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
![Page 9: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/9.jpg)
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
![Page 10: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/10.jpg)
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”
![Page 11: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/11.jpg)
ELEMENT AND ATTRIBUTE
<label for="name">Name:</label>
<input type="text" name="Name" id="name" />
![Page 12: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/12.jpg)
FORM CONTROLS
TEXT AREAS
• Used to collect multiple-line text• Comments• Questions
• User usually types in information• <text area></textarea> element
![Page 13: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/13.jpg)
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
![Page 14: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/14.jpg)
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>
![Page 15: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/15.jpg)
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)
![Page 16: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/16.jpg)
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.
![Page 17: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/17.jpg)
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.
![Page 18: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/18.jpg)
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>
![Page 19: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/19.jpg)
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>
![Page 20: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/20.jpg)
FORM CONTROLS
CHECKBOXES
<input type="checkbox" name="Blues" id="blues"
value="More blues" />
<label for="blues">Blues</label>
![Page 21: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/21.jpg)
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
![Page 22: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/22.jpg)
FORM CONTROLS
RADIO BUTTONS
<input type="radio" name="Working Bank" id="yes" value="yes"
checked="checked" />
<label for="yes">Yes</label>
![Page 23: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/23.jpg)
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>
![Page 24: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/24.jpg)
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
![Page 25: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/25.jpg)
FORM CONTROLS
SUBMIT & RESET BUTTONS
• Submit: sends the information• Reset: deletes answers so user can
re-answer
![Page 26: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/26.jpg)
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
![Page 27: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/27.jpg)
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
![Page 28: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/28.jpg)
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…
![Page 29: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/29.jpg)
CSS INTRODUCTION
• Use of “style” related to CSS• Inline style for form
<td class="form-Left-col">
• Place in first row of each column
![Page 30: Chapter 2 class power point](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb10344a79591c2b8b458c/html5/thumbnails/30.jpg)
W O R K I N G W I T H F O R M S
CHAPTER 2
SEE YA LATER