Web Design 1: Unit 6. Tutorial 6- Red Ball Pizza Web Form

Unit 6. Tutorial 6- Red Ball Pizza Web Form

Tutorial 6

Red Ball Pizza Web Form

1. Open surveytxt.htm from your student data files. Enter your name and the date in the comment section. Save the file as survey.htm.

2. Review the survey.htm file in your text editor to become familiar with its content and structure.

3. Open survey.htm in your Web browser to view the page.

4. We are going to create a survey form on this web page. A Web form is inserted into a page using the form element. An attribute will name the form and control how it is processed. Return to the survey.htm file in your text editor. Directly above the closing </section> tag, insert the following form element:

</form>

5. Save your changes to the file. Another set of form attributes specifies where to send the form data and how to send it. You indicate this information by adding the action, method and enctype attributes to the form element. The method attribute has two possible values; get and post. The get method, the default, attaches the form data to the end of the URL specified in the action attribute. The post method sends form data in a separate data stream. The enctype attribute determines how the form data should be encoded as it is sent to the server. Return to the survey.htm and add the following attributes to the form element:

<form id= “survey” name= “survey”

action= “http://www.redballpizza.com/cgi-bin/survey”

method= “post”>

6. Save your changes to the file.

7. Because www.redballpizza.com/cgi-bin/survey does not correspond to a real CGI (Common Gateway Interface) script running on the Web and thus cannot process the survey form in this lesson, you will add a JavaScript program named formsubmit.js to handle the form. The purpose of this program is to intercept the contents of the form before the browser attempts to contact the CGI. The script also will report whether or not the data contained in the survey form has been correctly filled out. Return to the survey.htm file and go to the head section of the document. Directly below the script element that accesses the modernizr.js file, insert the following code:

8. Save your changes to the file. Now that you have added the form element to the survey page, you can start creating the survey with the control elements and other form features. We will start by adding field sets which organize a form and are usually displayed with a box enclosing the fields in the set. Field sets are created using the fieldset element. Directly above the closing </form> tag, insert the following two field sets:

</fieldset>

</fieldset>

9. Save your changes to the file. Every field set can contain text describing its content. The syntax for this text is called the legend element. Within the first field set in the survey.htm file, insert the following legend element, directly above the closing </fieldset> tag:

<legend>Customer Information</legend>

In the second field set, insert the following legend element:

<legend>Share Your Experience at Red Ball Pizza</legend>

10.Save your changes to the file and then refresh the survey.htm file in your Web browser to see the current appearance of the form. We will use CSS positioning styles to move the legend and format its appearance later.

11. Next you will add control elements and other content to the two field sets.

Most of the control elements in which users either type or select data are marked as input elements using the <input> tag. Some of the choices for the type on input control include: button/ checkbox/ file/ hidden/ image/ password/ radio/ reset/ submit/ and text. The first controls that you will add to the survey form will be seven text input boxes in which each customer can enter a name, street address, city, state, postal code, phone number and e-mail address. Return to the survey.htm file. Within the custInfo field set, insert the following code:

Name *

Street address

City

State (abbr.)

Postal code

Phone number

E-mail *

Note: The * next to the Name and E-mail entries tell users that these fields are required.

12.Save your changes to the file. Next you will add text input boxes for the date of the customer’s visit to Red Ball Pizza and the receipt number of the order. Within the Share Your Experience at Red Ball Pizza field set, insert the following input boxes:

Date of visit

Receipt number *

13.Save your changes to the file and then refresh survey.htm in your Web browser. Test the controls by typing your first and last name in the Name input box.

14. In the last set of steps, you entered descriptive text alongside the input boxes to indicate the purpose of each input box to users. However, nothing in the HTML code explicitly associates that text with the input box. To associate text with a control element, you enclose the descriptive text with a label element. We are now going to apply field labels by using the label element and the for attribute to associate the descriptive text of the survey with the relevant input boxes. One effect of associating a label with a control element is that clicking the label automatically moves the cursor into the control element. Return to the survey.htm file in your text editor. Go to the customer information field set and enclose the text Name * within a label element, associating it with the custname input box as follows:

<legend>Customer Information</legend>

<label for= “custname”>Name *</label>

Repeat this process for the remaining descriptive text in the two field sets, using the for attribute to associate each label with the corresponding input

box.

15. Save the changes to the file and then refresh the survey.htm file in your Web browser. Test the labels by clicking each label and verifying that the cursor appears within the corresponding control element.

