Posted By

LeeRJohnson on 06/14/09


Tagged

css style lorem ipsum guide


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

exanimo9
LeeRJohnson
satsuma
michellebracken


HTML Form Style Guide


 / Published in: HTML
 

  1. <form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
  2. <div>
  3. <input type="hidden" name="hidden field" value="42"></div>
  4. <div>
  5. <label for="f1">
  6. Single-line text input field:
  7. <input id="f1" name="text" size="20" value="Default text."></label></div>
  8. <div>
  9. <label for="f2">
  10. Multi-line text input field (textarea):</label></div>
  11. <div>
  12. <textarea id="f2" name="textarea" rows="16" cols="20">Default text.</textarea></div>
  13. <p>The following two radio buttons are inside <code>fieldset</code> element with
  14. a <code>legend</code>:</p>
  15. <legend>Legend</legend>
  16. <div>
  17. <label for="f3">
  18. Radio button 1</label>
  19. <input id="f3" type="radio" name="radio" value="1">
  20. </div>
  21. <div>
  22. <label for="f4">
  23. Radio button 2 (initially checked)</label>
  24. <input id="f4" type="radio" name="radio" value="2" checked="">
  25. </div>
  26. <legend>Check those that apply</legend>
  27. <div>
  28. <label for="f5">
  29. Checkbox 1</label>
  30. <input id="f5" type="checkbox" name="checkbox">
  31. </div>
  32. <div>
  33. <label for="f6">
  34. Checkbox 2 (initially checked)</label>
  35. <input id="f6" type="checkbox" name="checkbox2" checked="">
  36. </div>
  37. <p>
  38. <label for="f10">
  39. A <code>select</code> element with <code>size="1"</code> (dropdown box):</label>
  40. </p>
  41. <select id="f10" name="select1" size="1">
  42. <option>one</option>
  43. <option selected="">two (default)</option>
  44. <option>three</option>
  45. </select>
  46. <p>
  47. <label for="f11">
  48. A <code>select</code> element with <code>size="3"</code> (listbox):</label>
  49. </p>
  50. <select id="f11" name="select2" size="3">
  51. <option>one</option>
  52. <option selected="">two (default)</option>
  53. <option>three</option>
  54. </select>
  55. <div>
  56. <label for="f99">
  57. Submit button:</label>
  58. <input id="f99" type="submit" name="submit" value="Just a test">
  59. </div>
  60. <div>
  61. <label for="f0">
  62. Reset button:</label>
  63. <input id="f0" type="reset" name="reset" value="Reset">
  64. </div>
  65. </form>

Report this snippet  

You need to login to post a comment.