perform a validation for this Html and css and correct all the error that exist.

ID: 3857260 • Letter: P

Question

perform a validation for this Html and css and correct all the error that exist.

HTML

<!DOCTYPE html>
< html>

<head>
< meta charset="utf-8" />
< meta name="viewport" content="width=page-width, initial-scale=1.0">
< title>Happy Flowers - Order</title>
< link rel="stylesheet" href="happyjavascript.css" />
< link href="http://fonts.googleapis.com/css?family=Tangerine" rel='stylesheet' type='text/css'>

</head>

<body>
< div class="container">
< header>
< h1>Happy Flowers
< /h1>
< /header>
< nav>
< ul>
< li><a href="#">Floral Arrangements</a></li>
< li><a href="#">Seasonal Bouquets</a></li>
< li><a href="#">Live Plants</a></li>
< li><a href="#">Shop by Price</a></li>
< /ul>
< /nav>
< /div>
< article id="text">
< h2>Place an Order</h2>
< div id="errorText"></div>
< form action="results.htm">
< fieldset id="message" class="checks">
< legend>Message</legend>
< ul class="checkbox">
< li>
< input type="checkbox" id="chkCongratulations" name="" value="Congratulations!"><label for="Congratulations">Congratulations!</label></li>
< li>
< input type="checkbox" id="chkHappyBirthdy" name="" value="Happy Birthdy!"><label for="HappyBirthdy">Happy Birthdy!</label></li>
< li>
< input type="checkbox" id="chkHappyAnniversary" name="" value="Happy Anniversary!"><label for="HappyAnniversary">Happy Anniversary!</label></li>
< li>
< input type="checkbox" id="chkILoveyou" name="" value="I Love you!"><label for="ILoveyou">I Love you!</label></li>
< li>
< input type="checkbox" id="chkCustommessage" name="" value=""><label for="Custommessage">Custom message:</label></li>
< /ul>
< textarea placeholder="Enter custom message here (max 250 characters)" id="txtArea"></textarea>

</fieldset>
< fieldset id="billingAddress" class="text">
< legend>Billing Address</legend>
< label for="fname">First Name</label>
< input type="text" id="FName" name="fname">
< label for="lname">Last Name</label>
< input type="text" id="lname" name="lname">
< label for="Staddress">Street Address</label>
< input type="text" id="Staddress" name="Staddress">
< label for="city">City</label>
< input type="text" id="city" name="city">
< label for="State">State</label>
< select id="state">
< option value="AL">Alabama</option>
< option value="AK">Alaska</option>
< option value="AZ">Arizona</option>
< option value="AR">Arkansas</option>
< option value="CA">California</option>
< option value="CO">Colorado</option>
< option value="CT">Connecticut</option>
< option value="DE">Delaware</option>
< option value="DC">District Of Columbia</option>
< option value="FL">Florida</option>
< option value="GA">Georgia</option>
< option value="HI">Hawaii</option>
< option value="ID">Idaho</option>
< option value="IL">Illinois</option>
< option value="IN">Indiana</option>
< option value="IA">Iowa</option>
< option value="KS">Kansas</option>
< option value="KY">Kentucky</option>
< option value="LA">Louisiana</option>
< option value="ME">Maine</option>
< option value="MD">Maryland</option>
< option value="MA">Massachusetts</option>
< option value="MI">Michigan</option>
< option value="MN">Minnesota</option>
< option value="MS">Mississippi</option>
< option value="MO">Missouri</option>
< option value="MT">Montana</option>
< option value="NE">Nebraska</option>
< option value="NV">Nevada</option>
< option value="NH">New Hampshire</option>
< option value="NJ">New Jersey</option>
< option value="NM">New Mexico</option>
< option value="NY">New York</option>
< option value="NC">North Carolina</option>
< option value="ND">North Dakota</option>
< option value="OH">Ohio</option>
< option value="OK">Oklahoma</option>
< option value="OR">Oregon</option>
< option value="PA">Pennsylvania</option>
< option value="RI">Rhode Island</option>
< option value="SC">South Carolina</option>
< option value="SD">South Dakota</option>
< option value="TN">Tennessee</option>
< option value="TX">Texas</option>
< option value="UT">Utah</option>
< option value="VT">Vermont</option>
< option value="VA">Virginia</option>
< option value="WA">Washington</option>
< option value="WV">West Virginia</option>
< option value="WI">Wisconsin</option>
< option value="WY">Wyoming</option>
< /select>