16.The form is difficult to read so you will now format it with a style sheet. We will float the two field sets side-by-side within the main section of the page and resize it to be about half the width of the Web page. Use your text editor to open the formtxt.css file from your student data files. Enter your name and the date in the comment section of the file and then save it as forms.css in the same folder.

17. Below the comment section, add the following style rule to modify the appearance of these field sets:

/* Field set styles */

fieldset{

background-color: rgb(255, 246, 205);

border: 1px solid rgb(233, 69, 0);

float: left;

margin: 10px 0px 10px 2.5%;

width: 46%;

}

18.Next you will change the style of the field set legends, defining each legend to appear as white text on a medium red background. Directly below the style rule for the field set selector, add the following style rule:

legend{

background-color: rgb(233, 60, 0);

color: white;

padding: 3px 0px;

text-indent: 5px;

width: 100%;

}

Save your changes to the file.

19.Since the default style for labels and input controls is to display them inline, they appear to run together on the form. We will display them as blocks and float them side-by-side within the two field sets to make them easier to read. At the bottom of the style sheet, add the following style rule for the form labels:

/* Label styles */

label{

clear: left;

display: block;

float: left;

font-size: 0.9em;

margin: 7px 4% 7px 5px;

width: 40%;

}

20.Below the style rule you just created, add the following style rule for the input controls:

/* Input control styles */

input{

display: block;

float: left;

font-size: 0.9em;

margin: 7px 0px;

width: 50%;

}

21.Save your changes to the forms.css file and then return to the survey.htm file in your text editor. Below the link element that links the file to the rb.css style sheet, add the following element to link to the forms.css style sheet:

22.Save your changes to the file and then refresh the survey.htm in your Web browser to see the revised appearance of the Web form.

23. Not all of the input boxes need to have a width of 50%. The input box for the state field only needs to be large enough to display the two-letter abbreviation of the state name. We are going to reduce the size of this input box. Return to the forms.css file in your text editor and add the following style rule at the bottom of the file:

input#state{

width: 50px;

}

Save the changes to the file and then refresh survey.htm in your Web browser to see that the width of the input box for the state field has been reduced.

24.More than 90% of Red Ball Pizza customers come from Ormond Beach in Florida. Rather than forcing these customers to enter the same city and state information in the survey form, we will specify Ormond Beach, FL as the default city and state values. To define a default value, you add the value= attribute to any form control. By default, when the form is opened in the browser, that value will appear in the box. Return to the survey.htm file in your text editor and scroll down to the input element for the city field. Add the attribute value= “Ormond Beach” to the <input> tag as follows:

<input name= “city” id= “city” value= “Ormond Beach” />

25.Add the attribute value= “FL” to the <input> tag for the state field.

<input name= “state” id= “state” value= “FL” />

Save your changes to the file and then refresh survey.htm in your Web browser to verify that the input boxes for the city and state show the text values, Ormond Beach and FL, respectively.

26.HTML 5 allows you to put placeholders in your input boxes. A placeholder is text that appears within the control element and provides users with information about the kind of information accepted by the field. To create a placeholder, add the placeholder= attribute. We will add placeholders to the custname, postal code, phone number and receipt input boxes. Return to the survey.htm file in your text editor and scroll to the input element for the custname field. Add the following attribute to the <input> tag:

<input name= “custname” id= “custname”

placeholder= “first and last name” />

27.Add the attribute placeholder= “nnnnn (-nnnn)” to the input element for the zip field.

28. Add the attribute placeholder= “(nnn) nnn-nnnn” to th input element for the phone field.

29. Finally, add the attribute placeholder= “re-nnnnnn” to the input element for the receipt field.

30. Save your changes to the file and then refresh survey.htm in your Web browser to see the placeholder text that has been added to the custname, zip, phone and receipt input boxes. Notice that placeholder text is distinguished from default text by appearing in a grayed-out font.

31. The next part of the survey records how customers place their orders from Red Ball Pizza. A customer order can be placed in one of four ways; pick-up, delivery, dine in or in the case of pizzas, uncooked pizzas that customers can take home and bake. We are going to develop a selection list with a predetermined group of options using the <select name= >and <option value= > tags. Return to the survey.htm file in your text editor and scroll down to the bottom of the second field set. Directly before the closing </fieldset> tag, add the following code:

<label for= “ordertype”>Order type</label>

<option value= “type1”>Carry out</option>

<option value= “type2”>Delivery</option>

