forms lesson n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
FORMs Lesson PowerPoint Presentation
Download Presentation
FORMs Lesson

Loading in 2 Seconds...

play fullscreen
1 / 24

FORMs Lesson - PowerPoint PPT Presentation


  • 88 Views
  • Uploaded on

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 page editor. If using a web page editor, edit the HTML Source. Objectives.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'FORMs Lesson' - starr


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
prerequisites
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.
objectives
Objectives
  • After completing all lesson-related activities, the learner will be able to…
    • Create a form and include it in a web page.
forms
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.
form tags
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 ffisher@csudh.edu):

<FORM method="POST" action=“mailto:ffisher@csudh.edu”>

form tags1
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?)
form tags samples
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

form tags samples1
Form Tags - Samples
  • Text field/box:

<INPUT TYPE=“TEXT” NAME=“FIRSTNAME”>

  • Text area:

<TEXTAREA NAME=“MSG”

ROWS=5>Enter</TEXTAREA>

Enter

form tags samples2
Form Tags - Samples
  • Pull-down menu:

<SELECT NAME=“AGE”>

<OPTION SELECTED>Old

<OPTION>Young

<OPTION>Never mind!

</SELECT>

Old

Old

Young

Never mind!

form tags samples3
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

form tags samples4
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

form tags2
Form Tags
  • See http://www.csudh.edu/fisher/tbe540/HHO6.htm for specific examples.
  • Try the hands-on exercise called SAMPLEFORMS.HTM
self check
Self Check
  • True or false: FORMs in web pages are used only to fill out educational forms online.
    • True
    • False
self check1
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
self check2
Self Check
  • This type of form element is:
    • Radio Button
    • Checkbox
    • Button
    • Text box
    • Text area
self check3
Self Check
  • This type of form element is:
    • Radio Button
    • Checkbox
    • Button
    • Text box
    • Text area
self check4
Self Check
  • This type of form element is:
    • Radio Button
    • Checkbox
    • Button
    • Text box
    • Text area
self check5
Self Check
  • This type of form element is:
    • Radio Button
    • Checkbox
    • Button
    • Text box
    • Text area
self check6
Self Check
  • The FORM tags for a pull-down menu are:
    • MENU, OPTION
    • SELECT, OPTION
    • MENU, SELECT
    • MENU, SUBMIT
self check7
Self Check
  • The FORM tags for a pull-down menu are:
    • MENU, OPTION
    • SELECT, OPTION
    • MENU, SELECT
    • MENU, SUBMIT
self check8
Self Check
  • FORMs are usually placed in the ____ section.
    • HEAD
    • BODY
self check9
Self Check
  • FORMs are usually placed in the ____ section.
    • HEAD
    • BODY
self check10
Self Check
  • Which type of button clears all fields?
    • SUBMIT
    • RESET
self check11
Self Check
  • Which type of button clears all fields?
    • SUBMIT
    • RESET