Unit C Computer Software by wpr1947

VIEWS: 10 PAGES: 34

									   HTML, Third Edition
Illustrated Introductory
          Unit G
Using Forms to Control Input




        HTML, Third Edition--Illustrated   1
                Introductory
    Unit Objectives

Plan a form
Create a text field
Add radio buttons
Add check boxes



        HTML, Third Edition--Illustrated Introductory   2
   Unit Objectives

Create a pull-down menu
Add a comment box
Add a push button
Connect a form’s back end



       HTML, Third Edition--Illustrated Introductory   3
        Planning a Form

The types of form fields are
 Single-line text box
 Check boxes and radio buttons
 Pull-down menus and scroll boxes
 Multiline text areas
 Push buttons




        HTML, Third Edition--Illustrated Introductory   4
Planning a Form




HTML, Third Edition--Illustrated Introductory   5
Planning a Form




HTML, Third Edition--Illustrated Introductory   6
            Clues to Use

Dealing with privacy issues
 Concern for security of personal
  information
 Clearly communicate your
  organization’s policy regarding use of
  information
 Avoid losing potential customers by
  ensuring that additional information is
  optional, not required

         HTML, Third Edition--Illustrated Introductory   7
        Creating a Text Field

Open the file htm_G-1.txt, save it using the All Files
type as survey.htm in your paradise folder in the
place where you save your site files, then inspect the
code
Locate and select the comment <!-- Begin Form Here -
->, press [Delete], then type <form name="survey"
action="" method="post">
Scroll to the bottom of the document, select the
comment <!-- End Form Here -->, press [Delete], then
type </form>
In the page code, locate and select the comment <!--
Label 1 -->, press [Delete], type First name:, press
[Spacebar], move to the next line, drag to select the
comment <!-- Input First name text field -->, press
[Delete], then type <input type="text"
name="fname" size="20" />
             HTML, Third Edition--Illustrated Introductory   8
        Creating a Text Field

Locate and select the Label 2 comment tag, press
[Delete], type Last name:, move to the next line,
select <!-- Last name text field -->, press [Delete],
type <input type="text" name="lname" size="20"
/>, then save your work
Move to the bottom of the page, locate and select the
comment tag <!-- input, email -->, press [Delete], then
type <input type="text" name="email" size="100"
/>
Save your work, start your Web browser, then open
the file survey.htm in your browser
Click in the First name text box, type your first name,
press [Tab], type your last name in the Last name
text box, press [Tab], then type your e-mail address


             HTML, Third Edition--Illustrated Introductory   9
Creating a Text Field




  HTML, Third Edition--Illustrated Introductory   10
Creating a Text Field




  HTML, Third Edition--Illustrated Introductory   11
      Adding Radio Buttons

Click the text editor program button on your
taskbar, then in your text editor, locate the
comment that begins <!-- Use the comments
below
Click just after the comment <!-- Radio button -
name, rooms; value, 3 -->, before the
nonbreaking space &nbsp, press [Enter], press
[Tab], then type <input type="radio"
name="room" value="3" />
Repeat the previous step to create radio buttons
for all cells in the Rooms row, then create radio
buttons for each cell in the Activities,
Restaurants, and Spa services rows, using the
values shown in the comments

            HTML, Third Edition--Illustrated Introductory   12
       Adding Radio Buttons

Save your work, click the browser program button
and reload the survey.htm file
  Test your ratings radio buttons by clicking several
    buttons in each group.
Return to your code, click after the comment <!--
Radio Button - name, newsletter; value, Yes -->, press
[Enter], press [Spacebar] four times, type <input
type="radio“ name="newsletter" value="Yes"
checked="checked" />, then press [Spacebar]
Click after the comment <!-- Radio Button - name,
newsletter; value, No -->, press [Enter], press
[Spacebar] four times, type <input type="radio"
name="newsletter“ value="No" />, press
[Spacebar], then save your page and view it in the
browser

             HTML, Third Edition--Illustrated Introductory   13
Adding Radio Buttons




   HTML, Third Edition--Illustrated Introductory   14
             Clues to Use

Using the checked attribute
 By default, all the fields in a set of radio
  buttons appear empty
 You can include the checked attribute
  in the <input /> tag for one of the radio
  buttons in a set, causing it to appear as
  selected
 Do not use the checked attribute for
  radio button groups that require users
  to add personal information

          HTML, Third Edition--Illustrated Introductory   15
         Adding Check Boxes
In your text editor, click after the comment tag that reads <!-
- Checkbox name, outdoorActivities-->, press [Enter], press
[Tab], type <input type="checkbox“
name="outdoorActivities" value="Yes" />, press
[Spacebar], press [Enter], then press [Tab]
Click after <!-- Checkbox name, competitiveActivities-->,
press [Enter], press [Tab], type <input type="checkbox"
name="competitiveActivities" value="Yes" />, press
[Spacebar], press [Enter], then press [Tab]
Click after the comments for tours, lodge_activities, events
and NA, then repeat the previous step to create checkboxes
for each of the following labels: Tours and Excursions,
Lodge activities, Local/Area Events, and NA, setting each
value as Yes
Save your page, then click the browser program button on
the taskbar and reload the survey.htm page

               HTML, Third Edition--Illustrated Introductory   16
