上一篇：CSS中实现响应式图片库怎样做，方法是什么下一篇：CSS按钮hover怎么使用，怎样实现炫酷丰富的效果

这篇文章主要讲解了“HTML fieldset标签的使用方法是什么，如何用于登录页面”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。

HTML CSS fieldset标签是一个不太常用的表单元素分组标签，其中<legend> 标签为 <fieldset> 元素定义标题，下面是一个简单的HTML fieldset标签使用示例：

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset></form>

运行效果如图：

下面是一个比较复杂的fieldset标签使用示例，CSS login登录面板页面设计：

fieldset {
   border:none;
   margin:0;
}

input {
   border:none;
   font-family:inherit;
   font-size:inherit;
   margin:0;
   -webkit-appearance:none;
}

input:focus {
   outline:none;
}

input[type="submit"] {
   cursor:pointer;
}

#login-form {
   margin:10px;
   width:300px;
   border:1px solid #ea6e10;
   vertical-align:middle;
   border-radius:0px;
}

#login-form h3 {
   background-color:#ea6e10;
   color:#fff;
   font-size:14px;
   margin-top:0;
   padding:20px;
   text-align:right;
}

#login-form fieldset {
   background:#fff;
   border:1px #ea6e10;
   padding:20px;
   position:relative;
}

#login-form input {
   font-size:14px;
}

#login-form input[type="username"],
#login-form input[type="password"] {
   background:#dcdcdc;
   padding:12px 10px;
   width:100%;
   margin-top:5px;
}

#login-form input[type="username"] {
}
#login-form input[type="password"] {
   border-radius:0px 0px 3px 3px;
}

#login-form input[type="submit"] {
   background:#ea6e10;
   text-align:center;
   color:#fff;
   float:left;
   font-weight:bold;
   margin-top:5px;
   padding:12px 20px;
   width:100%;
}

#login-form input[type="submit"]:hover {
   background:#ea6e10;
}

.bubble
 {
   position:relative;
   width:250px;
   padding:0px;
   background:#FFFFFF;
   -webkit-border-radius:10px;
   -moz-border-radius:10px;
   border-radius:10px;
   border:#ea6e10 solid 2px;
}

.bubble:after
 {
   content:'';
   position:absolute;
   border-style:solid;
   border-width:15px 15px 0;
   border-color:#FFFFFF transparent;
   display:block;
   width:0;
   z-index:1;
   bottom:-15px;
   left:136px;
}

.bubble:before
 {
   content:'';
   position:absolute;
   border-style:solid;
   border-width:16px 16px 0;
   border-color:#ea6e10 transparent;
   display:block;
   width:0;
   z-index:0;
   bottom:-17px;
   left:135px;
}

html登录面板代码：

<body> 
 <div id="login-form" class="bubble" style="float:left;"> 
  <h3>Login</h3> 
  <fieldset> 
   <input type="username" required value="username" onBlur="if(this.value=='')this.value='username'" onFocus="if(this.value=='username')this.value='' "> 
   <!-- JS because of IE support; better: placeholder="username" --> 
   <input type="password" required value="Password" onBlur="if(this.value=='')this.value='Password'" onFocus="if(this.value=='Password')this.value='' "> 
   <!-- JS because of IE support; better: placeholder="Password" --> 
   <p><a href="#">Forgot Password?</a></p> 
   <input type="submit" value="Login">  
  </fieldset> 
 </div>   
</body>

CSS login登录面板设计，运行效果如图所示：