Designing Forms Lesson 10

Overview of Forms Forms are used all over the Web to Types of forms: Accept information Provide interactivity Types of forms: Search form, Order form, Newsletter sign-up form, Survey form. Etc….

How Forms Work You visit a Web page with a form, fill it out, and submit it The browser sends the data to the Web server The Web server receives the form data, and then passes it off to a Web application to be processed The Web application processes the data and creates a response, which it sends back to the Web server The Web server sends the Web application’s response to the browser

How Forms Work The form itself is written in HTML And, while HTML supports the creation of forms, it does not include tools to process the information. A program on the Web server is needed to store or manipulate the data in some manner

Forms and Web Server-Based Programs Server-based programs are written in many languages The earliest and most commonly used are Common Gateway Interface (CGI) scripts that are written in Perl. Other popular languages include: ASP ColdFusion C/C++ PHP VBScript

Forms Syntax Five basic form elements are commonly supported by the major browsers: <form> <input> <select> <option> <textarea>

Forms Syntax (continued) HTML 4.01 introduced five new form elements: <button> <fieldset> <label> <legend> <optgroup>

The <form> tag The <form> tag holds all the elements that make up the form <form attributes> elements </form> A variety of <form> attributes tells the browser how to handle the form data

<form> attributes action - specifies the filename and location of the program that processes the form method - specifies how your Web browser sends data to the server get – default value, form data passed in URL post – more secure, form data passed in HTTP Entity Body name – identifies the form id – identifies the form <form action=“http://www.website.com/ cgi_bin/script.cgi” method=“post” name=“survey” id=“survey”>… </form>

Input Objects

Input Objects The <input> element defines many of the form input object types Text box Radio buttons Check boxes Etc. The type attribute specifies the type of input object Example: <input type=“textbox” />

Text Boxes The text box is the most commonly used form element Attributes type=“text” name size maxlength value <input type=“text” name=“firstname” size=“20” maxlength=“35” />

Password Boxes Used to accept text information that needs to be hidden as it is entered Attributes: type=“password” name size maxlength value <input type=“password” name=“password” size=“20” maxlength=“35” />

Check Boxes Used to allow the user to select one or more of a group of predetermined items Attributes: type=“checkbox” name checked value

Radio Buttons Used to allow the user to select exactly one from a group of predetermined items Each radio button in a group is given the same name and a unique value Attributes: type=“radio” name checked value

Submit & Reset Buttons The submit and reset buttons let the user choose whether to send the form data or start over <input type=“submit” value=“Submit” /> <input type=“reset” value=“Clear Form” />

Hidden Fields This form element is not displayed on the web page. Hidden form fields can be accessed by both client-side and server-side scripting and are sometimes used to contain information needed as the visitor moves from page to page. Attributes: type=“hidden” name value

Custom Event Buttons Custom event buttons activate a function in some associated program or script Attributes: type=“button” name value

Submit a File Users can select a file on their own computer and send it to the server Attributes type=“file” name

Image for the Submit Button You can choose an image file and use it instead of the default submit button. Attributes: type=“image” name src <input type="image" src="submit.gif" name="submitformbtn" />

Other Form Objects

The <select> Element The <select> element lets you create a list box or scrollable list of selectable options Attributes: name, size, multiple Each individual item in the list is specified using the <option> element. Attributes: value, selected

The <select> element <select name="boats"> <option>Canoe</option> <option>Jon Boat</option> <option>Kayak</option> <option>Bass Boat</option> <option>Family Boat</option> </select>

Setting the Selection List Size You can change the number of options displayed in the selection list by modifying the size attribute: <select size=“value”>

The <textarea> element The <textarea> element lets you create a larger text area for user input. Attributes: name cols rows value

The <textarea> element <p>Please comment on your concerns regarding Internet privacy and safety:<br /> <textarea name="comments“ cols="75“ rows="5"> </textarea> </p>

The <label> element Associates a text label with a form element Two different formats <label>Email: <input type=“text” name=“CustEmail” /> </label> or <label for="email ">Email: </label> <input type="text" name="CustEmail" />

Field Sets HTML and XHTML allow you to organize option buttons into a group of fields called field sets. <fieldset> creates the field set <legend> Adds a caption to the field set

Field Sets <fieldset> <legend> Oatmeal Varieties </legend> <p>Apple Cinnamon<input type="radio" name=“oatmealtype” value="applecinnamon“ /></p> <p>Nutty Crunch<input type="radio“ name=“oatmealtype” value="nuttycrunch" /></p> <p>Brown Sugar<input type="radio" name=“oatmealtype” name="brownsugar” /></p> </fieldset>

Tips for Creating Effective Forms Mark fields that are required, but also limit the number of un-required fields. If you need to collect a lot of information, break the form into manageable sections spread out over several pages. Provide detailed instructions about what users are expected to do. Don’t assume that your form is self-explanatory.

Free Remotely-hosted Form Processing Many web host providers offer free scripts for their clients. Contact their support area or FAQ to learn more about their services. Some web sites that offer FREE remotely hosted scripts (in return for displaying an ad): http://www.expressdb.com/ http://wufoo.com http://response-o-matic.com http://master.com http://www.formmail.com http://formbuddy.com http://formassembly.com