API tools faq
paste
Advertisement
Guest User

form case2

a guest
Sep 18th, 2018
503
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.83 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.    <!--
  5.      New Perspectives on HTML5 and CSS3, 7th Edition
  6.      Tutorial 7
  7.      Case Problem 2
  8.  
  9.      Spice Bowl Payment Form
  10.      Author:
  11.      Date:  
  12.  
  13.      Filename:   sb_payment.html
  14.  
  15.   -->
  16.    
  17.    <meta charset="utf-8" />
  18.    <meta name="viewport" content="width=device-width, initial-scale=1" />
  19.    <title>Spice Bowl Payment Form</title>
  20.    <link href="sb_reset.css" rel="stylesheet" />
  21.    <link href="sb_styles.css" rel="stylesheet" />
  22.    <link rel="stylesheet" type="text/css" href="sb_forms.css">
  23.    <link rel="stylesheet" type="text/css" href="sb_validate.css">
  24.    <script type="text/javascript" src="sb_script.js">
  25.      
  26.    </script>
  27. </head>
  28.  
  29. <body>
  30.    <header>
  31.       <img src="sb_logo.png" alt="The Spice Bowl" />
  32.       <form id="login" action="http://www.example.com/sb/login" method="POST">
  33.          <input type="text" name="username" id="userBox" placeholder="username">
  34.          <input type="text" name="password" id="pwdBox" placeholder="password">
  35.       </form>
  36.       <nav> <a id="navicon" href="#"><img src="sb_navicon.png" alt="" /></a>
  37.          <ul>
  38.             <li><a href="#">Spices</a></li>
  39.             <li><a href="#">Recipes</a></li>
  40.             <li><a href="#">My Cart</a></li>
  41.             <li><a href="#">My Account</a></li>
  42.             <li><a href="#">Contact Us</a></li>
  43.          </ul>
  44.       </nav>
  45.    </header>
  46.    
  47.    <section>
  48.       <h1>Payment Form</h1>
  49.       <form action="http://www.example.com/sb/payment" method="POST" id="payment">
  50.          <fieldset id="billing">
  51.             <legend>
  52.                Billing Information (required)
  53.             </legend>
  54.             <label>First Name</label>
  55.             <input type="text" name="fName" id="firstBox" required>
  56.             <label>Last Name</label>
  57.             <input type="text" name="lName" id="lastBox" required>
  58.             <label>Street Address</label>
  59.             <input type="text" name="street" id="streetBox" required>
  60.             <label>Street Address (2)</label>
  61.             <input type="text" name="street2" id="streetBox2" >
  62.             <label>City</label>
  63.             <input type="text" name="city" id="cityBox" required>
  64.             <label>State</label>
  65.             <input type="text" name="state" id="stateBox" list="stateList" required>
  66.             <label>ZIP/Postal Code</label>
  67.             <input type="text" name="zip" id="zipBox" pattern="^\d{5}(-\d{4})?$">
  68.             <label>Country</label>
  69.             <input type="text" name="country" id="countryBox" value="United States" required>
  70.             <label>Phone</label>
  71.             <input type="tel" name="phone" id="phoneBox" pattern="^\d{10}$|^(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}$" required>
  72.             <datalist id="stateList">
  73.                <option>AL</option>
  74.                <option>AK</option>
  75.                <option>AZ</option>
  76.                <option>AR</option>
  77.                <option>CA</option>
  78.                <option>CO</option>
  79.                <option>CT</option>
  80.                <option>DE</option>
  81.                <option>FL</option>
  82.                <option>GA</option>
  83.                <option>HI</option>
  84.                <option>ID</option>
  85.                <option>IL</option>
  86.                <option>IN</option>
  87.                <option>IA</option>
  88.                <option>KS</option>
  89.                <option>KY</option>
  90.                <option>LA</option>
  91.                <option>ME</option>
  92.                <option>MD</option>
  93.                <option>MA</option>
  94.                <option>MI</option>
  95.                <option>MN</option>
  96.                <option>MS</option>
  97.                <option>MO</option>
  98.                <option>MT</option>
  99.                <option>NE</option>
  100.                <option>NV</option>
  101.                <option>NH</option>
  102.                <option>NJ</option>
  103.                <option>NM</option>
  104.                <option>NY</option>
  105.                <option>NC</option>
  106.                <option>ND</option>
  107.                <option>OH</option>
  108.                <option>OK</option>
  109.                <option>OR</option>
  110.                <option>PA</option>
  111.                <option>RI</option>
  112.                <option>SC</option>
  113.                <option>SD</option>
  114.                <option>TN</option>
  115.                <option>TX</option>
  116.                <option>UT</option>
  117.                <option>VT</option>
  118.                <option>VA</option>
  119.                <option>WA</option>
  120.                <option>WV</option>
  121.                <option>WI</option>
  122.                <option>WY</option>
  123.             </datalist>
  124.          </fieldset>
  125.          <fieldset id="creditCard">
  126.             <legend>
  127.                Credit Card (required)
  128.             </legend>
  129.             <fieldset>
  130.                <label class="cardLabel">
  131.                   <input type="radio" name="cCard" value="amex" required><img src="sb_amex.png">
  132.                </label>
  133.                <label class="cardLabel">
  134.                   <input type="radio" name="cCard" value="discover" required><img src="sb_discover.png">
  135.                </label>
  136.                <label class="cardLabel">
  137.                   <input type="radio" name="cCard" value="master" required><img src="sb_master.png">
  138.                </label>
  139.                <label class="cardLabel">
  140.                   <input type="radio" name="cCard" value="visa" required><img src="sb_visa.png">
  141.                </label>
  142.             </fieldset>
  143.             <label id="#cardBox">
  144.                Credit Card Number
  145.             </label>
  146.             <input type="text" name="cardNumber" id="cardBox" 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|35\d{3})\d{11})$" required>
  147.             <label id="#monthList">
  148.                Expiration Date
  149.             </label>
  150.             <select id="monthList" name="cardMonth" required >
  151.                <option value="">--Month--</option>
  152.                <option value="1">January (01)</option>
  153.                <option value="2">February (02)</option>
  154.                <option value="3">March (03)</option>
  155.                <option value="4">April (04)</option>
  156.                <option value="5">May (05)</option>
  157.                <option value="6">June (06)</option>
  158.                <option value="7">July (07)</option>
  159.                <option value="8">August (08)</option>
  160.                <option value="9">September(09)</option>
  161.                <option value="10">October (10)</option>
  162.                <option value="11">November (11)</option>
  163.                <option value="12">December (12)</option>
  164.             </select>
  165.             <select id="yearList" name="cardYear" required >
  166.                <option value="">--Year--</option>
  167.                <option value="2017">2017</option>
  168.                <option value="2018">2018</option>
  169.                <option value="2019">2019</option>
  170.                <option value="2020">2020</option>
  171.                <option value="2021">2021</option>
  172.             </select>
  173.             <label id="#cscBox">
  174.                CSC
  175.             </label>
  176.             <input type="text" name="csc" id="cscBox" pattern="^\d{3}$" maxlength="3" placeholder="nnn" required>
  177.          </fieldset>
  178.          <button type="submit">
  179.             <img src="sb_button.png" alt="next">
  180.          </button>
  181.       </form>
  182.       <aside>
  183.          <h1>Menu Ideas</h1>
  184.          <h2>Salt-Roasted Pecans</h2>
  185.          <ul>
  186.             <li>2 cups pecans</li>
  187.             <li>3 Tbs. butter, melted</li>
  188.             <li>1 1/4 tsp. fine sea salt</li>
  189.          </ul>
  190.          <p>Preheat oven to 325&deg;. Toss pecans and butter together;
  191.             add salt and toss again.  Spread in a single layer on a baking
  192.             sheet.  Bake about 15 minutes.  Cook on baking sheet.
  193.          </p>
  194.  
  195.          <h2>Dried Beef Sticks</h2>
  196.          <ul>
  197.             <li>5 lbs. ground chuck</li>
  198.             <li>5 Tbs. quick salt</li>
  199.             <li>3 tsp. mustard seed</li>
  200.             <li>2 tsp. granulated garlic</li>
  201.             <li>2 tsp. cracked pepper</li>
  202.             <li>1 Tbs. hickory smoked salt</li>
  203.             <li>1 Tbs. liquid smoke</li>
  204.          </ul>
  205.          <p>Mix beef and season.  Place in a large covered container
  206.             for three days.  
  207.             On third day, shape beef into sticks, and bake at 150&deg; for
  208.             8 hours (turn half-way through).
  209.          </p>
  210.       </aside>
  211.      
  212.    </section>
  213.  
  214.    <footer>
  215.       <nav>
  216.          <ul>
  217.             <li class="newgroup"><a href="#">Home</a></li>
  218.             <li><a href="#">Keyword Search</a></li>
  219.      
  220.             <li class="newgroup"><a href="#">Spices</a></li>
  221.             <li><a href="#">Seasonings</a></li>
  222.             <li><a href="#">Blends</a></li>
  223.             <li><a href="#">Salts &amp; Peppers</a></li>
  224.             <li><a href="#">Popcorn Seasonings</a></li>
  225.             <li><a href="#">Dip Mixes</a></li>
  226.             <li><a href="#">Bulk Spices</a></li>
  227.             <li><a href="#">Extracts</a></li>
  228.             <li><a href="#">Flavorings</a></li>
  229.      
  230.             <li class="newgroup"><a href="#">Spice Jars</a></li>
  231.             <li><a href="#">Spice Jar Labels</a></li>
  232.             <li><a href="#">Spice Sets</a></li>
  233.             <li><a href="#">Mortar &amp; Pestles</a></li>
  234.      
  235.             <li class="newgroup"><a href="#">Cookbooks</a></li>
  236.             <li><a href="#">Online Recipes</a></li>
  237.             <li><a href="#">Forums</a></li>
  238.      
  239.             <li class="newgroup"><a href="#">My Account</a></li>
  240.             <li><a href="#">Checkout</a></li>
  241.             <li><a href="#">Order History</a></li>
  242.             <li><a href="#">Shipping Info</a></li>
  243.      
  244.             <li class="newgroup"><a href="#">Tech Support</a></li>
  245.             <li><a href="#">Hours</a></li>
  246.             <li><a href="#">Contact Us</a></li>
  247.          </ul>
  248.       </nav>
  249.    </footer>        
  250. </body>
  251. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!