Űrlapok formázása

Az űrlapok formázásánál nem az új technikai lehetőségeket, hanem a szemléletmódot érdemes hangsúlyozni. Nézzünk meg egy rövid, de szemléletes példát Antonio Lupetti tollából. Ezt szeretnénk elérni:

A HTML kód:

<div id="stylized" class="myform">
  <form id="form" name="form" method="post" action="index.html">
    <h1>Sign-up form</h1>
    <p>This is the basic look of my form without table</p>
    <label>Name
      <span class="small">Add your name</span>
    </label>
    <input type="text" name="name" id="name">
    <label>Email
      <span class="small">Add a valid address</span>
    </label>
    <input type="text" name="email" id="email">
    <label>Password
      <span class="small">Min. size 6 chars</span>
    </label>
    <input type="text" name="password" id="password">
    <button type="submit">Sign-up</button>
    <div class="spacer"></div>
  </form>
</div>

A CSS kód:

body {
  font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana,
    Arial, Helvetica, sans-serif;
  font-size:12px;
}
p, h1, form, button {
  border:0;
  margin:0;
  padding:0;
}
.spacer {
  clear:both;
  height:1px;
}
.myform {
  margin:0 auto;
  width:400px;
  padding:14px;
}
#stylized {
  border:solid 2px #b7ddf2;
  background:#ebf4fb;
}
#stylized h1 {
  font-size:14px;
  font-weight:bold;
  margin-bottom:8px;
}
#stylized p {
  font-size:11px;
  color:#666666;
  margin-bottom:20px;
  border-bottom:solid 1px #b7ddf2;
  padding-bottom:10px;
}
#stylized label {
  display:block;
  font-weight:bold;
  text-align:right;
  width:140px;
  float:left;
}
#stylized .small {
  color:#666666;
  display:block;
  font-size:11px;
  font-weight:normal;
  text-align:right;
  width:140px;
}
#stylized input {
  float:left;
  font-size:12px;
  padding:4px 2px;
  border:solid 1px #aacfe4;
  width:200px;
  margin:2px 0 20px 10px;
}
#stylized button{
  clear:both;
  margin-left:150px;
  width:125px;
  height:31px;
  background:#666666 url(img/button.png) no-repeat;
  text-align:center;
  line-height:31px;
  color:#FFFFFF;
  font-size:11px;
  font-weight:bold;
}

Természetesen sok más megoldás is hasznos és megfelelően látványos lehet. A témában érdemes még tutorialokat megismerni, és hasznos lehet a Wufoo Form Gallery megismerése is. Végül a pForm automata generálási lehetőségeit is érdemes kipróbálni.