CSCI N241: Fundamentals of Web Design Copyright ©2006  Department of Computer & Information Science Creating Web Forms

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Goals By the end of this unit, you should understand … … how forms communicate with servers.… how forms communicate with servers. … how to build forms using several form fields.… how to build forms using several form fields. … the differences between POST and GET form methods.… the differences between POST and GET form methods. … how to add style to a form.… how to add style to a form.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Introducing Forms Until now, our development focused on static web pages which enabled only one-way communication.Until now, our development focused on static web pages which enabled only one-way communication. Web forms expand our toolkit to enable two-way communication between the server (and, thus, the owner of a web site) and the web user.Web forms expand our toolkit to enable two-way communication between the server (and, thus, the owner of a web site) and the web user.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science How Forms Work Web Application A A – The user completes a form and clicks the SUBMIT button. This action packages the form data and sends it to the server B – A web application (built using PHP, Perl, C or some other language) processes the form data. B C – The server sends an XHTML page to the browser as a response, which the browser displays to the user. C

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Common Form Components The ElementThe Element TextboxesTextboxes Text AreasText Areas Radio ButtonsRadio Buttons CheckboxesCheckboxes Drop Down MenusDrop Down Menus Multiple Select MenusMultiple Select Menus Password FieldsPassword Fields Hidden FieldsHidden Fields Fieldset & LegendsFieldset & Legends LabelsLabels Submit ButtonSubmit Button Reset ButtonReset Button ButtonsButtons

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science The Element We nest all other form elements inside the element. It has the following attributes:We nest all other form elements inside the element. It has the following attributes: –The id attribute identifies the form as a unique entity. –The action attribute points the browser to a web application for processing the form. –The method attribute tells the browser how to send the form data ( GET or POST ).

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science The Textbox We use the textbox for small amounts of information, like a name, address, etc.We use the textbox for small amounts of information, like a name, address, etc. To build a textbox, we use the element using the following attributes:To build a textbox, we use the element using the following attributes: –We set the type attribute to text. –We give each textbox a unique identity using the name attribute.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science The Submit Button A submit button tells the browser to give a web application the form data for processing.A submit button tells the browser to give a web application the form data for processing. The browser sends the data as a package to the web application indicated by the element's action attribute.The browser sends the data as a package to the web application indicated by the element's action attribute.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science The Submit Button (cont.) To create a submit button, we use the element with the following attributes:To create a submit button, we use the element with the following attributes: –We set the value of the type attribute to submit. –We also can add a value attribute to configure our button's text.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science The Reset Button We can also add a reset button to give our user's a convenient way to clear the form's fields quickly. To create a reset, we use the element with the following attributes:We can also add a reset button to give our user's a convenient way to clear the form's fields quickly. To create a reset, we use the element with the following attributes: –We set the value of the type attribute to reset. –We also can add a value attribute to configure our button's text.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let's Try One! Download & extract the file n241CreatingForms_Examples.zip.Download & extract the file n241CreatingForms_Examples.zip. Open the file form.html in your editor.Open the file form.html in your editor. Add the code you see on the next slide to the element.Add the code you see on the next slide to the element.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Add this code … Ship to: Name: Address: City: State: Zip:

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science GET vs. POST The form has two options to tell the browser how to send form data to the server (using the method attribute) – GET or POST.The form has two options to tell the browser how to send form data to the server (using the method attribute) – GET or POST. The GET value submits form data as part of a URL. We use the GET value when user's might want to bookmark the page that is the result of a web form.The GET value submits form data as part of a URL. We use the GET value when user's might want to bookmark the page that is the result of a web form.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science GET vs. POST The POST value doesn't display form data in the URL; we use POST for processing orders or forms with other sensitive material.The POST value doesn't display form data in the URL; we use POST for processing orders or forms with other sensitive material. Finally, we use POST for forms that include a element, since GET requests limit input data to 256 characters.Finally, we use POST for forms that include a element, since GET requests limit input data to 256 characters. We can specify GET or POST using the element's method attribute.We can specify GET or POST using the element's method attribute.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let's Try One! Update the element's method attribute to GET.Update the element's method attribute to GET. What happened when you submit the form?What happened when you submit the form? Change the value back to POST.Change the value back to POST.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Creating a Drop Down List We can create a drop down list using the select and option elements. The select element creates a menu and the option elements create menu choices.We can create a drop down list using the select and option elements. The select element creates a menu and the option elements create menu choices. We use the name attribute to give the select element a unique identifier. … We use the name attribute to give the select element a unique identifier. …

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Creating Menu Values We can create menu values using the element.We can create menu values using the element. It uses the value attribute to identify the data that the form will send to the server on its behalf: Navy Blue It uses the value attribute to identify the data that the form will send to the server on its behalf: Navy Blue

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let's Try One! Build a drop down menu at the top of your form, above the Ship To: paragraph: Choose your beans: HouseBlend Shade Grown Bolivan Supremo Organic Guatemalan Kenya Build a drop down menu at the top of your form, above the Ship To: paragraph: Choose your beans: HouseBlend Shade Grown Bolivan Supremo Organic Guatemalan Kenya

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Creating Radio Buttons We use radio buttons when we want the user to select a single option from among a group of options.We use radio buttons when we want the user to select a single option from among a group of options. Attributes:Attributes: –Set type equal to radio –Assign the same value for the name attribute for each member in the group. –Differentiate the radio buttons in the same group using the value attribute. –For one of the members in the radio button group, we can set the checked attribute to checked, which selects that value, by default, when the page loads.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let's Try One! Build a group of radio buttons below the drop down menu on your form & above the Ship To: paragraph: Type: Whole Bean Ground Build a group of radio buttons below the drop down menu on your form & above the Ship To: paragraph: Type: Whole Bean Ground

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Labels Instead of using plain text to describe form fields (like our radio buttons), we can use the label element.Instead of using plain text to describe form fields (like our radio buttons), we can use the label element. The label element makes your form more accessible to adaptive software and improves the structure of your page.The label element makes your form more accessible to adaptive software and improves the structure of your page.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Labels To use the label element, we need to first make sure that the form field for which we want to use a label has an id attribute: To use the label element, we need to first make sure that the form field for which we want to use a label has an id attribute: Next, we use the for attribute of the label to make the connection between the two: Ground Next, we use the for attribute of the label to make the connection between the two: Ground

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let's Try One! Update your radio buttons to use labels: Type: Whole Bean Ground Update your radio buttons to use labels: Type: Whole Bean Ground

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Grouping Fields Visually We can group fields visually together using the and elements.We can group fields visually together using the and elements. The defines a border around a group of related form fields.The defines a border around a group of related form fields. The element, which we define nested inside, gives that group a label.The element, which we define nested inside, gives that group a label.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let's Try One! Group your radio buttons using the : Type Group your radio buttons using the : Type

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Checkboxes Like radio buttons, checkboxes in a group share the same name, but have different values.Like radio buttons, checkboxes in a group share the same name, but have different values. However, unlike radio buttons, users can select more than one checkbox in a group.However, unlike radio buttons, users can select more than one checkbox in a group.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Checkbox Attributes Use the element with the type configured to checkbox.Use the element with the type configured to checkbox. Give the name attribute the same name for each member in a group.Give the name attribute the same name for each member in a group. Give unique names to the value attribute of each checkbox.Give unique names to the value attribute of each checkbox. If you want a checkbox to appear checked when the form loads, configure the checked attribute with a value of checked.If you want a checkbox to appear checked when the form loads, configure the checked attribute with a value of checked.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let's Try One! Copy the following code in a above the Ship To paragraph: Extras Gift Wrap Include a catalog with order Copy the following code in a above the Ship To paragraph: Extras Gift Wrap Include a catalog with order

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Comment Fields When we want to give the user a large area in which to add comments, we can use the element.When we want to give the user a large area in which to add comments, we can use the element. The element includes the following attributes:The element includes the following attributes: –We use the name attribute to uniquely identify the element. –We use the rows attribute to specify the number of visible rows of text. –We use the cols attribute to specify the width of the.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let's Try One! Add the following just above the form's buttons: Customer Comments: Add the following just above the form's buttons: Customer Comments:

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Adding Style to Forms Although normally considered a bad idea for page layout, most developers use a borderless table for form layout.Although normally considered a bad idea for page layout, most developers use a borderless table for form layout. Why? Using CSS to position individual form fields is a tremendous task. Additionally, we can consider forms to be tabular data (okay, so that might be a stretch … ).Why? Using CSS to position individual form fields is a tremendous task. Additionally, we can consider forms to be tabular data (okay, so that might be a stretch … ).

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Form Style Examples Open the file styledform.html.Open the file styledform.html. Open the file css/styledform.css.Open the file css/styledform.css. After viewing the HTML in your browser, open both files in an editor.After viewing the HTML in your browser, open both files in an editor.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Questions?

References Freeman, Elisabeth and Eric Freeman. Head First HTML with CSS & XHTML. Sebastopol, CA: 2006.Freeman, Elisabeth and Eric Freeman. Head First HTML with CSS & XHTML. Sebastopol, CA: Neiderst-Robbins, Jennifer. Web Design in a Nutshell, Third Edition. Sebastopol, CA: 2006.Neiderst-Robbins, Jennifer. Web Design in a Nutshell, Third Edition. Sebastopol, CA: 2006.