</select>

32. Save your changes to the file. We also need to set the style of the select element so that, like the input boxes you created in the last session, it’s floated alongside its label and its font size and margin space are set to match the layout of the survey form. Go to the form.css file in your text editor. At the bottom of the file, add the following:

/* Selection list styles */

select{

display: block;

float: left;

font-size: 0.9em;

margin: 7px 0px;

}

33.Save your changes to the style sheet and then open the survey.htm file in your Web browser. The survey form now displays a selection list for the type of order. Click the selection list arrow and verify that all of the order type options are shown.

34. The first option in a selection list is the field’s default value. To specify a different default value and to display a different option from the selection list, add the selected attribute to the option element. Return to the survey.htm file in your text editor and add the selected= “selected” attribute to the Dine in option.

Save your changes to the file and then reopen survey.htm in your Web browser to verify that the Dine in option is preselected in the order type list.

35.We are now going to add another selection list to add to the survey form, recording where the customer heard of Red Ball Pizza. The survey will present the user with five options; the internet, a magazine, a newspaper, word of mouth or other. We will also display all of the options by setting the value of the size to 5 which will display all 5 options in the box. Return to the survey.htm file in your text editor and add the following label and selection list directly below the email field:

<label>Where did you hear about us?</label>

<option value= “internet”>Internet</option>

<option value= “mag”>Magazine</option>

<option value= “news”>Newspaper</option>

<option value= “word”>Word of Mouth</option>

<option value= “other”>Other</option>

</select>

36.Save your changes to the file and then reopen survey.htm in your Web browser to verify that the selection list appears with all five options displayed.

37. In the code that you just entered, customers are limited to a single option. A customer could have heard about Red Ball Pizza from more that one source. Multiple selections can be applied to a selection list by adding the multiple attribute to the select element. Return to the survey.htm file in your text editor and then add the following text to the label element for the infoSrc selection list:

<br />(select all that apply)

Add the attribute multiple= “multiple” to the select element as follows:

<label>Where did you hear from us? br />(select all that apply)</label>

<select name= “infoScr” id= “infoSrc” size= “5” multiple= “multiple”>

38.Save your changes to the file and then reopen survey.htm in your Web browser to verify that you can now select multiple items from the information source list using the ctrl+click, command+click or shift+click keyboard and mouse combinations.

39. The next part of the form will ask customers general questions about their experiences at the restaurant. The questions will ask about whether the service was friendly, whether orders were recorded correctly and if the food was delivered hot. To create option buttons, also called radio buttons, are like selection lists in that they limit users to a set of possible values, but unlike selection lists because the options appear as separate control elements on the form. Option buttons are created using the input element with the type attribute set to a value of radio. Return to the survey.htm file in your text editor and then scroll down to the second field set. Directly aftere the ordertype selection list, add the following code:

<label>Was your service friendly?</label>

<input type= “radio” name= “serviceFriendly” id= “sYes”

value= “yes” />

<input type= “radio” name= “serviceFriendly” id= “sNo”

value= “no” />

</fieldset>

40.Save your changes to the file and then reopen survey.htm in your Web browser to see the current appearance of the option buttons. Click each option button to confirm that clicking one option deselects the other. Also verify that when you click the labels next to the option buttons, the option buttons become selected.

41. The option buttons take up more space than necessary would look better if they were all on a single line. We will create a style rule to display the labels and option buttons as inline elements, reduce their widths, resize their margins and prevent them from floating. We will also remove the border from the fieldset element that contains the option labels and controls. Go to the forms.css file in your text editor. At the bottom of the file, insert the following style rules:

/* Option button styles */

fieldset.optionGroup{

border-width: 0px;

}

fieldset.optionGroup label{

display: inline;

float: none;

margin: 0px 3px 0px 0px;

width: 30px;

}

fieldset.optionGroup input{

display: inline;

float: none;

margin: 0px 20px 0px 0px;

width: 20px;

}

42.Save your changes to the file and then reopen the survey.htm file in your Web browser to see the revised appearance of the option button group.

43. We are going to add two more option button groups: one to find out whether the customer’s order was delivered correctly and the other to find out if the food was presented hot. Return to the survey.htm file in your text editor. Directly below the fieldset element for the serviceFriendly field, add the following HTML code:

<label>Was your order correct?</label>

<input type= “radio” name= “orderCorrect” id= “oYes”

value= “yes” />

<input type= “radio” name= “orderCorrect” id= “oNo”

