Tutorial 6: Creating a Web form Session 6.1.

OBJECTIVES Explore how Web forms interact with Web servers Create a Web form Create a field set Create input boxes and field labels Defining default values and placeholders Applying a style sheet to a Web form

INTRODUCING WEB FORMS Web forms collect information from Web site visitors. Can you identify the following HTML form controls? http://en.wikipedia.org/wiki/Form_(HTML)

FORMS and SERVER-BASED PROGRAMS

FORMS AND 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? -

CREATING A WEB FORM Forms are created using the form element, structured as follows: <form id=“id” name=“name” action=“url” method=“methodtype” enctype=“type”>… </form> Name: naming the form is useful for pages that contain several forms so you can differentiate one form from another. Id: uniquely identifies the form element among the different page elements. Action: Specifies the filename and location of the program that processes the form. Method: two possible values (get and post). Method to send data. Get is the default method. Enctype: determine how the form should be encoded as it is sent to the server.

PRACTICE: CREATING A WEB FORM Download pizza.zip from my Web site and use the files in the zipped file to complete the following: Go to order.htm and directly below the paragraph in the section element, insert a form element with: name: pizza id: pizza action: http://www.redballpizza.com/cgi- bin/buildpizza method: post

CREATING A FIELD SET HTML 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 SET To 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 FIELD SET 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 BOXES The 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 BOXES

ADDING FIELD LABELS You 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 AND FIELD LABELS 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 AND PLACEHOLDERS To define the default value of a field, add the attribute value=”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 AND PLACEHOLDERS

PRACTICE: DEFAULT VALUES AND PLACEHOLDERS Add the placeholder text First and Last Name for the custname text input box.

APPLYING A STYLE SHEET TO A WEB FORM You can apply a style sheet to a Web Form to format the Web Form.

PRACTICE: STYLE SHEET AND WEB FORM 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%.