Tableless forms


/ Published in: HTML
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <legend>Sign-up Form</legend>
  2. <form name="signup" action="index.html" method="post">
  3. <ul>
  4. <li> <label for="name">Name</label>
  5. <input type="text" name="name" id="name" size="30" />
  6. </li>
  7. <li> <label for="email">Email</label>
  8. <input type="text" name="email" id="email" size="30" />
  9. </li>
  10.  
  11. <li> <label for="psw">Password</label>
  12. <input type="text" name="psw" id="psw" size="30" />
  13. </li>
  14.  
  15. <li> <label for="free">Free Subscrition</label>
  16. <input type="radio" name="subscription" id="free"/>
  17. </li>
  18.  
  19. <li> <label for="professional">Professional</label>
  20. <input type="radio" name="subscription" id="professional"/> </li>
  21.  
  22. <li>
  23. <label for="newsletter">Newsletter</label>
  24. <input type="checkbox" name="newsletter" id="newsletter"/>
  25. </li>
  26.  
  27. <li><label for="submit"></label>
  28. <button type="submit" id="submit">Send</button> </li>
  29. <ul>
  30. </form>
  31.  
  32.  
  33.  
  34. fieldset ul, fieldset li{
  35. border:0; margin:0; padding:0; list-style:none;
  36. }
  37. fieldset li{
  38. clear:both;
  39. list-style:none;
  40. padding-bottom:10px;
  41. }
  42.  
  43. fieldset input{
  44. float:left;
  45. }
  46. fieldset label{
  47. width:140px;
  48. float:left;
  49. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.