value= “no” />

</fieldset>

<input type= “radio” name= “foodHot” id= “hotYes”

value= “yes” />

<input type= “ radio” name= “foodHot” id= “hotNo”

value= “no” />

</fieldset>

44.Save your changes to the file and then reopen the survey.htm file in your Web browser to view all of the option button groups in the survey form.

45. We are going to create a place where customers can enter extended comments about Red Ball Pizza. Because an input box is limited to a single line of text, we will use the textarea element to create a control element that allows for extended text entries. Return to the survey.htm file in your text editor. Directly below the fieldset element for the footHot option group that you just created, enter the following code:

<label for= “comments”>Tell us more about your experience</label>

46.Save your changes to the file and then return to the forms.css file in your text editor. At the bottom of the style sheet, insert the following style rule:

/* Text area styles */

textarea{

display: block;

font-size: 0.9em;

float: left;

height: 150px;

margin: 10px 0px;

width: 50%;

}

47.Save your changes to the file and then reopen the survey.htm file in your Web browser to see the newly added text area box. Type some words into the text box to verify that the text wraps to a new line as you exceed the width of the box.

48. Red Ball Pizza has an e-mail newsletter that it sends out to subscribers detailing the latest news about the restaurant and informing patrons about upcoming events and special deals. We are going to give customers filing out the survey form a way of subscribing to the newsletter using a check box. Check boxes are created using the input element with the type attribute set to checkbox. Return to the survey.htm file in your text editor. Directly above the closing </form> tag, insert the following code:

E-mail me your newsletter for great coupons and specials!</label>

Save your changes to the file.

49.Go to the forms.css file in your text editor. At the bottom of the file, insert the following style rules:

/* Check box styles */

#newsletter{

color: rgb(233, 69, 0);

float: none;

margin: 10px auto;

text-align: center;

width: 90%;

}

#newsletter input{

display: inline;

float: none;

width: 20px;

}

50.Save your changes to the style sheet and then refresh survey.htm in your Web browser to see the current state of the Web form.

51. We are going to add a data field for the number of times a customer dines out per month, and data fields in which customers can provide a numeric rating of Red Ball Pizza’s food and service quality. So far we have only included data that has recorded text data. The email, tel and url data types are used for storing e-mail addresses, telephone numbers and Web addresses, respectively. First, we will apply the email and tel data types. After applying these data types, when using an IPad or any device that uses virtual keyboards, the keyboard layout is altered in response to these different data types. Return to the survey.htm file in your text editor. Scroll down to the input element for the phone field and insert the attribute type= “tel”. Insert the attribute type= “email” into the input element for the email field.

<input name= “email” id= “email” type= “email” />

52.Save your changes to the file. Unfortunately, this can only be tested if you were using a mobile device that uses a virtual keyboard.

53. Next we will set the data type of the visitdate field to date. This will bring up a box with spin arrows and a calendar widget that can be used to enter a date. Return to the survey.htm file in your text editor. Locate the input element for the visitdate field and insert the attribute type= “date” as follows:

<input name= “visitdate” id= “visitdate” type= “date” />

54.Save your changes to the file. Open the survey.htm in your Web browser and click the input box for the date of the customer’s visit to Red Ball Pizza to verify the changes.

55. Next we will add the number Data type to record the number of times a typical Red Ball Pizza customer dines out per month. This will be displayed using a spinner control in which users click an up or down arrow to increase or decrease the field value, respectively. The default effect of clicking the spin arrow is to change the field value by one unit. You can specify a different amount for the value to change and identify the minimum and maximum values of the field using the step, min and max attributes. The step attribute indicates the amount by which the field value changes when a user clicks the spin arrow, the min attribute defines the minimum possible value and the max attribute defines the maximum possible value of the field. Return to the survey.htm in your text editor. Directly below the selection list for the infoSrc field, insert the following code:

How many times do you dine out per month?

</label>

<input name= “ordersPerMonth” id= “ordersPerMonth”

type= “number” value= “1”

min= “0” max= “10” step= “1” />

56.Save your changes to the file. We are going to add a style rule so that this input box is 70 pixels wide. Go to forms.css in your text editor and add the following style rule at the bottom of the file:

/* Number input box styles */

#ordersPerMonth{

width: 70px;

}

57.Save your changes to the file and refresh survey.htm in your Web browser to see the appearance of the input box.

