This is the HTML file The login part is not working <!DOCTYPE html> <html lang=\
ID: 3908799 • Letter: T
Question
This is the HTML file
The login part is not working
<!DOCTYPE html>
<html lang="en">
<head>
<!--
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 7
Case Problem 2
Spice Bowl Payment Form
Author: Timothy Lesher
Date: 6/25/2018
Filename: sb_payment.html
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Spice Bowl Payment Form</title>
<link href="sb_reset.css" rel="stylesheet" />
<link href="sb_styles.css" rel="stylesheet" />
<link href="sb_forms.css" rel="stylesheet" />
<link href="sb_validate.css" rel="stylesheet" />
<script src="sb_script.js"></script>
</head>
<body>
<header>
<form>
<img src="sb_logo.png" alt="The Spice Bowl" />
<form id="login" action="http://www.example.com/sb/login" method="post">
<input name="userName" id="userBox" type="text" Placeholder="username"/>
<input name="userPwd" id="pwdBox" type="password" placeholder="password"/>
</form>
<nav> <a id="navicon" href="#"><img src="sb_navicon.png" alt="" /></a>
<ul>
<li><a href="#">Spices</a></li>
<li><a href="#">Recipes</a></li>
<li><a href="#">My Cart</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<section>
<h1>Payment Form</h1>
<aside>
<h1>Menu Ideas</h1>
<h2>Salt-Roasted Pecans</h2>
<ul>
<li>2 cups pecans</li>
<li>3 Tbs. butter, melted</li>
<li>1 1/4 tsp. fine sea salt</li>
</ul>
<p>Preheat oven to 325°. Toss pecans and butter together;
add salt and toss again. Spread in a single layer on a baking
sheet. Bake about 15 minutes. Cook on baking sheet.
</p>
<h2>Dried Beef Sticks</h2>
<ul>
<li>5 lbs. ground chuck</li>
<li>5 Tbs. quick salt</li>
<li>3 tsp. mustard seed</li>
<li>2 tsp. granulated garlic</li>
<li>2 tsp. cracked pepper</li>
<li>1 Tbs. hickory smoked salt</li>
<li>1 Tbs. liquid smoke</li>
</ul>
<p>Mix beef and season. Place in a large covered container
for three days.
On third day, shape beef into sticks, and bake at 150° for
8 hours (turn half-way through).
</p>
</aside>
</section>
<footer>
<nav>
<ul>
<li class="newgroup"><a href="#">Home</a></li>
<li><a href="#">Keyword Search</a></li>
<li class="newgroup"><a href="#">Spices</a></li>
<li><a href="#">Seasonings</a></li>
<li><a href="#">Blends</a></li>
<li><a href="#">Salts & Peppers</a></li>
<li><a href="#">Popcorn Seasonings</a></li>
<li><a href="#">Dip Mixes</a></li>
<li><a href="#">Bulk Spices</a></li>
<li><a href="#">Extracts</a></li>
<li><a href="#">Flavorings</a></li>
<li class="newgroup"><a href="#">Spice Jars</a></li>
<li><a href="#">Spice Jar Labels</a></li>
<li><a href="#">Spice Sets</a></li>
<li><a href="#">Mortar & Pestles</a></li>
<li class="newgroup"><a href="#">Cookbooks</a></li>
<li><a href="#">Online Recipes</a></li>
<li><a href="#">Forums</a></li>
<li class="newgroup"><a href="#">My Account</a></li>
<li><a href="#">Checkout</a></li>
<li><a href="#">Order History</a></li>
<li><a href="#">Shipping Info</a></li>
<li class="newgroup"><a href="#">Tech Support</a></li>
<li><a href="#">Hours</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</footer>
</body>
</html>
Explanation / Answer
Solution:
Note: No css and js file has been provided hence I am unable to validate it. But it will work fine, be sure the linked css and js file names are same as well as the images name too. FOr any doubt do comment below before giving any negative feedbacks. if you liked the solution then give a big thumbs up.
sb_payment.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 7
Case Problem 2
Spice Bowl Payment Form
Author: Timothy Lesher
Date: 6/25/2018
Filename: sb_payment.html
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Spice Bowl Payment Form</title>
<link href="sb_reset.css" rel="stylesheet" />
<link href="sb_styles.css" rel="stylesheet" />
<link href="sb_forms.css" rel="stylesheet" />
<link href="sb_validate.css" rel="stylesheet" />
<script src="sb_script.js"></script>
</head>
<body>
<header>
<img src="sb_logo.png" alt="The Spice Bowl" />
<form id="login" action="http://example.com/sb/login" method="post">
<div class="formRow">
<input name="userBox" id="userBox" type="text" placeholder="username" />
<input name="pwdBox" id="pwdBox" type="text" placeholder="password" />
</div>
</form>
<nav> <a id="navicon" href="#"><img src="sb_navicon.png" alt="" /></a>
<ul>
<li><a href="#">Spices</a></li>
<li><a href="#">Recipes</a></li>
<li><a href="#">My Cart</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<section>
<h1>Payment Form</h1>
<form id="payment" action="http://example.com/sb/payment" method="post">
<fieldset id="billing">
<legend>Billing Information(required)</legend>
<label for="fName">First Name</label>
<input name="fName" id="firstBox" type="text" required />
<label for="lName">Last Name</label>
<input name="lName" id="lastBox" type="text" required />
<label for="street">Street Address</label>
<input name="street" id="streetBox" type="text" required />
<label for="street2">Street Address (2)</label>
<input name="street2" id="streetBox2" type="text" />
<label for="city">City</label>
<input name="city" id="cityBox" type="text" required />
<label for="state">State</label>
<input name="state" list="stateList" id="stateBox" type="text" required />
<datalist id="stateList">
<option value="AL" />
<option value="AK" />
<option value="AZ" />
<option value="AR" />
<option value="CA" />
<option value="CO" />
<option value="CT" />
<option value="DE" />
<option value="FL" />
<option value="GA" />
<option value="HI" />
<option value="ID" />
<option value="IL" />
<option value="IN" />
<option value="IA" />
<option value="KS" />
<option value="KY" />
<option value="LA" />
<option value="ME" />
<option value="MD" />
<option value="MA" />
<option value="MI" />
<option value="MN" />
<option value="MS" />
<option value="MO" />
<option value="MT" />
<option value="NE" />
<option value="NV" />
<option value="NH" />
<option value="NJ" />
<option value="NM" />
<option value="NY" />
<option value="NC" />
<option value="ND" />
<option value="OH" />
<option value="OK" />
<option value="OR" />
<option value="PA" />
<option value="RI" />
<option value="SC" />
<option value="SD" />
<option value="TN" />
<option value="TX" />
<option value="UT" />
<option value="VT" />
<option value="VA" />
<option value="WA" />
<option value="WV" />
<option value="WI" />
<option value="WY" />
</datalist>
<label for="zip">ZIP/Postal Code</label>
<input name="zip" id="zipBox" type="text"
pattern="^d{5}(-d{4})?$" />
<label for="country">Country</label>
<input name="country" id="countryBox" type="text" value="United States" required />
<label for="phone">Phone</label>
<input name="phone" id="phoneBox" type="tel" required
pattern="^d{10}$|^((d{3})s*)?d{3}[s-]?d{4}$" />
</fieldset>
<fieldset id="creditCard" >
<legend>Credit Card(required)</legend>
<fieldset id="cardlabel" >
<label class="cardLabel">
<input name="cardLabel" value="amex" type="radio" required />
<img src="sb_amex.png" />
</label>
<label class="cardLabel">
<input name="cardLabel" value="discover" type="radio" required />
<img src="sb_discover.png" />
</label>
<label class="cardLabel">
<input name="cardLabel" value="master" type="radio" required />
<img src="sb_master.png" />
</label>
<label class="cardLabel">
<input name="cardLabel" value="visa" type="radio" required />
<img src="sb_visa.png" />
</label>
</fieldset>
<label for="cardNumber">Credit Card Number</label>
<input name="cardNumber" id="cardBox" type="text" required
pattern="^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35d{3})d{11})$" />
<label for="cardMonth">Expiration Date</label>
<select name="cardMonth" id="monthList" required>
<option value=" ">--Month--</option>
<option value="1">January (01)</option>
<option value="2">February (02)</option>
<option value="3">March (03)</option>
<option value="4">April (04)</option>
<option value="5">May (05)</option>
<option value="6">June (06)</option>
<option value="7">July (07)</option>
<option value="8">August (08)</option>
<option value="9">September (09)</option>
<option value="10">October (10)</option>
<option value="11">November (11)</option>
<option value="12">December (12)</option>
</select>
<select name="cardYear" id="yearList" required>
<option value=" ">--Year--</option>
<option value="2021">2021</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
</select>
<label for="csc">CSC</label>
<input name="csc" id="cscBox" type="text" maxlength="3" required
pattern="d{3}$" placeholder="nnn" />
</fieldset>
<button type="submit">
<img src="sb_button.png" alt="next" />
</button>
</form>
<aside>
<h1>Menu Ideas</h1>
<h2>Salt-Roasted Pecans</h2>
<ul>
<li>2 cups pecans</li>
<li>3 Tbs. butter, melted</li>
<li>1 1/4 tsp. fine sea salt</li>
</ul>
<p>Preheat oven to 325°. Toss pecans and butter together;
add salt and toss again. Spread in a single layer on a baking
sheet. Bake about 15 minutes. Cook on baking sheet.
</p>
<h2>Dried Beef Sticks</h2>
<ul>
<li>5 lbs. ground chuck</li>
<li>5 Tbs. quick salt</li>
<li>3 tsp. mustard seed</li>
<li>2 tsp. granulated garlic</li>
<li>2 tsp. cracked pepper</li>
<li>1 Tbs. hickory smoked salt</li>
<li>1 Tbs. liquid smoke</li>
</ul>
<p>Mix beef and season. Place in a large covered container
for three days.
On third day, shape beef into sticks, and bake at 150° for
8 hours (turn half-way through).
</p>
</aside>
</section>
<footer>
<nav>
<ul>
<li class="newgroup"><a href="#">Home</a></li>
<li><a href="#">Keyword Search</a></li>
<li class="newgroup"><a href="#">Spices</a></li>
<li><a href="#">Seasonings</a></li>
<li><a href="#">Blends</a></li>
<li><a href="#">Salts & Peppers</a></li>
<li><a href="#">Popcorn Seasonings</a></li>
<li><a href="#">Dip Mixes</a></li>
<li><a href="#">Bulk Spices</a></li>
<li><a href="#">Extracts</a></li>
<li><a href="#">Flavorings</a></li>
<li class="newgroup"><a href="#">Spice Jars</a></li>
<li><a href="#">Spice Jar Labels</a></li>
<li><a href="#">Spice Sets</a></li>
<li><a href="#">Mortar & Pestles</a></li>
<li class="newgroup"><a href="#">Cookbooks</a></li>
<li><a href="#">Online Recipes</a></li>
<li><a href="#">Forums</a></li>
<li class="newgroup"><a href="#">My Account</a></li>
<li><a href="#">Checkout</a></li>
<li><a href="#">Order History</a></li>
<li><a href="#">Shipping Info</a></li>
<li class="newgroup"><a href="#">Tech Support</a></li>
<li><a href="#">Hours</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</footer>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.