Adding Check Boxes




  HTML, Third Edition--Illustrated Introductory   17
     Creating a Pull-Down Menu

  Locate and select the comment tag <!-- Dropdown season --
  >, press [Delete], press [Enter], press [Tab], type <select
  name="season">, press [Enter], press [Tab], then type
  </select> <br /> <br />
  Click just before </select>, then type the following code,
  pressing [Enter] and [Tab] after each line:
<option value="Spring">Spring</option>
<option value="Summer">Summer</option>
<option value="Fall">Fall</option>
<option value="Winter">Winter</option>
  Locate and drag to select the comment tag that reads <!--
  dropdown num_guests -->, press [Enter], press [Tab], type
  <select name="num_guests">, then press [Enter]



                HTML, Third Edition--Illustrated Introductory   18
     Creating a Pull-Down Menu

  Press [Tab], then type </select> <br /> <br />
  Click after <select name="num_guests">, press
  [Enter], press [Tab] twice, then type the following
  code, pressing [Enter] and [Tab] twice after the
  first and second lines
<option value="1"> &nbsp; 1 &nbsp; </option>
<option value="2 - 3">2 - 3 </option>
<option value="4 or more">4 or more</option>
  Save your work, then reload the survey.htm
  page in your browser



              HTML, Third Edition--Illustrated Introductory   19
Creating a Pull-Down Menu




     HTML, Third Edition--Illustrated Introductory   20
Pull-Down Menu Tags and Attributes




         HTML, Third Edition--Illustrated Introductory   21
     Adding a Comment Box

Locate the comment tag that reads <!-- Insert
textarea here -->, drag to select the comment tag
and the nonbreaking space, &nbsp;, that follows
it, press [Delete], then press [Enter]
Type <textarea name="comments" rows="4"
cols="40">, then press [Enter]
Type </textarea>, then save your page
Locate the code for the opening table data tag
and Additional Comments label that reads: <td
colspan="2">Additional Comments: </td>




            HTML, Third Edition--Illustrated Introductory   22
    Adding a Comment Box

Click just after colspan="2" inside the
opening table data tag, press [Spacebar],
then type align="right"
Locate the “Page modified by” paragraph,
replace Your Name with your own name,
update the date text to show the current
date, then save the page
Click the browser program button on the
taskbar, then reload the survey.htm page


          HTML, Third Edition--Illustrated Introductory   23
Adding a Comment Box




   HTML, Third Edition--Illustrated Introductory   24
        Adding a Push Button
In your text editor, select the comment <!-- Insert Submit
button here --> as well as the nonbreaking space, &nbsp;,
that follows it near the bottom of the document, then press
[Delete]
Type <input type="submit" value="Complete Survey"
name="submit" />
Select the comment that reads: <!-- Insert Reset button here
--> as well as the nonbreaking space that follows it, then
press [Delete]
Type <input type="reset" value="Start Over"
name="reset" />, press [Spacebar], then save your file
Click the browser program button on the taskbar, reload
the page, then click the Complete Survey button
Close your browser and your text editor, then transfer your
updated files to your remote directory

              HTML, Third Edition--Illustrated Introductory   25
Adding a Push Button




   HTML, Third Edition--Illustrated Introductory   26
            Clues to Use

Using a graphic as a push button
 The value attribute allows you to
  customize the text on a push button
 You can specify a graphic to use as a
  button
 Set the <input /> tag type attribute to
  “image”, then specify the path and the
  name of the graphic file with the src
  attribute

         HTML, Third Edition--Illustrated Introductory   27
            Clues to Use

Using input buttons
 Submit and Reset input buttons have
  built-in event actions
 The Submit button sends form data to
  the processing file
 The Reset button automatically clears
  the form
 You also can have buttons perform
  other actions
         HTML, Third Edition--Illustrated Introductory   28
Connecting a Form’s Back End

The form-submission process
includes
 Browser packaging
 Form handler
  • CGI (Common Gateway Interface)
 Form processing and confirmation
  • Shopping cart service



         HTML, Third Edition--Illustrated Introductory   29
Connecting a Form’s Back End




       HTML, Third Edition--Illustrated Introductory   30
Connecting a Form’s Back End




       HTML, Third Edition--Illustrated Introductory   31
<form> Tag Attributes for Submitting
           Information




         HTML, Third Edition--Illustrated Introductory   32
     Unit Summary

Plan a form
Create a text field
Add radio buttons
Add check boxes



        HTML, Third Edition--Illustrated Introductory   33
     Unit Summary

Create a pull-down menu
Add a comment box
Add a push button
Connect a form’s back end



       HTML, Third Edition--Illustrated Introductory   34

								
To top