Interacting With Users Chapter 7

2. Interacting With Users Chapter 7

3. Learn how to… • Create a Web form. • Create a PayPal button. • Create an image map. • Create a frameset. • FTP files to the Web and set file permissions.

4. Creating HTML Forms

5. Creating HTML Forms • A formprompts the user to fill in one or more blanks and/or select items from a menu of possible choices. • The <form> start and </form> stop tags mark the beginning and ending of an HTML form. • Between these tags go the controls that prompt the user for specific information, along with any onscreen instructions you want to provide.

6. Prompts • A promptis an onscreen instruction that asks the user to provide some information, either by typing a response into a text field or by choosing something from a selection of possible choices.

7. Beginning the Form

8. Form Tags • Every <form> start tag has two attributes, namely, a method and an action.

9. Text Input Controls • Use the <input> tagto create the form controls that receive input from users. • The <input> tag has several attributes: • The type attribute specifies the kind of control you want. • Thename attribute specifies the name of the control. • The size attribute specifies how many characters wide on the screen. • The maxlength attribute specifies the maximum number of characters users can type.

10. Text Input Controls

11. Radio Button Control • A radio buttondisplays a small round button that allows users to select one, but not more than one, item from a list of possible choices. checked causes this item to be initially checked by default.

12. Radio Button Control • This adds additional options for the Frequency radio button control.

13. Submit and Reset Buttons • The Submit button is the onscreen control that users click to submit the form. • Use <input type=“Submit” value=“xxxx”> • Xxxx is the text displayed (the default text is Submit). • Click a Reset buttonto return the controls to their default settings. • Use <input type=“reset”>

14. Submit and Reset Buttons

15. Completed Form

16. Processing the Response • We used the mailto option in the form tag to have the response e-mailed. • A more advanced method is to read the information, save the form’s data in a database, decide how to act on it, and respond appropriately to the user. • To make a form post its data to an Active Server Page (ASP) script, type: • <form method="post" action="http://toys.northpole.com/WishList.asp">

17. CGI Scripting • The art of server-side programming is known as common gateway interface(CGI)scripting. • The POST methodsends the form’s data to a CGI script.

18. GET Method • An HTTP GET method appends the form’s data to the URL as a query string. • Used especially at search engine sites.

19. Form Submission • For more info, see www.w3.org/TR/html4

20. Check Box • A check boxpresents the user with a small box that the user can click to turn an option on or off.

21. Check Box Example

22. Selection Menu • Create a selection menu with the <select> startand </select> stop tags. • Use the <option> tagto specify the menu options.

23. Text Areas • Text areas allow large amounts of text to be typed. • Use the <textarea> start and </textarea> stop tags.

24. Multiple Selection Menu • To allow users to make multiple selections from a selection menu, include the multiple attribute with a size that indicates the number of menu options to be displayed at a time. • Users need to use Ctrl+click to select items. <select name=" ControlName" size="10" multiple>

25. Password Fields • A password fieldis a text box that works like a text field except that when the user types the entry, the browser displays asterisks.

26. Summary

27. Summary

28. Making a PayPal Buy Now Button

29. PayPal • PayPal is a person-to-person payment system that individuals can use to sell products. • A PayPal button, when clicked, posts data to the PayPal server indicating what product the user wants to buy from you. • The PayPal system handles all the rest.

30. Hidden Fields • A hidden fieldcreates a variable name and a corresponding value that are not displayed onscreen but are posted along with the rest of the form’s data when the user clicks the button to submit the form.

31. Hidden Fields

32. Image Buttons • An image button displays an image instead of the Submit button.

33. PayPal Buy Now Button • When clicked, the PayPal Buy Now button posts HTML form data to the PayPal e-commerce server. • Information about the product being purchased. • The business that is making the sale. • There are many options that can be present, apart from those that are always required.

34. Creating a PayPal Button Begin the form and identify your business: Insert hidden fields to describe the product you are selling:

35. Creating a PayPal Button Give the customer an option to get an autographed copy of the book: Display the button and finish the form tag:

36. PayPal Variables To view the PayPal button manual, visit https://www.paypal.com/en_US/pdf/single_item.pdf

37. PayPal Button Factory • PayPal has a button factory that generates automatically the HTML to paste on to your page to sell items at your Web site. • Log on to your PayPal account at www.paypal.com and click the Merchant Tools tab. Under the Website Payments heading, follow the link to Buy Now Buttons to make the Button Factory appear.

38. Designing HTML Image Maps

39. Image Maps • An image mapis an invisible layer of triggers placed over an image onscreen. • The triggers can be rectangular, circular, or polygonal. • When the user clicks inside one of the invisible triggers, the Web browser triggers the object of the link.

40. Map and Area Tags • Use the <map> and </map> tags to mark the beginning and ending of the image map. • Use the <area> tag to create the triggers. • The shape attribute defines the shape. • The coord attribute specifies the x,y coordinates of the links relative to the top-left corner of the image at 0,0. • coord=x1,y1,x2,y2 where x1,y1 is the top-left corner of the area and x2,y2 is the bottom-right corner of the image.

41. Example: Web Page

42. Example: HTML Code

43. Too low 0,0,112,32 Middle C (correct) 112,0,116,22 112,22,120,32 Too high 116,0,238,22 120,22,238,32 Visualizing the Coordinates

44. Usemap Attribute • Use the usemap attribute to apply an image map to any image on the page. • There are many tools available to make image maps.

45. Non-Rectangular Areas • Circular areas: • Polygonal areas: • Draw the polygon starting with x1,y1 to x2,y2 to x3,y3 and so on until you get back to x1,y1 as the last value.

46. Creating HTML Frames

47. Frames • You can divide the browser’s display surface into multiple windows called frames. • Each frame can display a different part of the same page or a totally different page. • Frame targeting can make clicks in one frame determine what gets displayed in another.

48. Framesets • A framesetsplits the browser window into two or more subdocuments called frames. • Create a frameset with the <frameset>start and </frameset>stop tags. • The start tag has row and column attributes that determine the layout. • Specify the dimensions by pixels or percentages.

49. Framesets

50. Vertical Frames