Posted By

bcmoney on 02/13/14


Tagged

html input forms elements new


Versions (?)

New HTML5 FORM INPUT elements


 / Published in: HTML
 

URL: http://diveintohtml5.info/forms.html

Quick guide showing the lucky thirteen new HTML5 Form input elements in a basic HTML5 skeleton

See also:

http://www.html5rocks.com/en/tutorials/forms/html5forms/

http://html5doctor.com/html5-forms-input-types/

http://www.w3schools.com/html/html5forminput_types.asp

http://www.w3schools.com/html/html5formattributes.asp

  1. <!DOCTYPE html>
  2. <meta charset="utf-8" />
  3. <title>HTML5 basic skeleton</title>
  4. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  5. <!--[if lt IE 9]>
  6. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  7. <![endif]-->
  8. <style type="text/css">
  9. header, section, footer, aside, nav, article, figure, audio, video, canvas { display:block; }
  10. label { display:block; line-height:1.3em; }
  11. </style>
  12. </head>
  13. <div id="wrapper">
  14. <header>
  15. <!-- Header -->
  16. </header>
  17. <nav>
  18. <!-- Navigation -->
  19. </nav>
  20. <section id="content">
  21. <article>
  22. <form>
  23. <legend>New HTML5 Form inputs</legend>
  24. <label>Select your favorite color: <input type="color" name="favcolor" /></label>
  25. <label>Birthday: <input type="date" name="bday" /></label>
  26. <label>Birthday (month and year): <input type="month" name="bdaymonth" /></label>
  27. <label>Reservation (date and time): <input type="datetime" name="reservation_daytime" /></label>
  28. <label>Appointment (local date and time): <input type="datetime-local" name="appointment_daytime" /></label>
  29. <label>Select a time: <input type="time" name="usr_time" /></label>
  30. <label>Select a week: <input type="week" name="week_year" /></label>
  31. <label>E-mail: <input type="email" name="email" /></label>
  32. <label>Numerical Quantity (from 1 to 5): <input type="number" name="quantity" min="1" max="5" /></label>
  33. <label>Range: <input type="range" name="points" min="1" max="10" /></label>
  34. <label>Search the web: <input type="search" name="googlesearch" placeholder="Enter search term here" autofocus /></label>
  35. <label>Favorite Website: <input type="url" name="website" /></label>
  36. <label>Telephone Number: <input type="tel" name="telephone" required /></label>
  37. </form>
  38. </article>
  39. </section>
  40. <aside>
  41. <!-- Sidebar -->
  42. </aside>
  43. <footer>
  44. <1-- Footer -->
  45. </footer>
  46. </div>
  47. </body>
  48. </html>

Report this snippet  

You need to login to post a comment.