fieldset使用示例

来源：互联网发布：均线策略优化编辑：程序博客网时间：2024/04/30 00:53

fieldset 元素可将表单内的相关元素分组。当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

<fieldset> 标签没有必需的或唯一的属性，可为fieldset设置边框，背景色等样式。<legend> 标签为 fieldset 元素定义标题，同样也可为其设置边框等样式。

使用fieldset标签，可以很方便的实现对元素的分组，同时可通过legend标签对各分组指定标题，简单描述各分组信息。

下面为一个简单的示例，运行效果如下：

页面代码如下：

<!DOCTYPE html><html><head>    <title>fieldSet测试</title>    <meta http-equiv="content-type" content="text/html;charset=gb2312"></head><body><fieldset style="width:30%;width:30%;border:1px dashed #32cd32;">    <legend style="background-color: #32cd32">*用户基本信息</legend>      用户名：<input id="userName">    <p>登录密码：<input id="password" type="password">    <p>确认密码：<input id="passwordSnd">    <p>    邮箱：<input id="email" type="password"><br>    <p>    性别：<input type="radio" value="0">男           <input type="radio" value="1">女</fieldset><fieldset style="width:30%;background-color: #d3d3d3">    <legend style="background-color: #ffffff">教育背景</legend>    学校名称：<input >    <p>    时间：<input></p>    <p>    专业：<input></p></fieldset></body></html>

0 0