FormsForms

FormsForms

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 e-mailed to someone

FormsForms

Structure and communication Element Layout and design Using forms Formatting forms

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

Structure & Structure & CommunicationCommunication 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

Structure & Structure & CommunicationCommunication

ElementsElementsThe 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

ElementsElements

Layout & DesignLayout & 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 & DesignLayout & Design

Using FormsUsing Forms There are 5 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

Using FormsUsing Forms

Create a web page that uses text fields

Using Forms – Text FieldUsing Forms – Text Field

The start of the code for this form is as follows:

<form name=“myForm" action="mailto:yupeng.liu@comp.dit.ie" method="post">Enter your name: <br/>First name: <input type="text" name="First Name" size="40" maxlength="256" value=“yupeng" />MI: <input type="text" name="Middle Initial" size="5" maxlength="6" value="F" />Last name: <input type="text" name="Second Name" size="40" maxlength="256" value=“liu" /> <br/>Address: <input type="text" name="Address" size="20" maxlength="30"/></form>

Using Forms - CheckboxUsing Forms - Checkbox

Create a web page that uses check boxes

<form<form name=“MyForm2” action= name=“MyForm2” action=""mailto:yu@comp.dit.iemailto:yu@comp.dit.ie"" method=method="post""post">>

<input<input type= type="checkbox""checkbox" name=name=“FavouriteFood"“FavouriteFood" value= value="Pizza""Pizza" checked checked/>/> Pizza Pizza

<input<input type= type="checkbox""checkbox" name= name=" " FavouriteFoodFavouriteFood"" value= value="Salad""Salad" />/> Salad Salad

<input<input type= type="checkbox""checkbox" name= name=" " FavouriteFoodFavouriteFood "" value= value="Burger""Burger" />/> Burger Burger

<br/><br/>…………

<input<input type= type="submit""submit" value= value="Send It""Send It" />/> <input<input type= type=“reset"“reset" value= value="Reset It""Reset It" />/> </form></form>

Using Forms – Radio Using Forms – Radio ButtonButton Create a web page that uses radio buttons

<form<form name= name="MyForm""MyForm" action=action=""mailto:yu@comp.dit.iemailto:yu@comp.dit.ie"" method= method="post""post">>

<div><div>Check your gender:Check your gender:</div></div><input<input type= type="radio""radio" name= name="gender""gender"

value=value="Male""Male" />/> Male Male<br<br />/><input<input type= type="radio""radio" name= name="gender""gender"

value=value="bb""bb" />/> Female Female<br<br />/><input<input type= type="submit""submit" value= value="Send It""Send It" />/>

<input<input type= type=“reset"“reset" value= value="Reset It""Reset It" />/></form></form>

Using Forms - ButtonUsing Forms - Button

Create a web page that uses buttons

<form<form action= action=""mailto:yu@comp.dit.iemailto:yu@comp.dit.ie"" method=method="post""post">><div><div>Select your favourite season:Select your favourite season:</div></div><input<input type= type="button""button" value= value="Fall""Fall" />/> <input<input type= type="button""button" value= value="Winter""Winter" />/> <input<input type= type="button""button" value= value="Spring""Spring" />/> <input<input type= type="button""button" value= value="Summer""Summer" />/>……..</form></form>

Using Forms - MenusUsing Forms - Menus

Create a web page that uses menus

<form<form action= action=""mailto:email@address.commailto:email@address.com"" method=method="post">"post"><select<select name= name="compHardware""compHardware" size= size="4">"4">

<option><option> Disk Drive Disk Drive</option></option><option><option> More RAM More RAM</option></option><option<option selected selected>> Zip drive Zip drive</option></option><option><option> New monitor New monitor</option></option>

</select></select>

…………</form></form>

Formatting FormsFormatting 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 FormsFormatting Forms Format form with tables

<table align="center"><table align="center"><caption><h2 align="center">Please fill this survey form</h2><caption><h2 align="center">Please fill this survey form</h2></caption></caption> <form name="myForm" method="post" action="mailto:a@b.com"><form name="myForm" method="post" action="mailto:a@b.com">

<tr><tr> <td>First Name:</td><td>First Name:</td> <td><td> <input type="text" name="first" size="10" maxlength="15"><input type="text" name="first" size="10" maxlength="15"> </td></td> <td>MI:</td><td>MI:</td> <td><td> <input type="text" name="mi" size="1"><input type="text" name="mi" size="1"> </td></td> <td>Last Name:</td><td>Last Name:</td> <td><td> <input type="text" name="last" size="10" maxlength="18"><input type="text" name="last" size="10" maxlength="18"> </td></td></tr></tr>

</form></form></table></table>

Formatting FormsFormatting Forms Format form with layers – What would the

code for this look like?

Reference 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