DAY 2. Creating Forms

Size: px

Start display at page:

Download "DAY 2. Creating Forms"

Rolf Thomas
5 years ago
Views:

1 DAY 2 Creating Forms

2 LESSON LEARNING TARGETS I can identify and apply the different HTML tags to create a Web page form. I can describe the ways data is sent in a form in namevalue pairs. I can create a Web page form using appropriate HTML tags and attributes.

3 HTML Tags Used to Create Forms

4 HTML TAGS USED TO CREATE FORMS 4 Project 7: Creating a Form on a Web Page

5 HTML TAGS USED TO CREATE FORMS Form Tags Syntax: <form> </form> Creates a form that allows user input Required when creating forms Input Controls Created either using HTML tags OR attributes of HTML tags Required for input controls

6 HTML TAGS USED TO CREATE FORMS Input Controls with their own tags Textarea Boxes Selection Controls Input Controls as type Attributes of Input Tag Text Box Password Text Box Checkbox Radio Button Submit Button Reset Button

7 Project 7: Creating a Form on a Web Page 7

8 Project 7: Creating a Form on a Web Page 8

9 Creating a Form on a Web Page

10 CREATING A FORM ON A WEB PAGE Modifying the Bill Thomas Illustrations Order Form Web Page We will be modifying a file from the Project 5 Folder: orderform.htm

11 Project 7: Creating a Form on a Web Page 11

12 Project 7: Creating a Form on a Web Page Three Form Groupings Text Boxes Check Boxes Selection Control Radio Buttons Text Area Submit Button Reset Button

13 13 Location to Insert Form Method Project 7: Creating a Form on a Web Page

14 CREATING A FORM AND IDENTIFYING THE FORM PROCESS Form Tags Syntax: <form> </form> Used to designate an area of a Web page as a form Within the form tags, any number of form input controls can be added, based on the information desired from users

15 CREATING A FORM AND IDENTIFYING THE FORM PROCESS Form Attributes Action Attribute Syntax: action= Specifies the action to be taken when the form is submitted Information submitted can be: 1. sent to an address (functional; not the best way; we ll use in this project) 2. used to update a database

16 CREATING A FORM AND IDENTIFYING THE FORM PROCESS Form Attributes Action Attribute Processing info to a database involves programming beyond this course CGI (Common Gateway Interface) Script: a program written in a programming language (such as Perl) that sends the information to the server for processing

17 CREATING A FORM AND IDENTIFYING THE FORM PROCESS Form Attributes Method Attribute Syntax: method= Specifies the manner in which the data entered in the form is sent to the server to be processed Two primary methods: get method post method

18 CREATING A FORM AND IDENTIFYING THE FORM PROCESS Form Attributes Method Attribute get method sends the name-value pairs of data to the URL indicated in the action attribute adds the information to the end of the URL s file problem: if server limits size of URL, you can truncate relevant information

19 CREATING A FORM AND IDENTIFYING THE FORM PROCESS Form Attributes Method Attribute post method sends a separate data file with the namevalue pairs of data to the URL or address indicated in the action attribute preferred by most programmers, as it is more flexible

20 Project 7: Creating a Form on a Web Page Three Form Groupings Text Boxes Check Boxes Selection Control Radio Buttons Text Area Submit Button Reset Button

21 CREATING A FORM ON A WEB PAGE Modifying the Bill Thomas Illustrations Order Form Web Page Open from the Project 5 Folder: orderform.htm

22 22 Location to Insert Form Method Project 7: Creating a Form on a Web Page

23 CREATING A FORM AND IDENTIFYING THE FORM PROCESS Insert the following text to the order form code: <body> <center><font face="bazooka"...> <form method="post" action="mailto:billthomas@isp.com"> <p><b><font color="#000099">if you would like to order...

24 CREATING A FORM AND IDENTIFYING THE FORM PROCESS Insert the following text at the end of the order form code: <p>thank you for your order. <br /><b><font color="navy">bill Thomas</font></b></p> </form> </body> </html>

26 CHANGING THE TEXT MESSAGE Delete the lines between the following lines of code: <form method="post" **DELETE LINES BETWEEN THESE TAGS!! <p>thank you for your order. <br /><b><font color="navy">bill Thomas</font></b></p> </form>

28 CHANGING THE TEXT MESSAGE Insert these lines at the spot you deleted: <form method="post" <p><b>if you would like to order any pictures from the Bill Thomas Illustrations Web site, please make your selection on the order form below and click the Submit button to process the order.</b></p>

29 ADDING TEXT BOXES Creating seven text boxes for name, address, and information:

30 ADDING TEXT BOXES Sample: <input name= address type= text size= 25 maxlength= 25 > input tag: creates an input control type Attribute: specifies input control is a text box name Attribute: used to distinguish the value associated with that field from other fields (creates a place for answer value to be stored)

