Forms

Forms 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 sent using name/value pairs:  It can be written to a database  It can be submitted to a database  It can be ed to someone

Forms Structure and communication Element Layout and design Using forms Formatting forms

Structure & Communication Structure and communication Element Layout and design Using forms Formatting forms

Structure & 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 tag with action attribute develops the link between the front and the back ends

Structure & Communication

Elements The form elements are: 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 unselected 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

Elements

Layout & 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 Form design tips:  Keep the form short  Keep the form simple  Keep the form organised  Arrange form elements with tables and layers

Layout & Design

Using Forms There are 5 XHTML tags that can be used  - Allows you to create a layout Attributes: name, action, method, enctype, accept-charset, accept  - creates form elements Attributes : type, name, value, size, maxlength, checked, src  - creates a menu Attributes : name, size, multiple  - creates menu items Attributes : selected, value, label  - creates a text area Attributes: name, rows, cols, wrap

Using Forms Create a web page that uses text fields

Using Forms – Text Field The start of the code for this form is as follows: Enter your name: First name: MI: Last name: Address:

Using Forms - Checkbox Create a web page that uses check boxes Pizza Salad Burger Pizza Salad Burger … … …

Using Forms – Radio Button Create a web page that uses radio buttons Check your gender: Male Female Check your gender: Male Female

Using Forms - Button Create a web page that uses buttons Select your favourite season: Select your favourite season: …. ….

Using Forms - Menus Create a web page that uses menus Disk Drive More RAM Zip drive New monitor Disk Drive More RAM Zip drive New monitor …… ……

Formatting Forms A form may have multiple elements The form elements must be organised to make it easier for the web surfers to fill them When using tables, form elements are a part of the table cells -> quite complex Formatting forms by using layers is easier and offers more flexibility

Formatting Forms Format form with tables Please fill this survey form Please fill this survey form </caption> <tr> First Name: First Name: MI: MI: Last Name: Last Name: </tr> </table>

Formatting Forms Format form with layers – What would the code for this look like?

Reference Steven M. Schafer (2005), HTML, CSS, JavaScript, Perl, and PHP Programmer's Reference, Hungry Minds Inc,U.S. Dan Cederholm (2005), Bulletproof Web Design: Improving Flexibility and Protecting Against Worst-Case Scenarios with XHTML and CSS, New Riders. Ibrahim Zeid (2004), Mastering the Internet, XHTML, and Javascript