< label for="zip">Zip</label>
< input type="text" id="zip" name="zip">
< label for="phone">Phone</label>
< input type="text" id="phone" name="phone">
< /fieldset>

<fieldset id="deliveryAddress" class="text">
< legend>Delivery Address</legend>
< ul class="checkbox">
< li>
< input type="checkbox" name="" value="" id="deliveyAdd"><label for="fname">Same as billing address</label></li>
< /ul>
< br/>
< label for="fname">First Name</label>
< input type="text" id="delfname" name="fname">
< label for="lname">Last Name</label>
< input type="text" id="dellname" name="lname">
< label for="Staddress">Street Address</label>
< input type="text" id="delStaddress" name="Staddress">
< label for="City">City</label>
< input type="text" id="delCity" name="City">
< label for="State">State</label>
< select id="delstate">
< option value="AL">Alabama</option>
< option value="AK">Alaska</option>
< option value="AZ">Arizona</option>
< option value="AR">Arkansas</option>
< option value="CA">California</option>
< option value="CO">Colorado</option>
< option value="CT">Connecticut</option>
< option value="DE">Delaware</option>
< option value="DC">District Of Columbia</option>
< option value="FL">Florida</option>
< option value="GA">Georgia</option>
< option value="HI">Hawaii</option>
< option value="ID">Idaho</option>
< option value="IL">Illinois</option>
< option value="IN">Indiana</option>
< option value="IA">Iowa</option>
< option value="KS">Kansas</option>
< option value="KY">Kentucky</option>
< option value="LA">Louisiana</option>
< option value="ME">Maine</option>
< option value="MD">Maryland</option>
< option value="MA">Massachusetts</option>
< option value="MI">Michigan</option>
< option value="MN">Minnesota</option>
< option value="MS">Mississippi</option>
< option value="MO">Missouri</option>
< option value="MT">Montana</option>
< option value="NE">Nebraska</option>
< option value="NV">Nevada</option>
< option value="NH">New Hampshire</option>
< option value="NJ">New Jersey</option>
< option value="NM">New Mexico</option>
< option value="NY">New York</option>
< option value="NC">North Carolina</option>
< option value="ND">North Dakota</option>
< option value="OH">Ohio</option>
< option value="OK">Oklahoma</option>
< option value="OR">Oregon</option>
< option value="PA">Pennsylvania</option>
< option value="RI">Rhode Island</option>
< option value="SC">South Carolina</option>
< option value="SD">South Dakota</option>
< option value="TN">Tennessee</option>
< option value="TX">Texas</option>
< option value="UT">Utah</option>
< option value="VT">Vermont</option>
< option value="VA">Virginia</option>
< option value="WA">Washington</option>
< option value="WV">West Virginia</option>
< option value="WI">Wisconsin</option>
< option value="WY">Wyoming</option>
< /select>

< label for="zip">Zip</label>
< input type="text" id="delZip" name="zip">
< label for="phone">Phone</label>
< input type="text" id="delPhone" name="phone">
< /fieldset>
< fieldset id="deliveryDate" class="checks">
< legend>Delivery Date</legend>
< form>
< input type="date" name="Ddate" id="date">
< /form>
< /fieldset>

<fieldset id="paymentInfo" class="text">
< legend>Payment</legend>
< ul class="checkbox">
< li>
< input type="radio" name="Card" id="Visa" value="Visa">< label for="Visa">Visa</label>
< /li>
< li>
< input type="radio" name="Card" id="Master Card" value="Master Card">
< label for="Master Card">Master Card</label></li>
< li>
< input type="radio" name="Card" id="Discover" value="Discover">
< label for="Discover">Discover</label></li>
< li>
< input type="radio" name="Card" id="American Express" value="American Express">
< label for="American Express">American Express</label></li>
< /ul>

