form.html 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <section id="form" data-transition="slide">
  2. <header data-title="Form Elements">
  3. <nav>
  4. <a href="#back" data-router="section" data-icon="home"></a>
  5. </nav>
  6. <nav class="right">
  7. <a href="#form-extras" data-router="article" class="button" data-label="Extras"></a>
  8. </nav>
  9. </header>
  10. <article id="form-normal" class="active">
  11. <div class="form">
  12. <fieldset data-icon="plus">
  13. <label>To:</label>
  14. <input type="text" />
  15. </fieldset>
  16. <fieldset>
  17. <label>Cc/Cco:</label>
  18. <input type="text" />
  19. </fieldset>
  20. <fieldset data-icon="pencil">
  21. <label>Subject:</label>
  22. <input type="text" />
  23. </fieldset>
  24. <fieldset>
  25. <label>Summary:</label>
  26. <br/>
  27. <input type="text" />
  28. </fieldset>
  29. <fieldset>
  30. <textarea></textarea>
  31. </fieldset>
  32. </div>
  33. </article>
  34. <article id="form-extras" class=" scroll">
  35. <form>
  36. <fieldset data-icon="search">
  37. <input type="search" placeholder="Search..."/>
  38. </fieldset>
  39. </form>
  40. <form class="margined">
  41. <div class="six columns">
  42. <label>Address</label>
  43. <input type="text" placeholder="placeholder"/>
  44. </div>
  45. <div class="three columns right">
  46. <label>Pin Code</label>
  47. <input type="password" value="value" disabled/>
  48. </div>
  49. <label>Select your skill</label>
  50. <label class="select">
  51. <select class="custom">
  52. <option value="1">HTML5 Jedi</option>
  53. <option value="2">Two</option>
  54. <option value="3">Three</option>
  55. </select>
  56. </label>
  57. <label>Progress</label>
  58. <div id="progress-normal" data-progress="25%"></div>
  59. <label>Range</label>
  60. <input type="range" placeholder="type your name" />
  61. <label>Checkbox</label>
  62. <br/>
  63. <input type="range" min="0" max="1" class="checkbox active" value="1">
  64. <a href="#form-normal" data-router="article" class="button anchor accept" data-label="Return to normal Elements"></a>
  65. </form>
  66. </article>
  67. </section>