chp15_final - Mastering the Internet, XHTML, and JavaScript...

Info iconThis preview shows page 1. Sign up to view the full content.

View Full Document Right Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: Mastering the Internet, XHTML, and JavaScript Chapter 15 Forms Outline Goals and Objectives Chapter Headlines Introduction Structure and Communication Elements Layout and Design Using Forms Formatting Forms Summary Chapter 15 - Forms 2 Goals and Objectives Goals Understand forms, their structure, their communication cycle, their elements, and formatting their layouts via using tables and layers Objectives Data collection over the web Name/Value pairs Front and back ends Communication cycle Elements Using forms Formatting forms with tables Formatting forms with layers Chapter 15 - Forms 3 Chapter Headlines 15.1 Introduction Many online and e-commerce activities require forms 15.2 Structure and Communication Get to know form structure and processing 15.3 Elements What are all form elements 15.4 Layout and Design It is all in the layout and design 15.5 Using Forms Master the five tags to create and use forms 15.6 Formatting Forms Forms look less confusing when you format thems Chapter 15 - Forms 4 Introduction Forms are used for e-commerce, online purchases, surveys, registrations, etc. Website using forms usually collect information and must use secure internet connections Sending information via forms is easy and automatic The information is send using name/value pairs The information collected so can be processed in different ways: It can be written to a database It can be submitted to a database It can be e-mailed to someone Chapter 15 - Forms 5 Structure and Communication There are two distinct parts: front end and back end Front end is the visible part in the browser that the user fills Back end is the invisible part and is a computer program that processes the information Developing front end is much simpler than developing the back end Front end uses XHTML, while back end uses knowledge of programming languages The <form> tag with action attribute develops the link between the front and the back ends Chapter 15 - Forms 6 Structure and Communication Chapter 15 - Forms 7 The form elements are: Elements text fields allows you to input a line of text Parameters: size and maximum length radio buttons provide multiple choices with only one selection Parameters: selected or unselectetd check boxes provide multiple choices with multiple selections Parameters: checked or unchecked Menus Provides a menu of verbose choices Parameter: size text areas Provide multiple lines of text Parameters: width and height submit buttons collects and sends form input Parameters: button label reset buttons erases or clears the form input Parameters: button label Chapter 15 - Forms 8 Elements Chapter 15 - Forms 9 Layout and Design The common theme for each form is: Every form has some form elements All forms have a submit and reset button Every form has an action attribute and a method attribute Form Design tips: Keep the form short Keep the form simple Keep the form organized Arrange form elements with tables and layers Chapter 15 - Forms 10 Layout and Design Chapter 15 - Forms 11 Using Forms There are 4 XHTML tags that can be used <form> - Allows you to create a layout Attributes: name, action, method, enctype, accept-charset, accept <input> - creates form elements Attributes: type, name, value, size, maxlength, checked, src <select> - creates a menu Attributes: name, size, multiple <option> - creates menu items Attributes: selected, value, label <textarea> - creates a text area Attributes: name, rows, cols, wrap Chapter 15 - Forms 12 Using Forms Example 15.1: Using text fields Create a web page that uses text fields Chapter 15 - Forms 13 Using Forms Example 15.2 & 15.3: Using check boxes and radio buttons Create a web page that uses check boxes and radio buttons Chapter 15 - Forms 14 Example 15.6 & 15.7: Using buttons and menus Create a web page that illustrates the use of buttons and menus Using Forms Chapter 15 - Forms 15 Formatting Forms A form may have multiple elements The form elements must be organized to make it easier for the web surfers to fill them Tables are layers are usually used to do so When using tables, form elements are a part of the table cells Careful planning is required when using tables to format forms Formatting forms by using layers is easier and offers more flexibility Chapter 15 - Forms 16 Formatting Forms Example 15.9: Format forms with tables Create a table formatted form Chapter 15 - Forms 17 Example 15.10: Format forms with layers Create a form that is formatted using layers Formatting Forms Chapter 15 - Forms 18 Summary Forms allow online information submission and ecommerce A form has a front end and a back end XHTML provides many form elements and tags A form must be designed carefully to make it easier for the web surfer to fill it up Different tags are used to create different elements Forms can be formatted using layers and tables Chapter 15 - Forms 19 ...
View Full Document

Ask a homework question - tutors are online