<label for="CardNumber">Card #</label>
< input type="text" id="CardNumber" name="CardNumber">
< label for="expiry">Expiration</label>
< select name='expireMM' id='expireMM'>
< option value=''>Month</option>
< option value='01'>January</option>
< option value='02'>February</option>
< option value='03'>March</option>
< option value='04'>April</option>
< option value='05'>May</option>
< option value='06'>June</option>
< option value='07'>July</option>
< option value='08'>August</option>
< option value='09'>September</option>
< option value='10'>October</option>
< option value='11'>November</option>
< option value='12'>December</option>
< /select>
< select name='expireYY' id='expireYY'>
< option value=''>Year</option>
< option value='17'>2017</option>
< option value='18'>2018</option>
< option value='19'>2019</option>
< /select>
< input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" />
< label for="#CVV">CVV</label>
< input type="text" id="CVV" name="CVV">
< /fieldset>

<fieldset id="createAccount" class="text">
< legend>Create Account</legend>

<p>
To be able to access your purchase history and make changes to your order,
enter a name and password to create an account.
< /p>

<label for="Uname">Username</label>
< input type="text" id="Uname" name="Uname">
< label for="Pass">Password</label>
< input type="text" id="Pass" name="Pass">
< label for="Passv">Password (verify)</label>
< input type="text" id="passv" name="passv">

</fieldset>

<div id="buttonContainer">
< input type="submit" value="Place Order" id="orderButton" />
< /div>
< /form>
< /article>
< article class="hide" id="result">
< h2>Your form has been submitted</h2>
< form>
< fieldset class="checks">
< legend>you enter are following data</legend>
< div id="appendfieldset"></div>
< /fieldset>
< /form>
< /article>
< footer>Happy Flowers <span>•</span> Chicago, IL</footer>

//check the same as billing address function.
function checkedFun() {
if (document.getElementById('deliveyAdd').checked) {
document.getElementById('delfname').value = document.getElementById("FName").value;
document.getElementById('dellname').value = document.getElementById("lname").value;
document.getElementById('delStaddress').value = document.getElementById("Staddress").value;
document.getElementById('delCity').value = document.getElementById("city").value;
document.getElementById('delZip').value = document.getElementById("zip").value;
document.getElementById('delPhone').value = document.getElementById("phone").value;
document.getElementById('delstate').value = document.getElementById("state").value;

}

//Submit button click function
function submitFun() {
var text = '';
document.getElementById('text').className = "hide";
document.getElementById('result').className = "show";
if (document.getElementById('chkCongratulations').checked) {
text += "<label>CustomText = " + document.getElementById('chkCongratulations').value + "</label>";
}

if (document.getElementById('chkHappyBirthdy').checked) {
text += "<label>CustomText = " + document.getElementById('chkHappyBirthdy').value + "</label>";
}

if (document.getElementById('chkHappyAnniversary').checked) {
text += "<label>CustomText = " + document.getElementById('chkHappyAnniversary').value + "</label>";
}

if (document.getElementById('chkILoveyou').checked) {
text += "<label>CustomText = " + document.getElementById('chkILoveyou').value + "</label>";
}

if (document.getElementById('chkCustommessage').checked) {
text += "<label>CustomText = " + document.getElementById('txtArea').value + "</label>";
}

text += "<label>Billing First Name = " + document.getElementById("FName").value + "</label>";
text += "<label>Billing Last Name = " + document.getElementById("lname").value + "</label>";
text += "<label>Billing Steet Address = " + document.getElementById("Staddress").value + "</label>";
text += "<label>Billing City = " + document.getElementById("city").value + "</label>";
text += "<label>Billing State = " + document.getElementById("state").value + "</label>";
text += "<label>Billing Zip = " + document.getElementById("zip").value + "</label>";
text += "<label>Billing Phone = " + document.getElementById("phone").value + "</label>";

text += "<label>Delivery First Name = " + document.getElementById("FName").value + "</label>";
text += "<label>Delivery Last Name = " + document.getElementById("lname").value + "</label>";
text += "<label>Delivery Steet Address = " + document.getElementById("Staddress").value + "</label>";
text += "<label>Delivery City = " + document.getElementById("city").value + "</label>";
text += "<label>Delivery State = " + document.getElementById("state").value + "</label>";
text += "<label>Delivery Zip = " + document.getElementById("zip").value + "</label>";
text += "<label>Delivery Phone = " + document.getElementById("phone").value + "</label>";

//for delivery date
text += "<label>Delivery Date = " + document.getElementById("date").value + "</label>";

//for payment
var radios = document.getElementsByName('Card');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
text += "<label>payment Type = " + radios[i].value + "</label>";

}
}

