tutorial 6: creating a web form session 6.1.. objectives explore how web forms interact with web...
TRANSCRIPT
![Page 1: 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](https://reader033.vdocuments.mx/reader033/viewer/2022051401/56649d9e5503460f94a88d1a/html5/thumbnails/1.jpg)
TUTORIAL 6: TUTORIAL 6: CREATING A WEB CREATING A WEB FORMFORM
Session 6.1.
![Page 2: 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](https://reader033.vdocuments.mx/reader033/viewer/2022051401/56649d9e5503460f94a88d1a/html5/thumbnails/2.jpg)
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
![Page 3: 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](https://reader033.vdocuments.mx/reader033/viewer/2022051401/56649d9e5503460f94a88d1a/html5/thumbnails/3.jpg)
INTRODUCING WEB INTRODUCING WEB FORMSFORMSWeb forms collect information from Web
site visitors.
Can you identify the following HTML form controls?
![Page 4: 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](https://reader033.vdocuments.mx/reader033/viewer/2022051401/56649d9e5503460f94a88d1a/html5/thumbnails/4.jpg)
FORMS and SERVER-BASED FORMS and SERVER-BASED PROGRAMSPROGRAMS
![Page 5: 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](https://reader033.vdocuments.mx/reader033/viewer/2022051401/56649d9e5503460f94a88d1a/html5/thumbnails/5.jpg)
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?- - - -
![Page 6: 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](https://reader033.vdocuments.mx/reader033/viewer/2022051401/56649d9e5503460f94a88d1a/html5/thumbnails/6.jpg)
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>
![Page 7: 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](https://reader033.vdocuments.mx/reader033/viewer/2022051401/56649d9e5503460f94a88d1a/html5/thumbnails/7.jpg)
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
![Page 8: 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](https://reader033.vdocuments.mx/reader033/viewer/2022051401/56649d9e5503460f94a88d1a/html5/thumbnails/8.jpg)
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
![Page 9: 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](https://reader033.vdocuments.mx/reader033/viewer/2022051401/56649d9e5503460f94a88d1a/html5/thumbnails/9.jpg)
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.
![Page 10: 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](https://reader033.vdocuments.mx/reader033/viewer/2022051401/56649d9e5503460f94a88d1a/html5/thumbnails/10.jpg)
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.
![Page 11: 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](https://reader033.vdocuments.mx/reader033/viewer/2022051401/56649d9e5503460f94a88d1a/html5/thumbnails/11.jpg)
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.
![Page 12: 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](https://reader033.vdocuments.mx/reader033/viewer/2022051401/56649d9e5503460f94a88d1a/html5/thumbnails/12.jpg)
CREATING INPUT BOXESCREATING INPUT BOXES
![Page 13: 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](https://reader033.vdocuments.mx/reader033/viewer/2022051401/56649d9e5503460f94a88d1a/html5/thumbnails/13.jpg)
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.
![Page 14: 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](https://reader033.vdocuments.mx/reader033/viewer/2022051401/56649d9e5503460f94a88d1a/html5/thumbnails/14.jpg)
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.
![Page 15: 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](https://reader033.vdocuments.mx/reader033/viewer/2022051401/56649d9e5503460f94a88d1a/html5/thumbnails/15.jpg)
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
![Page 16: 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](https://reader033.vdocuments.mx/reader033/viewer/2022051401/56649d9e5503460f94a88d1a/html5/thumbnails/16.jpg)
DEFINING DEFAULT VALUES DEFINING DEFAULT VALUES AND PLACEHOLDERSAND PLACEHOLDERS
![Page 17: 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](https://reader033.vdocuments.mx/reader033/viewer/2022051401/56649d9e5503460f94a88d1a/html5/thumbnails/17.jpg)
PRACTICE: DEFAULT VALUES PRACTICE: DEFAULT VALUES AND PLACEHOLDERSAND PLACEHOLDERS1. Add the placeholder text First
and Last Name for the custname text input box.
![Page 18: 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](https://reader033.vdocuments.mx/reader033/viewer/2022051401/56649d9e5503460f94a88d1a/html5/thumbnails/18.jpg)
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.
![Page 19: 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](https://reader033.vdocuments.mx/reader033/viewer/2022051401/56649d9e5503460f94a88d1a/html5/thumbnails/19.jpg)
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%.