由CSS控制的登录表单

<html>
  <head>
    <title>form.html</title>
 <style type="text/css">
 *{
  margin:0;
  padding:0;
 }
 body{
  padding:15px;
 }
 #loginForm fieldset{
  padding:0 10px 10px;
  border:1px #D0D0BF solid;
 }

 #loginForm fieldset div{
  padding:2px;
 }
 #loginForm .dataArea input{
  width:150px;
  padding:2px;/*增加文本框的高度*/
  border:1px #7F9DB9 solid;
 }
 
 #loginForm .first{
  padding:12px 2px 2px;
 }
 #loginForm .otherArea{
  padding-left:48px;
  font-size:75%;
 }
 #loginForm .subArea{
  padding-left:48px;
  font-size:12px;
 }
 #loginForm .subArea input{
  border:1px #003C74 solid;/*这里是按钮边框明显的深蓝色边框*/
  outline:1px #F1EFEB solid;/*在深蓝色边框外面注意看时会发现还有条很淡的边，这里用
  outline来完成效果，不过outline只能四个边同时出现，并且只能是同一种样式的，勉强先顶着用。*/
  padding:1px 4px;/*这里使用padding方式来增加空白*/
 }
 </style>
  </head>
 
  <body>
 <form id ="loginForm">
  <fieldset>
   <legend>用户登陆</legend>
   <div class="dataArea first">
    <label for="username">用户：</label>
    <input type="text" id="username" name="username" />
   </div>
   <div class="dataArea">
    <label for="password">密码：</label>
    <input type="password" name="password" id="password" />
   </div>
   <div class="otherArea">
    <input type="checkbox" id="persistent" />
    <label for="persistent">在此计算机上保存我的信息</label>
   </div>
   <div class="subArea">
    <input type="submit" value="登录" />&nbsp;&nbsp;<input type="reset" value="重置" />
   </div>
  </fieldset>
 </form>   <br><br><br>
<p><a href="register.html">注册页面</a></p>
  </body>
</html>