text += "<label>CardNumber = " + document.getElementById("CardNumber").value + "</label>";
text += "<label>Exp Month = " + document.getElementById("expireMM").value + "</label>";
text += "<label>Exp Year = " + document.getElementById("expireYY").value + "</label>";
text += "<label>CVV Value = " + document.getElementById("CVV").value + "</label>";

text += "<label>UserName = " + document.getElementById("Uname").value + "</label>";
text += "<label>Password = " + document.getElementById("Pass").value + "</label>";
text += "<label>Password (verify) = " + document.getElementById("passv").value + "</label>";

document.getElementById('appendfieldset').innerHTML = text;

}
< /script>

</body>
< /html>

-------------

CSS

/* apply a natural box layout model to all elements */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* reset rules */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

body {
line-height: 1;
width: 800px;
margin: 0 auto;
font-family: garamond, 'times new roman', times, serif;
background: rgb(246,245,242);
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

a:link, a:visited {
text-decoration: none;
color: inherit;
}

a:hover {
text-decoration: none;
color: inherit;
}

a:active {
text-decoration: none;
color: inherit;
}
/* container for header and nav */
div.container {
float: left;
}
/* page header */
header {
border: 2px solid rgb(190,50,38);
border-right: none;
padding: 30px 10px;
text-align: center;
line-height: 1.8em;
background: white;
width: 219px;
float: left;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
}

header h1 {
font-family: tangerine, cursive;
font-size: 48pt;
text-transform: lowercase;
color: rgb(190,50,38);
}

header h1 img {
display: inline-block;
}
/* remove blank space for descenders below image */
#accent img {
display: block;
}
/* navigation */
nav {
width: 219px;
padding: 10px;
float: left;
clear: left;
}

nav ul li {
width: 179px;
min-height: 50px;
padding: 10px;
margin: 0 0 10px 10px;
line-height: 2.0em;
font-weight: bold;
font-size: 16px;
background: rgb(124,124,136);
color: white;
text-align: center;
border: 1px solid rgb(0,89,132);
}

nav ul li:hover {
background: rgb(0,89,132);
}
/* main content */
article {
background: #4DA375;
width: 581px;
float: right;
padding: 10px;
}

article h2 {
font-size: 48px;
font-weight: bold;
text-align: center;
font-family: tangerine, cursive;
text-shadow: 10px 0px 17px white, -10px 0px 17px white;
}

article div.results {
background: white;
border-radius: 5px;
margin: 5px 15px 15px;
padding: 5px 30px;
}

article h3 {
font-size: 18pt;
font-weight: bold;
text-align: center;
padding-bottom: 10px;
}

article div.results p {
margin-left: 35%;
padding-bottom: 5px;
}

#errorText {
display: none;
text-align: center;
padding: 10px;
margin: 0 auto;
margin: 15px 15px 0;
background: rgb(124,124,136);
color: white;
border: 2px solid rgb(190,50,38);
}
/* form */
form {
width: 561px;
margin: 0 auto;
padding-bottom: 15px;
}

