fieldset 元素通常用来对表单中的控制元素进行分组(也包括 label 元素)
1、属性fieldset 中包含 所有全局属性
disabled 如果设置了这个 bool 值属性, 它的后代表单控制元素也会继承这个属性, 它的首个可选的 legend 元素除外, 例如, 禁止编辑. 该元素和它的子元素不会接受任何浏览器事件, 比如点击或者 focus 事件, 一般来说浏览器会将这样的元素展示位灰色.form 规定**fieldset所属的form表单. 这个属性的值与其所属的form的ID相同. 默认值是最近的那个form**.name 控制元素分组的名称 2、案例分析 2.1、一个拥有 fieldset, legend 和 label 的表单 <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>一个拥有 fieldset, legend 和 label 的表单</title> <style type="text/css"> form{ width: 500px; height: 30px; } </style> </head> <body> <form action="https://www.baidu.com/s"> <fieldset> <legend>百度一下</legend> <label>百度搜索引擎：</label> <input type="text" name="wd" class="input"> <input type="submit" value="百度" class="submit"> </fieldset> </form> </body></html> 2.2、利用包含radioboxes 和 textboxes 的 fieldset 模拟一个可编辑的元素 <!doctype html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>利用包含radioboxes 和 textboxes 的 fieldset 模拟一个可编辑的<select>元素</title> <style type="text/css"> /* Generic form fields */ fieldset.elist, input[type="text"], textarea, select, option, fieldset.elist ul, fieldset.elist > legend, fieldset.elist input[type="text"], fieldset.elist > legend:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } input[type="text"] { padding: 0 20px; } textarea { width: 500px; height: 200px; padding: 20px; } textarea, input[type="text"], fieldset.elist ul, select, fieldset.elist > legend { border: 2px #cccccc solid; border-radius: 10px; } input[type="text"], fieldset.elist, select, fieldset.elist > legend { height: 32px; font-size: 14px; } input[type="text"]:hover, textarea:hover, select:hover, fieldset.elist:hover > legend { background-color: #ddddff; } select { padding: 4px 20px; } option { height: 30px; padding: 5px 4px; } option:not(:checked), textarea:focus { background-color: #ffcccc; } fieldset.elist > legend:after, fieldset.elist label { height: 28px; } input[type="text"], fieldset.elist { width: 316px; } input[type="text"]:focus, textarea:focus, select:focus, fieldset.elist > legend { border: 2px #ccaaaa solid; } fieldset { border: 2px #af3333 solid; border-radius: 10px; } /* Editable [pseudo]select (i.e. fieldsets with [class=elist]) */ fieldset.elist { display: inline-block; position: relative; vertical-align: middle; overflow: visible; padding: 0; margin: 0; border: none; } fieldset.elist ul { position: absolute; width: 100%; max-height: 320px; padding: 0; margin: 0; overflow: hidden; background-color: transparent; } fieldset.elist:hover ul { background-color: #ffffff; border: 2px #af3333 solid; left: 2px; overflow: auto; } fieldset.elist ul > li { list-style-type: none; background-color: transparent; } fieldset.elist label { display: none; width: 100%; } fieldset.elist input[type="text"] { width: 100%; height: 30px; line-height: 30px; border: none; background-color: transparent; border-radius: 0; } fieldset.elist > legend { display: block; margin: 0; padding: 0 0 0 5px; position: absolute; width: 100%; cursor: default; background-color: #ccffcc; line-height: 30px; font-style: italic; } fieldset.elist:hover > legend { position: relative; overflow: hidden; } fieldset.elist > legend:after { width: 20px; content: "2335"; float: right; text-align: center; border-left: 2px #cccccc solid; font-style: normal; cursor: default; } fieldset.elist:hover > legend:after { background-color: #99ff99; } fieldset.elist ul input[type="radio"] { display: none; } fieldset.elist input[type="radio"]:checked ~ label { display: block; width: 292px; background-color: #ffffff; } fieldset.elist:hover input[type="radio"]:checked ~ label { width: 100%; } fieldset.elist:hover label { display: block; height: 100%; } fieldset.elist label:hover { background-color: #3333ff !important; } fieldset.elist:hover input[type="radio"]:checked ~ label { background-color: #aaaaaa; } </style></head><body><form method="get" action="test.php"> <fieldset> <legend>Order a T-Shirt</legend> <p>Write your name (simple textbox): <input type="text" /></p> <p>Choose your size (simple select): <select> <option value="s">Small</option> <option value="m">Medium</option> <option value="l">Large</option> <option value="xl">Extra Large</option> </select></p> <div>What address do you want to use? (editable pseudoselect) <fieldset class="elist"> <legend>Address…</legend> <ul> <li><input type="radio" value="1" id="address-switch_1" checked /><label for="address-switch_1"><input type="text" value="19 Quaker Ridge Rd. Bethel CT 06801" /></label></li> <li><input type="radio" value="2" id="address-switch_2" /><label for="address-switch_2"><input type="text" value="1000 Coney Island Ave. Brooklyn NY 11230" /></label></li> <li><input type="radio" value="3" id="address-switch_3" /><label for="address-switch_3"><input type="text" value="2962 Dunedin Cv. Germantown TN 38138" /></label></li> <li><input type="radio" value="4" id="address-switch_4" /><label for="address-switch_4"><input type="text" value="915 E 7th St. Apt 6L. Brooklyn NY 11230" /></label></li> </ul> </fieldset> </div> <p>Write a comment:<br /> <textarea></textarea></p> <p><input type="reset" value="Reset" /> <input type="submit" value="Send!" /></p> </fieldset></form></body></html>