TUTORIAL 6: TUTORIAL 6: CREATING A WEB CREATING A WEB FORMFORM

Session 6.1.

OBJECTIVESOBJECTIVESExplore how Web forms interact

with Web serversCreate a Web formCreate a field setCreate input boxes and field labelsDefining default values and

placeholdersApplying a style sheet to a Web

form

INTRODUCING WEB INTRODUCING WEB FORMSFORMSWeb forms collect information from Web

site visitors.

Can you identify the following HTML form controls?

FORMS and SERVER-BASED FORMS and SERVER-BASED PROGRAMSPROGRAMS

FORMS AND SERVER-BASED FORMS AND SERVER-BASED PROGRAMSPROGRAMSServer-based programs are written in many

languagesThe earliest and most commonly used are

Common Gateway Interface (CGI) scripts that are written in Perl.

Other popular languages?- - - -

CREATING A WEB FORMCREATING A WEB FORMForms are created using the form

element, structured as follows:<form id=“id” name=“name” action=“url” method=“methodtype” enctype=“type”>… </form>

PRACTICE: CREATING A WEB PRACTICE: CREATING A WEB FORMFORM1. Download pizza.zip from my Web site and

use the files in the zipped file to complete the following:

2. Go to order.htm and directly below the paragraph in the section element, insert a form element with:

1. name: pizza2. id: pizza 3. action:

http://www.redballpizza.com/cgi-bin/buildpizza

4. method: post

CREATING A FIELD SETCREATING A FIELD SETHTML and XHTML allow you to

organize a form into a group of fields called field sets. <fieldset id=“id”>

controls</fieldset>

where id identifies the field set and controls are the control elements associated with fields within the field set

CREATING A FIELD SETCREATING A FIELD SETTo add a legend to a field set,

add the following tag after the opening <fieldset> tag:

<legend>text</legend>

Where text is the text of the field set caption.

PRACTICE: CREATING A PRACTICE: CREATING A FIELD SETFIELD SET1. Create two field sets with the ids

custInfo and buildPizza, and with the legend text Customer Information and Build Your Own Pizza respectively.

CREATING INPUT BOXESCREATING INPUT BOXESThe general syntax of input

elements is as follows:

<input type=“type” name=“name” id=“id” />

Where type specifies the type of input control, and the name and id attributes provide the control’s name and id.

CREATING INPUT BOXESCREATING INPUT BOXES

ADDING FIELD LABELSADDING FIELD LABELSYou can also expressly link text

with a control element.The syntax for creating a form

label is as follows:<label for=“id”>label text</label>

Where id is the value of the id attribute for a field’s control element, and label text is the text of the label.

PRACTICE: INPUT BOXES PRACTICE: INPUT BOXES AND FIELD LABELSAND FIELD LABELS1. Within the custInfo field set,

create a label with the text Name* along with a text input box for the custname field.

DEFINING DEFAULT VALUES DEFINING DEFAULT VALUES AND PLACEHOLDERSAND PLACEHOLDERSTo define the default value of a field,

add the attributevalue=”value”

to the control element, where value is the default value assumed by a browser unless a user enters a different value

Starting with HTML5, you can also populate your input boxes with placeholders. A placeholder is a text string that appears within the control element and provides users with information about the kind of information accepted by the field

DEFINING DEFAULT VALUES DEFINING DEFAULT VALUES AND PLACEHOLDERSAND PLACEHOLDERS

PRACTICE: DEFAULT VALUES PRACTICE: DEFAULT VALUES AND PLACEHOLDERSAND PLACEHOLDERS1. Add the placeholder text First

and Last Name for the custname text input box.

APPLYING A STYLE SHEET TO APPLYING A STYLE SHEET TO A WEB FORMA WEB FORMYou can apply a style sheet to a

Web Form to format the Web Form.

PRACTICE: STYLE SHEET AND PRACTICE: STYLE SHEET AND WEB FORMWEB FORM1. Go to the pizza.css file and create

the following styles: display all field sets with a background color value of (255, 246, 205) and with a solid 1-pixel border with the color value (233, 69, 0). Float the field sets on the left with a 1% margin. Set the width of the custInfo field set to 35%, the width of the buildPizza field set to 60%.