Advertisement
MayurTolani

HTML 5 Formusing datalist,optgroup,fieldset(&media queries)

Apr 19th, 2015
227
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.32 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Forms without feildset and labels</title>
  6.     <style>
  7.  
  8. @media screen and (min-width: 800px){
  9.     body
  10.     {
  11.         background-color: lightblue;
  12.     }
  13. }
  14. @media screen and (max-width: 800px){
  15.     body
  16.     {
  17.         background-color: red;
  18.     }
  19. }
  20. @media screen and (max-width: 600px){
  21.     body
  22.     {
  23.         background-color: blue;
  24.     }
  25. }
  26. .alingment
  27. {
  28.     width:50%;
  29.     margin: 2% auto;
  30.     border: 3px solid black;
  31.     padding: 5%;
  32. }
  33. </style>
  34. </head>
  35. <body bgcolor="#804C1A">
  36.     <fieldset class="alingment">
  37.         <legend>LOGIN FORM</legend>
  38.         <form action="#" >
  39.             <!--examples of input types-->
  40.             <p>Enter Name :<input type="text"></p>
  41.             <p>Enter Email :<input type="email"></p>
  42.             <p>Enter Phone Number :<input type="number"></p>
  43.             <p>Enter Birthdate :<input type="date"></p>
  44.             <!--examples of optgroup-->
  45.             <p>Favourite Subject :
  46.             <select name="subject" id="fav">
  47.                 <optgroup label="Not Soo Techy Subjects">
  48.                     <option value="Maths 1">Maths 1</option>
  49.                     <option value="Maths 2">Maths 2</option>
  50.                     <option value="Maths 3">Maths 3</option>
  51.                     <option value="Maths 4">Maths 4</option>
  52.                     <option value="physics">Physics</option>
  53.                     <option value="physics">Chemistry</option>
  54.                     <option value="physics">Automata Theory</option>
  55.                     <option value="physics">Software Engineering</option>
  56.                     <option value="Evs">Evs</option>
  57.                 </optgroup>
  58.                 <optgroup label="Pogramming Subjects">
  59.                     <option value="SPA">SPA</option>
  60.                     <option value="DSA">Data Structures Analyis</option>
  61.                     <option value="OOPM">Object Oreinted Programming Methodology</option>
  62.                     <option value="DS">Distributed Systems</option>
  63.                     <option value="WP">Web Programming</option>
  64.                 </optgroup>
  65.             </select>
  66.             </p>
  67.             <!--example of datalist-->
  68.             <p>Favourite Faculty : <input list="fac">
  69.             <datalist id="fac">
  70.                 <option value="Rahul SIR ">DS and OOPM</option>
  71.                 <option value="Sanober Maam">DBMS</option>
  72.                 <option value="Suvarna maam ">SPA and COA</option>
  73.                 <option value="Sanjay Sir"> SE and CN</option>
  74.                 <option value="Muskesh Sir">BEE and ITC</option>
  75.             </datalist></p>
  76.             <p>Any Comments :</p><textarea cols="30" rows="5"></textarea>
  77.             <p><input type="button" value="Send"></p>
  78.             </form>
  79.         </fieldset>
  80. </body>
  81. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement