Skip to content

[DRAFT] Add readonly attribute to fieldset element #12424

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
teoeter wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[DRAFT] Add readonly attribute to fieldset element #12424

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 86 additions & 3 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58283,8 +58283,8 @@ interface <dfn interface>HTMLTextAreaElement</dfn> : <span>HTMLElement</span> {

<div algorithm>
<p>A <code>textarea</code> element is <span data-x="concept-fe-mutable">mutable</span> if it is
neither <span data-x="concept-fe-disabled">disabled</span> nor has a <code
data-x="attr-textarea-readonly">readonly</code> attribute specified.</p>
neither <span data-x="concept-fe-disabled">disabled</span> nor <span
data-x="concept-fe-readonly">readonly</span>.</p>
</div>

<div algorithm>
Expand Down Expand Up @@ -59479,6 +59479,7 @@ out of 233&#x2009;257&#x2009;824 bytes available&lt;/meter>&lt;/p></code></pre>
<dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
<dd><span>Global attributes</span></dd>
<dd><code data-x="attr-fieldset-disabled">disabled</code></dd>
<dd><code data-x="attr-fieldset-readonly">readonly</code></dd>
<dd><code data-x="attr-fae-form">form</code></dd>
<dd><code data-x="attr-fe-name">name</code> <!-- variant --> </dd>
<dt><span
Expand All @@ -59492,6 +59493,7 @@ interface <dfn interface>HTMLFieldSetElement</dfn> : <span>HTMLElement</span> {
[<span>HTMLConstructor</span>] constructor();

[<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute boolean <dfn attribute for="HTMLFieldSetElement" data-x="dom-fieldset-disabled">disabled</dfn>;
[<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute boolean <dfn attribute for="HTMLFieldSetElement" data-x="dom-fieldset-readonly">readonly</dfn>;
readonly attribute <span>HTMLFormElement</span>? <span data-x="dom-fae-form">form</span>;
[<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute DOMString <dfn attribute for="HTMLFieldSetElement" data-x="dom-fieldset-name">name</dfn>;

Expand Down Expand Up @@ -59537,6 +59539,36 @@ interface <dfn interface>HTMLFieldSetElement</dfn> : <span>HTMLElement</span> {
</ul>
</div>

<div algorithm>
<p>The <dfn element-attr for="fieldset"><code
data-x="attr-fieldset-readonly">readonly</code></dfn> attribute, when specified, causes the form
control descendants of the <code>fieldset</code> element that support being <span
data-x="concept-fe-readonly">readonly</span>, excluding those that are descendants of the
<code>fieldset</code> element's first <code>legend</code> element child, if any, to be <span
data-x="concept-fe-readonly">readonly</span>.</p>

<p class="note">Unlike <code data-x="attr-fieldset-disabled">disabled</code>, which propagates to
every form control descendant, <code data-x="attr-fieldset-readonly">readonly</code> only affects
descendants for which the concept of being read-only is meaningful: <code>input</code> elements in
states that support <code data-x="attr-input-readonly">readonly</code>, <code>textarea</code>
elements, and <span data-x="form-associated custom element">form-associated custom
elements</span>.</p>
</div>

<div algorithm>
<p>A <code>fieldset</code> element is a <dfn data-x="concept-fieldset-readonly">readonly
fieldset</dfn> if it matches any of the following conditions:</p>

<ul>
<li>Its <code data-x="attr-fieldset-readonly">readonly</code> attribute is specified

<li>It is a descendant of another <code>fieldset</code> element whose <code
data-x="attr-fieldset-readonly">readonly</code> attribute is specified, and is <em>not</em> a
descendant of that <code>fieldset</code> element's first <code>legend</code> element child, if
any.</li>
</ul>
</div>

<p>The <code data-x="attr-fae-form">form</code> attribute is used to explicitly associate the
<code>fieldset</code> element with its <span>form owner</span>. The <code
data-x="attr-fe-name">name</code> attribute represents the element's name.</p>
Expand Down Expand Up @@ -59673,6 +59705,25 @@ interface <dfn interface>HTMLFieldSetElement</dfn> : <span>HTMLElement</span> {

</div>

<div class="example">

<p>The following snippet shows a <code>fieldset</code> whose <code
data-x="attr-fieldset-readonly">readonly</code> attribute makes every text-like control inside
read-only, while leaving controls that do not support <code
data-x="attr-input-readonly">readonly</code> (such as the radio buttons) unaffected:</p>

<pre><code class="html">&lt;fieldset readonly>
&lt;legend>Shipping address&lt;/legend>
&lt;p>&lt;label>Name: &lt;input name=name value="Ada Lovelace">&lt;/label>&lt;/p>
&lt;p>&lt;label>Notes: &lt;textarea name=notes>Leave at door.&lt;/textarea>&lt;/label>&lt;/p>
&lt;p>Delivery window:
&lt;label>&lt;input type=radio name=window value=am checked> Morning&lt;/label>
&lt;label>&lt;input type=radio name=window value=pm> Afternoon&lt;/label>
&lt;/p>
&lt;/fieldset></code></pre>

</div>


<h4>The <dfn element><code>legend</code></dfn> element</h4>

Expand Down Expand Up @@ -60018,6 +60069,28 @@ interface <dfn interface>HTMLSelectedContentElement</dfn> : <span>HTMLElement</s
<!-- or the concept-option-selectedness, or the concept-fe-values... -->


<h5>Readonly</h5>

<div algorithm>
<p>A form control is <dfn data-x="concept-fe-readonly">readonly</dfn> if any of the following are
true:</p>

<ul>
<li><p>the element is an <code>input</code> element in a state that supports the <code
data-x="attr-input-readonly">readonly</code> attribute, or a <code>textarea</code> element, and
the <code data-x="attr-input-readonly">readonly</code> attribute is specified on this element
(regardless of its value); or</p></li>

<li><p>the element is a <code>textarea</code> element, an <code>input</code> element in a state
that supports the <code data-x="attr-input-readonly">readonly</code> attribute, or a
<span>form-associated custom element</span>, and is a descendant of a <code>fieldset</code>
element whose <code data-x="attr-fieldset-readonly">readonly</code> attribute is specified, and
is <em>not</em> a descendant of that <code>fieldset</code> element's first <code>legend</code>
element child, if any.</p></li>
</ul>
</div>


<h5>Association of controls and forms</h5>

<p>A <span>form-associated element</span> can have a relationship with a <code>form</code>
Expand Down Expand Up @@ -60438,7 +60511,6 @@ form.method === input; // => true</code></pre>

</div>


<h5>Form submission attributes</h5>

<p><dfn>Attributes for form submission</dfn> can be specified both on <code>form</code> elements
Expand Down Expand Up @@ -78396,6 +78468,11 @@ customElements.define("x-foo", class extends HTMLElement {
data-x="">formDisabledCallback</code> is called, given the new state as an
argument.</p></li>

<li><p>When the <span data-x="concept-fe-readonly">readonly</span> state of a
<span>form-associated custom element</span> is changed, its <code
data-x="">formReadonlyCallback</code> is called, given the new state as an
argument.</p></li>

<li><p>When the user agent updates a <span>form-associated custom element</span>'s value on behalf of
a user or <span data-x="restore persisted state">as part of navigation</span>, its <code
data-x="">formStateRestoreCallback</code> is called, given the new state and a string indicating
Expand Down Expand Up @@ -154812,6 +154889,11 @@ interface <dfn interface>External</dfn> {
<code data-x="attr-textarea-readonly">textarea</code>
<td> Whether to allow the value to be edited by the user
<td> <span>Boolean attribute</span>
<tr>
<th> <code data-x="">readonly</code>
<td> <code data-x="attr-fieldset-readonly">fieldset</code>
<td> Whether the descendant form controls that support being read-only, except any inside <code>legend</code>, are read-only
<td> <span>Boolean attribute</span>
<tr>
<th> <code data-x="">readonly</code>
<td> <span data-x="attr-face-readonly">form-associated custom elements</span>
Expand Down Expand Up @@ -158396,6 +158478,7 @@ INSERT INTERFACES HERE
Tawanda Moyo, <!-- tawandamoyo on GitHub-->
Taylor Hunt,
Ted Mielczarek,
Teo Eterovic,
Terence Eden, <!-- edent on GitHub -->
Terrence Wood,
Tetsuharu OHZEKI,
Expand Down