The "Online Ordering" page for Red Ball Pizza is shown below. Download the files from the previous link and complete the web document following the instructions for the assignment described below.
Complete the following:
head
section
element, insert
a form
element with the name
and id
"pizza" that has the action
"http://www.redballpizza.com/cgi-bin/buildpizza"
and uses the post
method
fieldset
elements:
id
"custInfo" and the legend
text "Customer Information"
id
"buildPizza" and the legend
text "Build Your Own Pizza"
fieldset
:
label
"Name *"
with a for
attribute to a text
input
box for the "custName" field;
add the placeholder
text "First and
Last Name" and make the field required
label
"Delivery Address *" with a
for
attribute to a textarea
box
for the "delivery" field; make the field required
label
"Phone *" with a for
attribute to a type
"phone" input
box for the "phone" field; add the placeholder
text "(nnn) nnn-nnnn" and make the field required
;
the text of the input
box should follow the regular
expression pattern
:^\d{10}$|^(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}$
label
"Delivery Time (leave blank for
immediate delivery)" (with the text in parentheses on a separate
line) with a for
attribute to a type
"time" input
box for the "delTime" field
fieldset
:
img
and add
the id
"sizeImage" to the inline image
label
text "Select Your Pizza Size (10, 12, or 14 inch) placing the
text in parentheses on a new line; set the default value to
12, the minimum value to 10,
the maximum to 14, and the step value to
2
select
list for the "crust" field along
with the label
text "Choose Your Crust"; this
select
list should display the option
text "Thin", "Thick", "Stuffed" and "Pan" with option
values equal to the option
text
label
text "Quantity (call for quantities
larger than 10 pizzas)" with the text in parentheses on a new line;
the field has a default value of 1 and ranges from
1 to 10 with increments of
1 unit
textarea
for the "instructions" field with
the label
text "Special Instructions"
fieldset
create two
sub-fieldset
elements:
id
"meat" and the
legend
text "Meat Toppings"
id
"vegetables" and the
legend
text "Vegetable Toppings"
fieldset
:
label
with the text "Location" followed by
four inline images for the "full.png", "left.png", "right.png",
and "none.png" files with the alt
text "full",
"left", "right" and "none" respectively
input
radio buttons for
the "pepperoni" field with the field values "full", "left",
"right" and "none" respectively with the "none" option
checked
by default; nest the four radio buttons
within a fieldset
element belonging to the
class
"optionGroup"
fieldset
,
creating input
radio button groups for Mushrooms,
Green Peppers, Onions, Tomatoes and Jalapenos, and naming the
fields "mushrooms", "greenPeppers", "onions", "tomatoes" and
"jalapenos" respectively
fieldset
, create two checkboxes:
input
checkbox for the "doubleCheese" field with
the label
text "Add Double Cheese"
input
checkbox for the "doubleSauce" field with
the label
text "Add Double Sauce"
fieldset
, create an
input
submit button with the button
text "Next"
fieldset
elements as follows:
fieldset
elements with a background-color
value of (255, 246, 205) and with a solid 1-pixel border
and color value of (233, 69, 0)
float
for the fieldset
elements on the
left with a 1% margin
width
of the "custInfo" fieldset
to 35%, the width
of the "buildPizza" fieldset
to 60%, and the width
of the "meat" and "vegetables"
fieldset
elements to 47% each
background-color
of the "meat" and "vegetables"
fieldset
elements to a color
value
(237, 178, 74)
font-size
of the field set legend
elements to "0.9em"
label
elements as block
with
a font-size
of "0.8em"; float
the label
elements on the left only when the left margin is clear
;
set the width
of the label
to 40% of the
containing element; set the top-margin
and bottom-margin
to 5 pixels and set the size of the left-padding
space
to 5 pixels
input
elements and textarea
elements as block
set to float
on the "left";
set the width
to 50% with top-margin
and
bottom-margin
of 5 pixels; set the height
of the textarea
elements to 100 pixels
img
elements nested within a form
as block
set to float
on the "left" with
top-margin
and bottom-margin
of 5 pixels
width
of the "delTime" input
box
to 150 pixels
left-margin
of the "sizeImage" inline img
to 40%; set the width
of the size
field
range slider to 200 pixels; make the background
of the
"size" field range slider transparent
float
the select
list for the
"crust" field on the left with a font-size
of 0.8 em;
set the top-margin
and bottom-margin
to
5 pixels and the width
to 150 pixels
width
of the spinner control for
the "quantity" field to 40 pixels
width
of fieldset
elements that
belong to the class
"optionGroup" to 50%; remove the
border
from this fieldset
and make the
background
transparent
width
of input
radio buttons to
30 pixels and the width
of input
checkboxes
to 20 pixels
width
of the input
submit button
to 150 pixels, set the float
property to "none", and
set the top-margin
and bottom-margin
to
zero (0) pixels and the left-margin
and right-margin
to "auto"
input
element, select
element,
or textarea
element receives the focus, set the
background-color
to the value (220, 255, 220)
input
element receives the focus and is valid,
set the background-color
to the value (220, 255, 220)
displaying the background-image
"okay.png" at the
bottom-right corner with no tiling; size the background-image
so that it is contained within the input
box
input
elements that receive
the focus and are invalid, setting the background-color
to the value (255, 232, 233) and the background-image
to the file "warning.png"