大家好，欢迎来到IT知识分享网。
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
更多专业前端知识，请上 【猿2048】www.mk2048.com
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/109527.html
