HTML fieldset标签的使用方法是什么，如何用于登录页面

来源：恒创科技编辑：恒创科技编辑部

2024-01-19 15:58:59

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

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

<form>
<fieldset>
<legend>Personalia:</legend>
Name:<inputtype="text"><br>
Email:<inputtype="text"><br>
Dateofbirth:<inputtype="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:1pxsolid#ea6e10;
vertical-align:middle;
border-radius:0px;
}

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

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

#login-forminput{
font-size:14px;
}

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

#login-forminput[type="username"]{
}
#login-forminput[type="password"]{
border-radius:0px0px3px3px;
}

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

#login-forminput[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:#ea6e10solid2px;
}

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

.bubble:before
{
content:'';
position:absolute;
border-style:solid;
border-width:16px16px0;
border-color:#ea6e10transparent;
display:block;
width:0;
z-index:0;
bottom:-17px;
left:135px;
}
html登录面板代码：
<body>
<divid="login-form"class="bubble"style="float:left;">
<h3>Login</h3>
<fieldset>
<inputtype="username"requiredvalue="username"onBlur="if(this.value=='')this.value='username'"onFocus="if(this.value=='username')this.value=''">

<inputtype="password"requiredvalue="Password"onBlur="if(this.value=='')this.value='Password'"onFocus="if(this.value=='Password')this.value=''">

<p><ahref="#">ForgotPassword?</a></p>
<inputtype="submit"value="Login">
</fieldset>
</div>
</body>
CSS login登录面板设计，运行效果如图所示：

现在大家对于HTML fieldset标签的使用方法是什么，如何用于登录页面的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注恒创科技，恒创科技将为大家推送更多相关的文章。}