58. Now we will allow the customers to rate the Red Ball Pizza service and food quality on a numeric scale for 0-10. We will be using the range data type. The range data type displays a slider in which the data value is selected by sliding a marker horizontally across a bar. We will create a range slider now for the serviceRating and qualityRating fields, which are designed to record the customer’s rating of Red Ball Pizza’s service and food quality. Return to the survey.htm file in your text editor. Directly above the label for the textarea element, insert the following code:

<label>Rate the overall service<br /> (0 = poor; 10 = great)</label>

<input name= “service” id= “service” type= “range” value= “5”

min= “0” max= “10” step= “1” />

<label>Rate the food quality<br /> (0 = “poor; 10 = “great”)</label>

<input name= “quality” id= “quality” type= “range” value= “5”

min= “0” max= “10” step= “1” />

59.Save your changes to the file and then refresh the survey.htm in your Web browser to see the appearance of the two sliders. Notice that the default value of 5 is represented by placing the slider marker in the exact center of the 0 to 10 range. Drag the marker on the slider back and forth to confirm that the widget works as expected.

60. A problem with the range slider is that the minimum and maximum values represented on the slider bar are not displayed on the widget, so there is no indication of what value is actually being selected and stored in the data field. To add that information, you will insert a label directly before and directly after the range slider to tell users that the minimum value on the slider represents 0 and the maximum value represents a 10. Return to the survey.htm file in your text editor. Directly before the input element for the service range slider, insert the following label element:

Directly after the input element for the service range slider, insert the following label element:

Repeat these steps for the input element for the food quality range slider.

61.Next we have to create a style rule for these new labels so that they appear alongside the range sliders. You also have to resize the labels and the sliders to make them fit within the width of the field set. Go to the forms.css file in your text editor. At the bottom of the file, insert the following style rules: Note that you have to specifically not clear the label text so that it floats alongside the other objects within that line on the form.

/* Range slider styles */

label.sliderLabel{

clear: none;

font-size: 0.7em;

margin: 10px 0px;

text-align: center;

width: 10px;

}

input[type= “range”]{

width: 150px;

}

62.Save your changes to the file and then refresh survey.htm in your Web browser to see the appearance of the range slider.

63. The last data field that we will add to the survey form is a text box in which customers can indicate their favorite Red Ball Pizza dish. There would be a lot of possible answers so we do not want to limit the options to a selection list but we will provide suggestions to customers as they type their entries. For example, as the user types a B, the text box will display entries such as Big Kahuna, BBQ Chicken Pizza. We will create this effect using the datalist element. We will add an input box for the favDish field to the survey form. Return to the survey.htm file in your text editor. Directly below the input box for the ordersPerMonth field, insert the following code:

<label for= “favDish”>What’s your favorite Red Ball dish?</label>

</datalist>

64.Save your changes to the file and then reopen survey.htm in your Web browser. Click the input box for the favDish field and type the letter P to see the display of two menu items that begin with the letter P.

65. We have completed all of the fields for the survey form but need to add a way to submit the form for processing. To do that, you will create two form buttons. A submit button submits a form to the server for processing when clicked. Clicking a reset button resets the form, changing all field values to their original default values and deleting any values that a user might have entered into the form. Return to the survey.htm file in your text editor. Scroll to the bottom of the file. Directly above the closing </form> tag, insert the following code:

<p>

</p>

66.Save your changes to the file. Next you will create style rules so that the submit and reset buttons appear centered below the rest of the form content. Go to the forms.css file in your text editor. At the bottom of the file, insert the following code:

/* Button styles */

form p{

text-align: center;

}

