makispaiktis

Codecademy - Datalist Example

Aug 14th, 2019 (edited)
384
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.87 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en" dir="ltr">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <link rel="stylesheet" type="text/css" href="style.css">
  6.     <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
  7.     <title>Radio Input</title>
  8.   </head>
  9.   <body>
  10.     <section id="overlay">
  11.       <img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-6/htmlcss1-img_burger-logo.svg" alt="Davie's Burgers Logo" id="logo">
  12.       <hr>
  13.       <form>
  14.         <h1>Create a burger!</h1>
  15.         <section class="protein">
  16.           <label for="patty">What type of protein would you like?</label>
  17.                 <input type="text" name="patty" id="patty" value="beef">
  18.         </section>
  19.         <hr>
  20.         <section class="patties">
  21.           <label for="amount">How many patties would you like?</label>
  22.           <input type="number" name="amount" value="2" id="amount">
  23.         </section>
  24.         <hr>
  25.         <section class="cooked">
  26.           <label for="doneness">How do you want your patty cooked</label>
  27.           <br>
  28.           <span>Rare</span>
  29.           <input type="range" name="doneness" id="doneness" value="3" min="1" max="5">
  30.           <span>Well-Done</span>
  31.         </section>
  32.         <hr>
  33.         <section class="toppings">
  34.           <span>What toppings would you like?</span>
  35.           <br>
  36.           <input type="checkbox" name="topping" id="lettuce" value="lettuce">
  37.           <label for="lettuce">Lettuce</label>
  38.           <input type="checkbox" name="topping" id="tomato" value="tomato">
  39.           <label for="tomato">Tomato</label>
  40.           <input type="checkbox" name="topping" id="onion" value="onion">
  41.           <label for="onion">Onion</label>
  42.         </section>
  43.         <hr>
  44.         <section class="cheesy">
  45.           <span>Would you like to add cheese?</span>
  46.           <br>
  47.           <input type="radio" name="cheese" id="yes" value="yes">
  48.           <label for="yes">Yes</label>
  49.           <input type="radio" name="cheese" id="no" value="yes">
  50.           <label for="no">No</label>
  51.         </section>
  52.         <hr>
  53.         <section class="bun-type">
  54.           <label for="bun">What type of bun would you like?</label>
  55.           <select name="bun" id="bun">
  56.             <option value="sesame">Sesame</option>
  57.             <option value="potato">Potato</option>
  58.             <option value="pretzel">Pretzel</option>
  59.           </select>
  60.         </section>
  61.         <hr>
  62.  
  63.         <section class="sauce-selection">
  64.                     <label for="sauce">What type of sauce would you like?</label>
  65.           <input list="sauces" id="sauce" name="sauce">
  66.           <!--Add your code below-->
  67.                     <datalist id="sauces">
  68.             <option value="ketchup"></option>
  69.             <option value="mayo"></option>
  70.             <option value="mustard"></option>
  71.           </datalist>
  72.         </section>
  73.  
  74.       </form>
  75.     </section>
  76.   </body>
  77. </html>
Add Comment
Please, Sign In to add comment