SOURCE

<form action="a.aspx">
  <fieldset>
    <legend>login</legend>
    <label for="username">userame:
      <em class="required">(required)</em>
    </label>
    <input type="text" id="username" name="username" />
    
    <label for="password">password:</label>
    <input type="password" id="password" name="password" />
    
  </fieldset>
</form>

<p>
  简写：form>fieldset>legend+((label>em)+input)
  。这里注意label包含了em，来实现required标识
</p>


<p>
  ===================i am seperator============================
</p>


<!-- <fieldset>
  <legend>radio example</legend>
  <input type="radio" name="sex" /> female
  <input type="radio" name="sex" /> male
  <label for=""><input type="radio" value="female2" />female2</label>
</fieldset>
 -->


<fieldset class="horizontal-form">
  <legend>水平form</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="username" name="password" />  
  </div>
  
  <div>
    <label for="dobirth">day of birth:</label>
    <input type="text" id="dobirth" />
    
    <label for="monthofbirth" id="monthofbirthlabel">monthofbirth:</label>
    <select name="monthofbirth" id="monthofbirth">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </div>
  
</fieldset>

<fieldset class="hf2">
  <legend>horizontal form2</legend>
  <div>
    <label for="username">username:</label>
    <input type="text" id="username" name="username" />
  </div>
  <div>
    <label for="password">password:</label>
    <input type="password" id="password" />
  </div>
  <div>
    <label for="dayofbirth">day of birth:</label>
    <input type="text" id="dayofbirth" />
    <label for="monthofbirth" id="testtextindent">month of birth:</label>
    <select name="" id="monthofbirth">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
  </div>
</fieldset>
<p>
  简写：fieldset>legend+(div>(label+input))
</p>
<p>
  没有想到的：<br />
  1 month of birth的input应该有label，再用text-indent负值隐藏。
  <strong>必须是float布局的时候才有效</strong>
  <br />
  2 feedback 应该使用absolute定位来布局
  <br />
  3 书中的例子是让label float起来，再给父div clear浮动。实现的布局。
</p>


<p>
  ===================i am seperator============================
</p>

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

legend{
  font-weight:bold;
}

label{
  display:block;
}

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

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

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

/* === */

fieldset.horizontal-form label{
  display:inline;
}

fieldset.horizontal-form div{
  position:relative;
}

fieldset.horizontal-form .feedback
{
  position:absolute;
  left:23em;
  top:1px;
}

#monthofbirthlabel{
 background:red;
  width:0px;
  text-indent:-1111em;
            
  
}


.hf2 div{
  overflow:hidden;
}

.hf2 label{
  float:left;
  
}

#testtextindent{
  /* text-indent:-1110em;
  width:0; */
  text-indent:-111em;
  width:0;
}