forms.html 3.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <div class="formGroupHead">Standard</div>
  2. <form>
  3. <input type="range">
  4. <input type="text" placeholder="test">
  5. <input type="search" placeholder="search">
  6. <textarea rows="6" placeholder="Enter your address"></textarea>
  7. </form>
  8. <div class="formGroupHead">Grouping</div>
  9. <form>
  10. <div class="input-group">
  11. <input type="text" placeholder="test">
  12. <input type="search" placeholder="search">
  13. <textarea rows="6" placeholder="Enter your address"></textarea>
  14. </div>
  15. </form>
  16. <div class="formGroupHead">Labeled</div>
  17. <form>
  18. <label for="test1">First Name</label>
  19. <input id="test1" type="text" placeholder="test">
  20. <label for="test2">Search</label>
  21. <input id="test2" type="search" placeholder="search">
  22. <label for="test3">Info Name</label>
  23. <textarea id="test3" rows="6" placeholder="Enter your address"></textarea>
  24. </form>
  25. <form>
  26. <div class="input-group">
  27. <label for="test1">First Name</label>
  28. <input id="test1" type="text" placeholder="test">
  29. <label for="test2">Search</label>
  30. <input id="test2" type="search" placeholder="search">
  31. <label for="test3">Info Name</label>
  32. <textarea id="test3" rows="6" placeholder="Enter your address"></textarea>
  33. <input type="submit" class="button" value="Submit" style='float:right;'>
  34. </div>
  35. </form>
  36. <div class="formGroupHead">Radios</div>
  37. <form>
  38. <div class="input-group">
  39. <label>Gender</label>
  40. <input id="aaaa" type="radio" name="test" value="1">
  41. <label for="aaaa">Male</label>
  42. <input id="bbbb" type="radio" name="test" value="2">
  43. <label for="bbbb">Female</label>
  44. <input id="cccc" type="radio" name="test" value="3">
  45. <label for="cccc">N/A</label>
  46. <br style="clear:both">
  47. <input type="submit" class="button" value="Submit" style='float:right;'>
  48. </div>
  49. </form>
  50. <div class="formGroupHead">Checkbox and Button</div>
  51. <form>
  52. <div class="input-group">
  53. <label>Gender</label>
  54. <input id="aaaaa" type="checkbox" name="test2" value="1">
  55. <label for="aaaaa">Male</label>
  56. <input id="bbbbb" type="checkbox" name="test2" value="2">
  57. <label for="bbbbb">Female</label>
  58. <input id="ccccc" type="checkbox" name="test2" value="3">
  59. <label for="ccccc">N/A</label>
  60. <br style="clear:both">
  61. <input type="submit" class="button" value="Submit" style='float:right;'>
  62. </div>
  63. </form>
  64. <div class="formGroupHead">Toggle Switches</div>
  65. <form>
  66. <div class="input-group">
  67. <label>Gender</label>
  68. <input id="toggle1" type="checkbox" name="toggle1" value="1" class="toggle">
  69. <label for="toggle1" data-on="On" data-off="Off"><span></span>
  70. </label>
  71. <input id="toggle2" type="radio" name="toggle2" value="1" class="toggle">
  72. <label for="toggle2" data-on="Yes" data-off="No"><span></span>
  73. </label>
  74. <input id="toggle3" type="radio" name="toggle2" value="1" class="toggle">
  75. <label for="toggle3" data-on="Yes" data-off="No"><span></span>
  76. </label>
  77. </div>
  78. </form>