input[type= “submit”], input[type= “reset”]{

display: inline;

float: none;

height: 40px;

width: 200px;

67.Save your changes to the file and then refresh the survey.htm file in your Web browser to see the completed Web page.

68. The final part of your work on the survey is to test your ability to submit values from the form. Data values often need to be tested or validated before they can be used. In the survey form, we have indicated that the custname, email and receipt fields must be completed for the survey to be valid. If any of those fields are left blank the browser should notify the user of the missing data and cancel the submission. You can also indicate that a field is required by adding the required= “required” attribute to the control element. If a required field is left blank, and the submit button is clicked, the browser will cancel the submission and display an error message. Return to the survey.htm file in your text editor. Add the attribute required= “required to the input element for the custname field at the top of the form.

<input name= “custname” id= “custname”

placeholder= “first and last name”

required= “required” />

Scroll down to the input element for the email field and then add the attribute required= “required”.

Go to the receipt field and then add the attribute required= “required” to the input element.

69.Save your changes to the file and then refresh survey.htm. Leaving the form blank, click the Submit My Survey button. The browser does not submit the form and displays an error message for the first invalid field it encounters.

70.Several fields in the survey form are required to follow a pattern of characters. For example, the receipt numbers from Red Ball Pizza all follow the pattern re-nnnnnn where n is a single digit. Thus, a receipt labeled re-123456 would be valid but receipt number such as 123456 would not. Phone numbers and postal codes are also required to follow a pattern of characters to be valid. To test whether a field value follows a valid pattern of characters, you can test the character string against a regular expression. A regular expression or regex is a concise description of a character pattern. To validate a text value against the regular expression, add the attribute pattern= “regex” to the control element, where regex is the regular expression pattern. In your student data file, you will find the regular expressions needed for your survey in the regex.txt file where you could copy and paste the complicated patterns. Return to the survey.htm file in your text editor. Within the input element for the zip field, insert the following regular expression pattern that tests for the presence of a five or nine digit postal code: (You can carefully type it from here or go to the regex.txt file and copy and paste it.)

<label for= “zip”>postal code</label>

<input name= “zip” id= “zip”

placeholder= “nnnnn (-nnnn)”

pattern= “^\d{5}(\d{4})?$”

Go to the input element for the phone field. Change the data type from type=”tel” to type= “text” and add the following attribute that tests for a valid phone number pattern:

pattern= “^\d{10}$|^($\d{3}$\s*)?\d{3}[\s-]?\d{4}$”

Scroll down to the input element for the receipt field and insert the following attribute that tests for a valid receipt number:

pattern= “^re\-\d{6}$”

71.Save your changes to the file and then refresh survey.htm in your Web browser. Enter some text in the Name input box. Type 321 in the input box for the postal code and then submit the form. The browser rejects the field value because it does not match the pattern of either a five digit or a nine digit postal code. Change the value of the zip field to 32175 and then resubmit the form. Verify that the form is submitted without error. Try entering values for the phone and receipt numbers, verifying that the form is rejected when invalid values are entered. Enter (386) 555-7499 for the phone field and re-123456 for the receipt field and submit the form.

72.One disadvantage with the current validation checks is that they all occur after a user has completed and submitted the form. It is extremely annoying for a user to go back to an already completed form to fix an error. Studies have shown that users are less likely to make errors and can complete a form faster if they are informed of data entry errors as they occur. The technique of immediate data validation and reporting of errors is known as inline validation. One way of integrating inline validation into a Web form is to create style rules that change the appearance of each control element based on the validity of the data it contains. This can be done using some of the CSS pseudo-classes. The first pseudo-class you will apply to the survey form will be used to change the background color of any element that has the focus. Focus refers to the state in which an element has been clicked by the user, making it the active control element on the form. We are going to make the control elements that have the focus to be displayed with a light green background color. Return to the forms.css file in your text editor. At the bottom of the file, insert the following style rule:

/* Validation styles */

input:focus, select:focus, textarea:focus{

background-color: rgb(220, 255, 220);

}

73.Save your changes to the file and then refresh survey.htm in your Web browser. Click the input box for the street field and verify that the background color changes to a light green as the input box receives the focus.

74. The valid and invalid pseudo-classes can be used to create styles for control elements based on whether the field value associated with a control is valid or invalid. A style rule for invalid displays all input elements for invalid data with a light red background and the style rule for valid displays all input elements for valid data with a light green background. Return to the forms.css file in your text editor. At the bottom of the file, add the following style rule for input boxes containing valid data:

input:focus:valid{

background: rgb(220, 255, 220) url(go.png) bottom right no-repeat;

-o-background-size: contain;

-moz-background-size: contain;

-webkit-background-size;

background- size: contain;

}

input:focus:invalid{

background: rgb(255, 232, 233) url(stop.png) bottom right no-repeat;

o-background-size: contain;

-moz-background-size: contain;

-webkit-background-size: contain;

background-size: contain;

}

75. Save your changes to the file and then refresh survey.htm in your Web browser. Test the inline validation by typing the postal code value 32175-6136 into the zip field. Note that the background of the input box provides immediate visual feedback on whether the data value you enter is currently valid or invalid.

Web Design 1

Thursday, June 26, 2014

Unit 6. Tutorial 6- Red Ball Pizza Web Form

No comments:

Post a Comment