31 ADDING TEXT BOXES Sample (continued): <input name= address type= text size= 25 maxlength= 25 > size Attribute: indicates that the number of characters to appear in text box is 25 maxlength Attribute: limits the number of characters that can be entered in the text box to 25 characters Note: size can be less than maxlength

32 ADDING TEXT BOXES Insert the following code immediately after the paragraph just entered: (Note: the text before the tag shows up as a label before the text box) <p> Last Name: <input name="lastname" type="text" size="25"> First Name: <input name="firstname" type="text" size="25"> <br /> **Note: <br/> tag inserted to move boxes to next line**

33 ADDING TEXT BOXES Street Address: <input name="address" type="text" size="25"> <br /> City: <input name="city" type="text" size="25"> State: <input name="state" type="text" size="25">

34 ADDING TEXT BOXES ZIP: <input name="zip" type="text" size="12" maxlength="10"> <br /> Address: <input name=" " type="text" size="25"> </p> **NOTE: Each text box is created using an <input> tag and always has a type and name attribute**

36 ADDING CHECK BOXES Creating the Check Boxes: Recall: Check Boxes: appropriate when user can only select one or more choices from a set of choices (the choices are not mutually exclusive)

37 ADDING CHECK BOXES Sample: <input name= pictype type= checkbox value= cross >Cross Hatch input tag: creates an input control type Attribute: specifies input control is a check box name Attribute: used to distinguish the value associated with that field from other fields (creates a place for answer value to be stored)

38 ADDING CHECK BOXES Sample: <input name= pictype type= checkbox value= cross >Cross Hatch value Attribute: indicates the value to be submitted in the file if this check box is selected the text after the tag is the text displayed, in this case after the check box

39 ADDING CHECK BOXES Insert the following code immediately after the code for the name / address text boxes: <p> Select the types of picture(s) that you are interested in purchasing: <br /> <input name="pictype type="checkbox" value="cross">cross Hatch

40 ADDING CHECK BOXES <input name="pictype" type="checkbox" value="fullcolor">full Color <input name="pictype" type="checkbox" value="ink">ink Wash </p> **NOTE: Each text box is created using an <input> tag and always has a type and name attribute**

41 NOTICE These checkboxes are all connected by the same NAME All named pictype If had more than one set of checkboxes, each group would need its own unique name These checkboxes are then distinguished by their VALUE All have a unique value this is how we know what was selected Each followed by text so there is text after the box to tell the user what the box is for

43 Creating the selection menu: ADDING A SELECTION MENU

44 ADDING A SELECTION MENU Sample: Basic Selection Menu <select name= menuname > <option>first Option</option> <option>second Option</option> <option>third Option</option> </select> select tags: creates a selection menu as an input control (Note: doesn t use <input> tag!) name Attribute: used to creates a place for answer value to be stored

45 ADDING A SELECTION MENU Sample: Basic Selection Menu <select name= menuname > <option>first Option</option> <option>second Option</option> <option>third Option</option> </select> option tags: contains the choices that will appear in the selection menu since size is not indicated, only one item is displayed, along with a list arrow

46 ADDING A SELECTION MENU Insert the following code immediately after the code for the check boxes: <p>credit card type: <select name="payment"> <option>visa</option> <option>mastercard</option> <option>american Express</option> </select> </p>

48 More Advanced Selection Menus ADDING A SELECTION MENU Using various attributes, you can set the selection menu to display: multiple choices or only one drop-down list or scroll-through list preselected default choice Use variations to fit the purposes needed for the form

49 Basic Selection Menu ADDING A SELECTION MENU

50 Size Attribute of three ADDING A SELECTION MENU

51 ADDING A SELECTION MENU Using Multiple Attribute (allows more than one selection to be made)

52 ADDING A SELECTION MENU Setting a choice as selected by default

53 NOTICE Multiple and Selected attributes Are only words (like resize) when used inside of a tag

54 ADDING ADDITIONAL TEXT BOXES Additional Text Boxes on our Form After Credit Card Selection Menu, we need two additional Text Boxes: Credit Card Number: maximum 20 characters Credit Card Expiration Date: maximum 4 characters (MMYY format)

55 ADDING ADDITIONAL TEXT BOXES Insert the following code immediately after the code for the selection menu: <p> Credit card number: <input name="cardnum" type="text" size="20" maxlength="20">

56 ADDING ADDITIONAL TEXT BOXES Expiration date: <input name="cardexp" type="text" size="4" maxlength="4"> </p>

58 Worksheet 6B HOMEWORK

HTML Tables and Forms. Outline. Review. Review. Example Demo/ Walkthrough. CS 418/518 Web Programming Spring Tables to Display Data"

HTML Tables and Forms. Outline. Review. Review. Example Demo/ Walkthrough. CS 418/518 Web Programming Spring Tables to Display Data CS 418/518 Web Programming Spring 2014 HTML Tables and Forms Dr. Michele Weigle http://www.cs.odu.edu/~mweigle/cs418-s14/ Outline! Assigned Reading! Chapter 4 "Using Tables to Display Data"! Chapter 5