form中的fieldset标签应用

不得不说，<fieldset>是个漂亮的家伙。

使用<fieldset>与<legend>可以设计出很好的表单。

<style>
fieldset:nth-child(odd){
border:2px groove #abcdef;
margin-bottom:10px;
}
</style>
<form><fieldset><legend>健康信息</legend>身高：<input type="text" />体重：<input type="text" /></fieldset><fieldset><legend>家庭信息</legend>住址：<input type="text" />电话：<input type="text" /></fieldset><fieldset><legend>个人信息</legend>姓名：<input type="text" />性别：<input type="text" /><br/>
籍贯：<input type="text" />
年龄：<input type="text" /></fieldset>
</form>

　　如果无法显示框框，那说明浏览器太老了（嗯，老IE）

简单的应用效果如下。

健康信息身高：体重：家庭信息住址：电话：个人信息姓名：性别：
籍贯：年龄：

简单的嵌套效果如下：

  <fieldset><legend>健康信息</legend>身高：<input type="text" />体重：<input type="text" /><fieldset><legend>健康信息</legend>身高：<input type="text" />体重：<input type="text" /></fieldset></fieldset>

健康信息身高：体重：健康信息身高：体重：

转载于:https://www.cnblogs.com/empist/p/6552435.html

form中的fieldset标签应用相关推荐

fieldset标签及相关设置
在HTML中fieldset元素可将表单内的相关元素分组. <fieldset>标签将表单内容的一部分打包,生成一组相关表单的字段.当一组表单元素放到<fieldset>标签内 ...
HTML中的form表单的标签、属性、属性值； CSS以及HTML5新增属性、属性值
form表单HTML5.CSS3标签及属性.属性值 form表单HTML标签.属性.属性值: (单行文本输入框) (密码输入框) (单选框) (多选框) (提交按钮) (重置按钮) 或者按钮(空按钮) ...
html中fieldset改颜色,HTML fieldset 标签的具体用法是什么？怎么用fieldset设置边框颜色？...
HTML 标签的具体用法是什么?怎么用fieldset设置边框颜色?本篇文章为大家详细的介绍了HTML 标签的一些用法(有实例)和如何跟别的元素组合使用的一些技巧 HTML中fieldset标签的定义 ...
fieldset在form中的用法
在表单的应用中,我们有时会用到对 form 的信息进行分组,例如"注册(regForm)",可能会将注册信息分组成基本信息(一般为必填),详细信息(一般为可选),因此可考虑在 fo ...
antd-vue中的form表单label标签for导致点击文字触发输入框解决方案
antd-vue中的form表单label标签for导致点击文字触发输入框解决方案参考文章: (1)antd-vue中的form表单label标签for导致点击文字触发输入框解决方案 (2)http ...
[转]Form中控制Tab画布不同标签间切换的方法
转自:http://yedward.net/?id=68 Form中一般常用的画布类型包括content.stacked.tab这三种,其实content类型的画布是每一个form都必须有的,而且只能 ...
fieldset在form中的用法（表单简单实例）
fieldset:对表单进行分组,一个表单可以有多个fieldset. fieldset标签会在包含的文本和input等表单元素外面形成一个方框,legend元素作为标题. <html> ...
html中form标签的作用style,HTML5中meta常用标签属性说明
HTML5中meta常用标签属性说明 IE 兼容模式,Bootstrap 不支持 IE 古老的兼容模式.为了让 IE 浏览器运行最新的渲染模式下,建议将此标签加入到你的页面中: content属性 ...
bootstrap中fieldset标签恢复原样式
bootstrap重写了fieldset标签和其中的legend标签样式. 恢复原样式设置如下: fieldset {padding: .35em .625em .75em;margin: 0 2px ...

form中的fieldset标签应用

form中的fieldset标签应用相关推荐

最新文章

热门文章