1. Tutorial 6: Creating a Web form
Session 6.1.

2. 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

3. INTRODUCING WEB FORMS
Web forms collect information from Web site visitors.
Can you identify the following HTML form controls?

4. FORMS and SERVER-BASED PROGRAMS

5. 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? -

6. 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.

7. 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: bin/buildpizza
method: post

8. 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

9. 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.

10. 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.

11. 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.

12. CREATING INPUT BOXES

13. 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.

14. 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.

15. 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

16. DEFINING DEFAULT VALUES AND PLACEHOLDERS

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

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

19. 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%.