这篇文章需要文法复核。如何帮忙。
这篇翻译不完整。请帮忙从英语翻译这篇文章。
Content categories | Flow content, sectioning root, listed, form-associated element, palpable content. |
---|---|
Permitted content | An optional <legend> element, followed by flow content. |
Tag omission | 不允许,开始标签和结束标签都不能省略。 |
Permitted parent elements | Any element that accepts flow content. |
DOM interface | HTMLFieldSetElement |
Note: unlike almost any other element, the WHATWG HTML Rendering spec suggests
as part of the default style for min-width
: min-content<fieldset>
, and many browsers implement such styling (or something that approximates it).
属性
fieldset 的所有属性
disabled
HTML5- If this Boolean attribute is set, the form controls that are its descendants, except descendants of its first optional
<legend>
element, are disabled, i.e., not editable. They won't receive any browsing events, like mouse clicks or focus-related ones. Often browsers display such controls as gray. form
HTML5- 规定
fieldset
所属的form
表单。 这个属性的值与其所属的form
的ID
相同。默认值是最近的那个form
。 name
HTML5- The name associated with the group.
The label for the field set is given by the first
<legend>
element that is a child of this field set.
Examples
Example #1: Form with fieldset, legend, and label
<form action="test.php" method="post"> <fieldset> <legend>Title</legend> <input type="radio" id="radio"> <label for="radio">Click me</label> </fieldset> </form>
Example #2: Simulating an editable <select>
through a fieldset
of radioboxes and textboxes*
The following example is made of pure HTML and CSS. There is no JavaScript code.
Be warned that screen readers and assistive devices will not interpret the following form correctly; this example would be invalid html if the correct elements were used.
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Editable [pseudo]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-family: Tahoma; 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 { background: #ffcccc url("data:image/gif;base64,R0lGODlhEAAQANU5APnoxuvr6+uxPdvb2+rq6ri4uO7qxunp6dPT06SHV+/rx8vLy+nezLO0sbe3t9Ksas+qaaCEV8rKyp2dnf39/QAAAK6ursifZHFxcc/Qzu3mxYyMjExCJnV1dc6maO7u7o+Pj2tXNoaGhtfDpKCDVu3lxM+tcaKEV9bW1qOFVWNjY8KrisTExNra2nBbObGxsby8vO/mu7Kyso9ZAuzs7MSgAIiKhf///8zMzP///wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAADkALAAAAAAQABAAAAaXwJxwSCwOYzWkMpkkZmoAqDQaJdpqAqw2m53NRjlboAarFczomcE0C99o8DgNMVM8Tm3bbYDr9x11DwkzDG5yc2oQJIRCenx/MxoeETM2Q3pxATMlF4MYlo17OAsdLispMyAioIY0BzMcITMTKBasjgssFTMqGxItMjYUoTQBBAQHxgE0wZcfMtDRMi/QrA022NnaNg1CQQA7") no-repeat 2px center !important; } 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>
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard <fieldset> |
Living Standard | Definition of the fieldset element |
WHATWG HTML Living Standard | Living Standard | Suggested default rendering of the fieldset and legend elements |
HTML5 <fieldset> |
Recommendation | |
HTML 4.01 Specification <fieldset> |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | 1.0 (1.7 or earlier) | (Yes) | (Yes) | (Yes) |
disabled attribute |
(Yes) | (Yes) | (Yes)[1] | 12 | 6 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (Yes) | 1.0 (1.0) | (Yes) | (Yes) | (Yes) |
disabled attribute |
4.4 | ? | ? | ? | 6.0 |
[1] Not all form control descendants of a disabled fieldset are properly disabled in IE11; see IE bug 817488: input[type="file"]
not disabled inside disabled fieldset
and IE bug 962368: Can still edit input[type="text"]
within fieldset[disabled]
.
Bugs
- bug 504622 - Fieldsets never shrink below their
min-intrinsic
width - WebKit bug 123507 -
min-width:
on fieldset-webkit-min-content
- StackOverflow discussion with workarounds for the above bugs
See also
- Other form-related elements:
<form>
,<legend>
,<label>
,<button>
,<select>
,<datalist>
,<optgroup>
,<option>
,<textarea>
,<keygen>
,<input>
,<output>
,<progress>
and<meter>
.