FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to…...
-
Upload
brandon-george -
Category
Documents
-
view
217 -
download
0
Transcript of FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to…...
![Page 1: FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649cdf5503460f949a8814/html5/thumbnails/1.jpg)
FORMs Lesson
TBE 540
![Page 2: FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649cdf5503460f949a8814/html5/thumbnails/2.jpg)
Prerequisites
Before beginning this lesson, the learner must be able to…– Create basic web pages using a text editor
and/or a web page editor.– If using a web page editor, edit the HTML
Source.
![Page 3: FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649cdf5503460f949a8814/html5/thumbnails/3.jpg)
Objectives
After completing all lesson-related activities, the learner will be able to…– Create a form and include it in a web page.
![Page 4: FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649cdf5503460f949a8814/html5/thumbnails/4.jpg)
Forms
Forms are used to add interactive elements to a web page.
Forms allow you to put in buttons, pull-down menus and input fields for the user.
Using JavaScript, you can customize actions for buttons, menus and input fields.
![Page 5: FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649cdf5503460f949a8814/html5/thumbnails/5.jpg)
Form Tags
All forms begin with <FORM> and end with </FORM>.
The <FORM> tag may contain a method (POST or GET) and an action.
Here is a sample (information will be placed in a message (POST) sent to [email protected]):
<FORM method="POST" action=“mailto:[email protected]”>
![Page 6: FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649cdf5503460f949a8814/html5/thumbnails/6.jpg)
Form Tags
How does the information get into the message? Through buttons, menus and fields.
Each type of input has a special tag. These tags specify the type of input (text
field, button, text area, menu), the name of the input that comes in (e.g., “Firstname”), and sometimes the value (which button was pressed?)
![Page 7: FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649cdf5503460f949a8814/html5/thumbnails/7.jpg)
Form Tags - Samples
Radio button:
<INPUT TYPE=“RADIO” NAME=“GENDER” VALUE=“FEMALE”>
Checkbox:
<INPUT TYPE=“CHECKBOX” NAME=“STUDENT” VALUE=“YES”>
Button:
<INPUT TYPE=“BUTTON” VALUE=“CLICK ME” ONCLICK=“begin_game()”>
CLICK ME
![Page 8: FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649cdf5503460f949a8814/html5/thumbnails/8.jpg)
Form Tags - Samples
Text field/box: <INPUT TYPE=“TEXT”
NAME=“FIRSTNAME”> Text area:
<TEXTAREA NAME=“MSG”
ROWS=5>Enter</TEXTAREA>
Enter
![Page 9: FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649cdf5503460f949a8814/html5/thumbnails/9.jpg)
Form Tags - Samples
Pull-down menu:<SELECT NAME=“AGE”>
<OPTION SELECTED>Old
<OPTION>Young
<OPTION>Never mind!
</SELECT>
Old
Old
Young
Never mind!
![Page 10: FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649cdf5503460f949a8814/html5/thumbnails/10.jpg)
Form Tags - Samples
If the information is to be sent (i.e., the “action” will be taken), there will be a SUBMIT button.
Sample tag:<INPUT TYPE=”SUBMIT" VALUE="Submit"
NAME="Submit Button"> When clicked, the action described in
the FORM tag will be initiated.
Submit
![Page 11: FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649cdf5503460f949a8814/html5/thumbnails/11.jpg)
Form Tags - Samples
You may also want to have a RESET button
Sample tag:<INPUT TYPE=”RESET" VALUE=”Reset"
NAME=”Reset Button"> When clicked, all the fields are cleared.
Reset
![Page 12: FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649cdf5503460f949a8814/html5/thumbnails/12.jpg)
Form Tags
See http://www.csudh.edu/fisher/tbe540/HHO6.htm for specific examples.
Try the hands-on exercise called SAMPLEFORMS.HTM
![Page 13: FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649cdf5503460f949a8814/html5/thumbnails/13.jpg)
Self Check
True or false: FORMs in web pages are used only to fill out educational forms online.– True– False
![Page 14: FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649cdf5503460f949a8814/html5/thumbnails/14.jpg)
Self Check
True or false: FORMs in web pages are used only to fill out educational forms online.– True– False That’s one use, but there are many others
![Page 15: FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649cdf5503460f949a8814/html5/thumbnails/15.jpg)
Self Check
This type of form element is: – Radio Button– Checkbox– Button– Text box– Text area
![Page 16: FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649cdf5503460f949a8814/html5/thumbnails/16.jpg)
Self Check
This type of form element is: – Radio Button– Checkbox– Button– Text box– Text area
![Page 17: FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649cdf5503460f949a8814/html5/thumbnails/17.jpg)
Self Check
This type of form element is: – Radio Button– Checkbox– Button– Text box– Text area
![Page 18: FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649cdf5503460f949a8814/html5/thumbnails/18.jpg)
Self Check
This type of form element is: – Radio Button– Checkbox– Button– Text box– Text area
![Page 19: FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649cdf5503460f949a8814/html5/thumbnails/19.jpg)
Self Check
The FORM tags for a pull-down menu are:– MENU, OPTION– SELECT, OPTION– MENU, SELECT– MENU, SUBMIT
![Page 20: FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649cdf5503460f949a8814/html5/thumbnails/20.jpg)
Self Check
The FORM tags for a pull-down menu are:– MENU, OPTION– SELECT, OPTION– MENU, SELECT– MENU, SUBMIT
![Page 21: FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649cdf5503460f949a8814/html5/thumbnails/21.jpg)
Self Check
FORMs are usually placed in the ____ section.– HEAD– BODY
![Page 22: FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649cdf5503460f949a8814/html5/thumbnails/22.jpg)
Self Check
FORMs are usually placed in the ____ section.– HEAD– BODY
![Page 23: FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649cdf5503460f949a8814/html5/thumbnails/23.jpg)
Self Check
Which type of button clears all fields?– SUBMIT– RESET
![Page 24: FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649cdf5503460f949a8814/html5/thumbnails/24.jpg)
Self Check
Which type of button clears all fields?– SUBMIT– RESET