BTK-FH Logo

Theorie

Please Fill Out This Form

Forms are not sexy but they don’t have to be ugly.  Here’s the example we worked out in class on Thursday, where a little effort can make a form a lot more readable:

<html>
  <head>
    <title>layout for forms</title>
    <style type="text/css">
      span.label {
      	float: left;
      	text-align: right;
      	width: 100px;
      	padding-right: 5px;
      }
      div.row {
        padding-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1>please fill out this form</h1>

    <form>

      <div class="row">
        <span class="label">name:</span>
        <input type="text" size="15" />
      </div>

      <div class="row">
        <span class="label">password: </span>
        <input type="password" size="15" />
      </div>

      <div class="row">
        <span class="label">comment:</span>
        <textarea rows="5" cols="40"></textarea>
      </div>

      <div class="row">
        <span class="label">&nbsp;</span>
        <input type="submit" value="Send the form" />
      </div>
    </form>

  </body>
</html>

speak up

Add your comment below, or trackback from your own site.

Subscribe to these comments.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*Required Fields