Advanced Web Development IT225

Advanced Web Development IT225
Spring Term 2016 Marymount University School of Business Administration Professor Suydam Week 6 HTML Forms for Data Collection and Submission (Chapter 5)

Class Agenda Complete CSS Basics Instruction
Review Requirements and Setup Mini-Project 2 Begin Final Project Process Forms The use of web forms to collect data input by users The HTML form element and its action and method attributes These HTML “form controls” (also called “widgets”) the input element the select and option elements the textarea element the submit and reset buttons the fieldset and legend elements the label element and its for attribute Setting up two forms: a Body Mass Index calculator form a user feedback form Getting ready to submit form data

MP2 CSS Nature’s Source Website

Final Project – Start Thinking

Simple Home Page Styled with CSS: index.html & css/default.css
/* default.css for the simple one-page Nature's Source web site */ * { padding: 0; margin: 0; } body { width: 900px; margin: 0 auto; font-family: Arial, Helvetica, sans-serif; font-size: 1em; div#page { margin: 10px; width: 880px; div#logo { float: left; padding: 10px 0; div#address { float: right; padding: 20px 0 0 0; text-align: right; div#content { clear: both; div#text { width: 590px; div#text p { margin: 1em .2em .7em 0; div#image { width: 280px; padding-top: 40px; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "  <html xmlns=" <head> <title>Nature's Source - Canada's largest specialty vitamin store</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/default.css" /> </head> <body> <div id="page"> <div id="header"> <div id="logo"> <img src="images/naturelogo.gif" alt="Nature's Source Logo" width="608px" height="90px" /> </div> <div id="address"> 5029 Hurontario Street Unit 2<br /> Mississauga, ON L4Z 3X7<br /> Tel: <br /> Fax: <div id="content"> <div id="text"> <h4>Welcome to Nature's Source - Protecting your health naturally!</h4> <p>Founded in 1998, Nature's Source was created ... </p> <div id="image"> <img src="images/outdoor4.jpg" alt="Eternal peace" width="272px" height="154px" /> </body> </html> To center page

Simple Home Page Styled with CSS: index.html & css/default.css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "  <html xmlns=" <head> <title>Nature's Source - Canada's largest specialty vitamin store</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/default.css" /> </head> <body> <div id="page">   <div id="content"> <div id="textLeft"> <h3>Welcome to Nature's Source: Protecting your health naturally!</h3> <p>Founded in 1998, Nature's Source was created to serve those who use alternative healing methods. Offering only the highest quality vitamins, minerals, supplements & herbal remedies, Nature's Source takes great pride in helping people live healthier, happier lives.</p> <p>Many Companies that talk about Customer Service fail to deliver. Nature's Source exists to truly serve all the needs of their customers. Each location features dedicated on-site therapists along with knowledgeable staff who ensure that every customer receives the best quality information available. Continuing Education seminars are a regular event at Nature's Source.</p> </div> <div id="image"> <img src="images/outdoor4.jpg" alt="Eternal peace" width="272px" height="154px" />  </body> </html> Copy your common (or use common files at this link) and images folders from your mp1 project and paste into your desktop mp2 working folder

Simple Home Page Styled with CSS: default.css (1 & 2 of 6 parts)
/* ===== main menu appearing under logo on each page */ div#mainMenu { width: 100%; height: 20px; } ul#mainLinks li { float: left; width: 179px; padding-bottom: 5px; border-right: 1px solid #FFF; background-color: #093; text-align: center; /* ===== content area for each page ===== */ div#content { clear: left; div#content p { margin: 1em .2em .7em 0; text-align: left; font-size: 1em; /* default.css for the expanded Nature's Source web site */ /* ===== global settings ===== */ * { padding: 0; margin: 0; } body { width: 900px; margin: 0 auto; font-family: Arial, Helvetica, sans-serif; font-size: 1em; /* top level container */ div#page { width: 100%; /* company logo appearing at top of each page */ div#logo { padding: 10px 0;

/* ===== only main page has text at left in content area ===== */ div#textLeft { float: left; width: 65%; } /* ===== only main page has image at right in content area ===== */ div#image { width: 35%; text-align: center; div#image img { margin-top: 40px; /* ===== several pages have submenus at left in content area ===== */ div#subMenu { width: 180px; ul#subLinks li { width: 179px; padding-bottom: 3px; border-right: 1px solid #FFF; border-top: 1px solid #FFF; background-color: #0B3; ul#subLinks li a { color: #FFF; font-weight: bold; font-size: .6em; text-decoration: none; /* ===== pages with submenus at the left have text at the right ===== */ div#textRight { float: left; width: 715px; margin-left: 5px; } div#textRight p { margin: 1em .2em .7em 0; /* ===== several pages have only text in the content area ===== */ div#textOnly p { margin: 2em .2em .7em 0; div#textOnly ol { margin: 50px 100px 20px; div#textOnly ul { margin: 0 50px;

/* ===== footer has both copyright notice and a short menu ===== */ /* Note that some styling for the main menu and submenus appears here to avoid duplication, since certain styles are the same for all three kinds of menus. */ div#footer { clear: left; width: 100%; height: 20px; } div#copyright { float: left; width: 539px; height: 100%; padding-top: 5px; border-right: 1px solid #FFF; background-color: #093; color: #DDD; text-align: center; font-weight: bold; font-size: .7em; div#footerMenu { float: left; width: 360px; height: 100%; } ul#mainLinks, ul#subLinks, ul#footerLinks { list-style-type: none; ul#footerLinks li { width: 179px; padding-bottom: 5px; border-right: 1px solid #FFF; background-color: #093; text-align: center; ul#mainLinks li a, ul#footerLinks li a { color: #FFF; text-decoration: none; font-weight: bold; font-size: .7em; ul#mainLinks li a:hover, ul#subLinks li a:hover, ul#footerLinks li a:hover { padding: 2px 1px; background-color: #3F3; color: #000; /* === some pages with text at left or right of content area have headers === */ div#textLeft h3, div#textRight h3 { margin: 1em 0 .7em; text-align: left; font-size: 1em; Create a link from your frames mp2 hypertext to the new index.html in mp2 Load contents of your of your frames pages and mp2 folder to your web server site Verify links work and page renders

Another Site Page with No Additional Links: buy.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "  <html xmlns=" <head> <title>Nature's Source - Our E-Store</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/default.css" /> </head> <body> <div id="page">   <div id="content"> <div id="textOnly"> <p>Keep watching this space for our e-store. You will soon be able to purchase any of our products on-line and have them shipped to your home or business. We will also be interested to receive your feedback for suggested improvements as our site develops.</p> </div>  </body> </html> buy.html employs essentially the same CSS as index.html The one exception is the XHTML div element identified by id="textOnly", which has this style: div#textOnly p { margin: 2em .2em .7em 0; } We can use this id selector and its style on any page for a div element whose content is, in fact, “only text.” Much of a typical CSS style file often consists of id selectors like this, together with generic and restricted classes. Load buy.html to mp2 folder in your web server site Verify links work and page renders

Another Site Page with Additional Links: Side Menu products
Another Site Page with Additional Links: Side Menu products.html, Added to default.css /* ===== several pages have submenus at left in content area ===== */ div#subMenu { float: left; width: 180px; } ul#subLinks li { width: 179px; padding-bottom: 3px; border-right: 1px solid #FFF; border-top: 1px solid #FFF; background-color: #0B3; text-align: center; ul#subLinks li a { color: #FFF; font-weight: bold; font-size: .6em; text-decoration: none; /* ===== pages with submenus at the left have text at the right ===== */ div#textRight { width: 715px; margin-left: 5px; div#textRight p { margin: 1em .2em .7em 0; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "  <html xmlns=" <head> <title>Nature's Source - Products</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/default.css" /> </head> <body> <div id="page">   <div id="content"> <div id="subMenu"> <ul id="subLinks"> <li><a href="featured.html">Featured Products</a></li> <li><a href="services.html">Services</a></li> <li><a href="suppliers.html">Suppliers</a></li> </ul> </div> <div id="textRight"> <p>Nature's Source provides a wide variety of products ...</p>  </body> </html>

Create remaining pages of site by modifying MP1 pages
To view all pages Go to Student website links>Instructor Demo >Text Example for MP2

Validating Your CSS Recall: It’s important to validate your XHTML markup. It’s just as important to validate your CSS. The process is similar to XHTML markup validation, and here is a link to the W3C validator: You can enter the URL of a CSS document directly for validation, or the URL of an XHTML document styled with CSS to validate the CSS used.

Forms Why Forms Forms are just a fact of everyday life: employment applications, income tax forms, forms to tell the doctor the state of our health … A website will often need to collect information from a visitor, especially if it hopes to do business with that visitor. Thus the need for forms on our websites parallels our need for them in everyday life. Online forms appear in various guises, but often look just like the paper forms we use. Here are the three main aspects to the use of forms for collecting user data: Designing an appropriate form to collect the desired data (this chapter) Ensuring the data entered is the data you want (Chapter 6) Submitting the data to a server for processing (Chapter 8) The HTML form Element and Its action and method Attributes To place a form on a web page we begin by inserting an HTML form element at the appropriate location in our page markup. The form element by itself has no visual effect on the page display. Data-collection elements such as input and textarea are nested inside the form element. Both the form element itself and the data-collection elements it contains can be styled with CSS. A form element will also contain a submit button which a user will click to “submit” the form data. The form tag has an action attribute whose value says what to do when the submit button is activated. In this chapter we will essentially ignore the action attribute and simply assign the empty string as its value. The form tag also has a method attribute whose value may be GET or POST, indicating how the data will be transferred to the server. We ignore that attribute as well in this chapter.

A Body Mass Index (BMI) Calculator
Our first form will be used to compute a user’s body mass index. A person’s body mass index is computed using a person’s height and weight. BMI can be used as an indicator of total body fat. For more information and the formula on which our calculator is based see the website of the National Institute of Health: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "  <html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Body Mass Index Calculator</title> </head> <body> <center> <h4>Body Mass Index Calculator</h4> </center> <p>Body Mass Index (BMI) is used as an indicator of total body fat.</p> <form id="bmiForm" action=""> </form> <p>Total body fat is correlated to the risk of ...</p> </body> </html>

The HTML input Elements
The HTML input element is an empty element only used inside a form element. Each input element creates, in the form display, a form field (a place where the user can enter data or indicate a choice). A typical form will have several input elements allowing the user to Enter a line of text (a different element is used for more text) Choose one from several mutually exclusive alternatives Choose one or more from several alternatives that are not mutually exclusive Indicate whether a single option has been chosen or not All input elements have these attributes: A type attribute whose value determines what kind of input element it will be A value attribute which is used in different ways, depending on the kind of input element being used A name attribute which can be used to refer to the element in a script Additional informational text must be present so that a user will know exactly what a particular input element is expecting. The text input element allows the user to enter a single line of text. Example: <input type="text" name="height" size="7" /> The size attribute specifies the visible width, in characters, of the text box display (default value is 20). More characters than the visible number may be entered. For this input element a value attribute could be used to supply a “default” value to appear in the text box until a user starts typing in that box. See the text boxes labeled Height: and Weight: in the display of bmi2.html.

The HTML input Elements (Continued)
The radio button input element allows the user to choose one of several mutually exclusive alternatives. Example: <input type="radio" name="heightUnit" value="in" /> All input elements with type="radio" and with the same value for the name attribute form a group, of which only one may be selected. Select another one, and the previously selected choice will be “de-selected”. The (required, in this case) value attribute contains the data transmitted from this input element when this form is submitted to a server. See the “radio buttons” labeled inches and pounds in the display of bmi2.html. The checkbox input element allows the user to make one or more choices from one or more (non-mutually-exclusive) alternatives. It can also be used to indicate whether a single option has been chosen or not. Example: <input type="checkbox" name="details" value="yes" /> All input elements with type="checkbox" and with the same value for the name attribute form a group, from which any number may be selected. The (also required) value attribute contains the data transmitted from this input element when this form is submitted to a server. See the option for getting a detailed BMI analysis in bmi2.html. The select and option elements only appear within a form element and combine to produce a dropdown list-box Example <select name="heightUnit"> <option>inches</option> <option>centimeters</option> </select> Each option element is nested within a select element. The first option element is the one that appears in the display of the dropdown list-box. See the dropdown list boxes showing inches and pounds in the display of bmi3.html.

Form text, radio, and checkbox input Elements
<form id="bmiForm" action=""> <table summary="BMI Calculator-Textbox, Radio Button, Checkbox"> <tr> <td>Height:</td> <td><input type="text" name="height" size="7" /></td> <td>Units:</td> <td><input type="radio" name="heightUnit" value="in" /> inches</td> <td><input type="radio" name="heightUnit" value="cm" /> centimeters</td> </tr> <td>Weight:</td> <td><input type="text" name="weight" size="7" /></td> <td><input type="radio" name="weightUnit" value="lb" /> pounds</td> <td><input type="radio" name="weightUnit" value="kg" /> kilograms</td> <td colspan="4">Please check here if you want a detailed analysis of your BMI: <input type="checkbox" name="details" value="yes" /></td> </table> </form>

Form select and option Elements
<tr> <td>Height:</td> <td><input type="text" name="height" size="7" /></td> <td>Units:</td> <td><select name="heightUnit"> <option>inches</option> <option>centimeters</option> </select></td> </tr> <td>Weight:</td> <td><input type="text" name="weight" size="7" /></td> <td><select name="weightUnit"> <option>pounds</option> <option>kilograms</option> Our BMI calculator contains form fields for the user to enter or choose all the necessary information for the calculation. But … when and how is that calculation going to be performed? We are missing a button (another input element) which the user can click to cause the calculation to be performed and the result displayed. We postpone the discussion of such a button temporarily until we have introduced a second form.

Collecting User Feedback
Our second form will be used to collect feedback from the visitors to our website. Such forms are found on many websites, and typically contain form fields for the following: The user’s name, address, gender, telephone number(s), address(es), and possibly additional personal information A place for the user to enter comments about the company’s website or to ask questions Most of these form fields can be handled by the elements we already know about, but for comments and/or extended feedback we need a new element.

The textarea Element The XHTML textarea element only appears within a form element, and can be used to collect text when we want the user to enter more than will fit on a single line. Example: <textarea name="message" rows="6" cols="30"> </textarea> The rows and cols attributes determine the number of text lines and character columns in the display area where the user is to start typing. If the user enters more text than allowed for by the values of rows and cols, the textarea box will a provide scroll bar as appropriate. See the textarea box labeled Comments: in the display of feedback1.html. <tr valign="top"> <td>Subject:</td> <td><input type="text" name="subject" size="40" /></td> </tr> <td>Comments:</td> <td><textarea name="message" rows="6" cols="30“> </textarea></td> <tr> <td colspan="2">Please check here if you wish to receive a reply: <input type="checkbox" name="reply" value="yes" /> </td>

The input Elements of Type submit and reset
Finally we have two buttons the user can click to make something happen: A “submit button” to send the form data to the server (remember, though, we are not actually doing that in this chapter): <input type="submit" value="Send Feedback" /> A “reset button” if the user wishes to clear the form input and start over: <input type="reset" value="Reset Form" /> In both cases the value attribute determines the text that will appear on the button in the browser display. See the Send Feedback and Reset buttons in the display of feedback2.html.

Partial form Markup from feedback2.html
<tr valign="top"> <td>Comments:</td> <td><textarea name="message" rows="6" cols="30"> </textarea></td> </tr> <tr> <td colspan="2">Please check here if you wish to receive a reply: <input type="checkbox" name="reply" value="yes" /> </td> <td><input type="submit" value="Send Feedback" /></td> <td align="right"><input type="reset" value="Reset Form" /></td>

Form Controls (Form Fields): fieldset and legend Elements
The fieldset element allows us to group a set of form controls and have the browser place a “box outline” around the grouping. The legend element allows us to name, or provide a label for, such a grouping, and it must be placed directly inside the fieldset element with which it is associated. The content of the legend element will appear on the top left part of the box border produced by the fieldset element <fieldset> <legend>Vital statistics</legend> <table summary="Vital Statistics"> <tr> <td>Height:</td> <td><input type="text" name="height" size="7" /></td> <td>Units:</td> <td><select name="heightUnit"> <option>inches</option> <option>centimeters</option> </select></td> </tr> <td>Weight:</td> <td><input type="text" name="weight" size="7" /></td> <td><select name="weightUnit"> <option>pounds</option> <option>kilograms</option> <td colspan="4">Please check here if you want a detailed analysis of your BMI: <input type="checkbox" name="details" value="yes" /></td> </table> </fieldset>

Behind-the-scenes Logical Groupings for Usability with the label Element
The XHTML label element has no visual effect on a form display. It is used to associate a text label with its corresponding input element. The association is achieved by making the value of the label element’s for attribute the value of the id attribute of the corresponding input element. This association is a usability feature, since it allows the (usually text) label itself to be clicked to move the focus to its corresponding input element. That is, the user is not forced to click directly on the input element itself. This difference cannot be illustrated in a static display. Instead the difference in behavior must be “experienced” by comparing the behavior of bmi4.html (which has no label elements) and bmi5.html (which does, but in every other respect is just like bmi4.html) when each is viewed in a browser and the user clicks on a text label for one of the form fields. For example, when bmi5.html is displayed, click anywhere on the text of the “Please check here … ” instruction to see what happens. <tr> <td><label for="height">Height:</label></td> <td><input id="height" type="text" name="height“ size="7" /></td> <td><label for="heightUnit">Units:</label></td> <td><select id="heightUnit" name="heightUnit"> <option>inches</option> <option>centimeters</option> </select> </td> </tr>

Video Plug-In Create a new page from scratch (be creative)
Create a “video” directory within your mp2 directory Download video from MP2 requirements to a video folder Install Nature’s Source video

Advanced Web Development IT225

Similar presentations

Presentation on theme: "Advanced Web Development IT225"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Advanced Web Development IT225

Similar presentations

Presentation on theme: "Advanced Web Development IT225"— Presentation transcript:

Similar presentations

About project

Feedback