fieldset {
position: relative;
padding: 5px 30px 70px 30px;
background: white;
border-radius: 5px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 25px;
}

fieldset:last-of-type {
margin-bottom: 0;
}

legend {
font-weight: bold;
font-size: 36px;
font-family: tangerine, cursive;
position: absolute;
padding: 10px 0;
}

input, label, select, textarea, fieldset p, div.errorMessage, #ccNumErrorMessage, #cvvErrorMessage {
position: relative;
top: 50px;
line-height: 1.2em;
}

label, input {
display: block;
}

#expMoLabel, #expYrLabel {
position: absolute;
left: -10000px;
}

#buttonContainer {
width: 100%;
text-align: center;
}

#orderButton {
margin: 0 auto;
font-family: tangerine, cursive;
font-size: 24px;
top: 15px;
-webkit-appearance: none;
display: inline-block;
}

fieldset.checks input, div.checks input {
float: none;
margin-right: 20px;
}

fieldset.checks textarea {
margin-left: 21px;
width: 90%;
height: 50px;
}

fieldset.text label {
width: 8em;
text-align: right;
float: left;
clear: left;
margin-right: 10px;
margin-top: 5px;
}

fieldset.text input, fieldset.text select {
margin-top: 5px;
margin-right: 5px;
}

fieldset div.errorMessage, #ccNumErrorMessage, #cvvErrorMessage {
display: none;
color: red;
margin-top: 10px;
}

#ccNumErrorMessage, #cvvErrorMessage {
margin-left: 8.5em;
}

div.checks label {
width: auto;
text-align: left;
float: none;
clear: none;
}

div.inline label, div.inline input, div.inline select, div.inline div {
display: inline-block;
float: none;
text-align: center;
width: auto;
}

div.inline option {
text-align: left;
}

#billFName, #billLName, #delivFName, #delivLName, #billCity, #delivCity, #billPhone, #delivPhone {
width: 15em;
}

#billStreet, #delivStreet, #billEmail, #delivEmail {
width: 20em;
}

#billZip, #delivZip {
width: 10em;
}

#ccNum {
width: 16em;
}

#cvv {
width: 4em;
}
/* footer */
footer {
width: 581px;
color: white;
background: rgb(124,124,136);
font-size: 16px;
padding: 10px;
text-align: center;
float: right;
}

ul.checkbox {
margin: 0;
padding: 0;
margin-left: 20px;
list-style: none;
}

ul.checkbox li input {
margin-right: .25em;
}

ul.checkbox li {
border: 1px transparent solid;
}

ul.checkbox li label {
margin-left: 24px;
margin-top: -19px;
}

.hide {
display: none;
}

.show {
display: block;
}

Explanation / Answer

HTML

<!DOCTYPE html>
< html>

</head>

< label for="zip">Zip</label>
< input type="text" id="zip" name="zip">
< label for="phone">Phone</label>
< input type="text" id="phone" name="phone">
< /fieldset>

<fieldset id="createAccount" class="text">
< legend>Create Account</legend>

<p>
To be able to access your purchase history and make changes to your order,
enter a name and password to create an account.
< /p>

</fieldset>

}

if (document.getElementById('chkHappyBirthdy').checked) {
text += "<label>CustomText = " + document.getElementById('chkHappyBirthdy').value + "</label>";
}

if (document.getElementById('chkHappyAnniversary').checked) {
text += "<label>CustomText = " + document.getElementById('chkHappyAnniversary').value + "</label>";
}

if (document.getElementById('chkILoveyou').checked) {
text += "<label>CustomText = " + document.getElementById('chkILoveyou').value + "</label>";
}

if (document.getElementById('chkCustommessage').checked) {
text += "<label>CustomText = " + document.getElementById('txtArea').value + "</label>";
}

//for delivery date
text += "<label>Delivery Date = " + document.getElementById("date").value + "</label>";

}
}

document.getElementById('appendfieldset').innerHTML = text;

}
< /script>

</body>
< /html>

-------------

CSS

/* apply a natural box layout model to all elements */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* reset rules */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,div
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}