SOURCE

<fieldset>
  <legend>contact details</legend>
  <div>
    <label for="username">username:
    <em class="required">(required)</em>
    </label>
    <input type="text" id="username" name="username" />
  </div>
  <div>
    <label for="password">password</label>
    <input type="password" name="password" id="password" />
  </div>
  
  
  
</fieldset>

<br />
<br />

<fieldset>
  <legend>rememberme</legend>
  <div>
    <label for="remember-yes">
      <input type="radio" class="radio" id="remember-yes" name="remember" value="yes" />yes
    </label>
  </div>
  
  <div>
    <label for="remember-no">
      <input type="radio" value="no" class="radio" id="remember-no" name="remember" />no
    </label>
  </div>
</fieldset>


<br />
<br />

<fieldset class="horizontal-form">
  <legend>horizontal </legend>
  <div>
    <label for="username">username:
      <em class="feedback">(required)</em>
    </label>
    <input type="text" id="username" name="username" />
  </div>
  
  <div>
    <label for="password">password:</label>
    <input type="password" id="password" name="passowrd" />
  </div>
  
  <div>
    <label for="dateofbirth">date of birth:</label>
    <input type="text" id="dateofbirth" name="dateofbirth" />
  
    <label for="monthofbirth" id="monthofbirthlabel">month of birth:</label>
    <select name="monthofbirth" id="monthofbirth">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    
  </div>
  
</fieldset>


<br />
<br />

<p>
  <button typp="submit">tijiaoaaaaa</button>
</p>

fieldset{
  margin:1em 0;
  padding:1em;
  border:1px solid #ccc;
  background:#f8f8f8;
}

legend{
  font-weight:bold;
}

label{
  display:block;
  cursor:pointer;
}

input[type="text"]{
  width:20em;
}


input[type="password"]{
  width:20em;
}

.radio{
  margin-right:1em;
}

input[type="text"]:focus{
  background:green;
}

.required{
  font-size:.75em;
  color:#760000;
}

/* ------------------------ */

.horizontal-form label{
  float:left;
  width:6m;
}

.horizontal-form div{
  clear:both;
}

.horizontal-form input{
  width:10em;
}


#monthofbirthlabel{
  text-indent:-1000em;
  width:0;
}

.horizontal-form input#dateofbirth{
  width:3em;
  margin-right:.5em;
}

button
{
  width:200px;
  height:40px;
  border:1px solid  #989898;
  border-radius:3px;
  background:url(http://joshua0125.test.upcdn.net/jingtongcss/charpter7/button-bg.png) #c5e063 bottom left repeat-x;
  box-shadow:2px 2px 2px #ccc;
  color:#fff;
  font-size:26px;
  font-weight:bold;
  text-shadow:1px 1px 1px #666;
}

.horizontal-form div{
  position:relative;
}

.horizontal-form .feedback{
  position:absolute;
  left:14em;
  right:0;
  top:1px;
}