简单的表单布局

个人信息：

<fieldset>
  <legend>Your Contact Details</legend>
  <div>
    <label for="author">Name:<em class="required">(required)</em></label>
    <input name="author" id="author" type="text" />
  </div>
  <div>
    <label for="email">Email Address:</label>
    <input name="email" id="email" type="text" />
  </div>
  <div>
    <label for="url">Web Address:</label>
    <input name="url" id="url" type="text" />
  </div>
</fieldset>

 fileldset有两个文件集，一个写信息，一个写注释。

legend:是fileldset的标题，在顶部垂直居中，向右缩进一点儿。

label:增加表单的可用性和可访问性。
em:适用于表单中必须填写的域。

显示效果：

报错：

<fieldset>
  <legend>Your Contact Details</legend>
  <div>
    <label for="author">Name:<em class="required">(required)</em></label>
    <input name="author" id="author" type="text" />
  </div>
  <div>
    <label for="email">Email Address:
<em class="feedback">Incorrect email address. Please try arain.
</em>
</label>
    <input name="email" id="email" type="text" />
  </div>
  <div>
    <label for="url">Web Address:</label>
    <input name="url" id="url" type="text" />
  </div>
</fieldset>

 显示效果：

 修饰：特定位置减小字号并且让文本编程红色

 

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