fieldset ----- 不常用的HTML标签
2024-08-31 01:29:59
fieldset 元素可将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。
当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。其默认格式是设置边框，可通过设置style属性来改变。
<fieldset> 标签没有必需的或唯一的属性,一个表单元素form里可能有好几个<fieldset>。
其结构一般如下：
<fieldset>
<legend>fieldset 元素定义的标题</legend>
<!-- 正常表单元素 -->
</fieldset>
下面是示例1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>fieldset示例</title>
</head> <body>
<form method="post" action="submit.html">
<fieldset> <label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your name" required="required" />
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your email address" required="required" />
</fieldset>
</form>
</body>
</html>
相当于将fieldset中的表单元素打包在了一起，并加了一个外边框。下面是代码跑出来的结果图1。
示例2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>fieldset示例</title>
</head> <body>
<form method="post" action="submit.html">
<fieldset>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your name" required="required" />
</fieldset>
<fieldset>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your email address" required="required" />
</fieldset>
<fieldset>
<label for="message">Message:</label>
<textarea cols="45" rows="7" id="message" name="message" required placeholder="Write your message here."></textarea>
<fieldset>
<input type="submit" value="Send" />
</fieldset>
</form>
</body>
</html>
一个表单元素form里可能有好几个<fieldset>，每一个都加边框。结果图2
示例3
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>fieldset示例</title>
</head> <body>
<form method="post" action="submit.html">
<fieldset>
<p>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your name" required="required" />
</p>
<p>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your email address" required="required" />
</p>
<p>
<label for="message">Message:</label>
<textarea cols="45" rows="7" id="message" name="message" required placeholder="Write your message here."></textarea>
</p>
<input type="submit" value="Send" />
</fieldset>
</form>
</body>
</html>
与示例2的区别，表单元素form里只有一个<fieldset>，只加一个大边框。结果图3
最新文章
- [BZOJ3139][HNOI2013] 比赛
- Python学习--06切片
- android 渐变展示启动屏
- ECMASCRIPT 6中字符串的新特性
- 使用 Python 抓取欧洲足球联赛数据
- 修改 ~/.bashrc显示 git 当前分支
- jquery笔记（仅供个人参考）
- 【ios控件】UIScrollView 事件说明
- Oracle EBS Report 输出字符字段前部＂0＂被Excel自动去掉问题
- 【Xamarin挖墙脚系列：常用的Mac 命令】
- 64位系统访问注册表SOFTWARE\Microsoft\Windows\CurrentVersion\Uninstall
- 阿里巴巴的datasource
- MySQL基础语法命令
- Java系列 - 用Java8新特性进行Java开发太爽了
- css小工具
- javascript实现双向数据绑定
- Perl读取标准输入<STDIN>、读取文件输入<>和chomp函数
- Mysql5.7实现主从复制、基于GTID的主从复制、并行复制
- suricata 配置文件threshold
- Cracking The Coding Interview5.1