3 ms·
> The HTML for this example looks roughly like this: <style> .special { accent-color: papayawhip } </style> <input type=checkbox switch checked> <input type=ch
by sublinear 3y ago
> The HTML for this example looks roughly like this:
<style> .special { accent-color: papayawhip } </style>
<input type=checkbox switch checked>
<input type=checkbox switch checked class=special>
I immediately don't trust these docs nor the implementation due to the almost invalid HTML examples. Attributes with spaces require quotes around the value. Opinions that extend beyond the standards, but even to the examples is why the web is so ugly.
The way this parses is that switch and checked are attributes with no value. That is technically correct but ambiguous to humans. Unsupported browsers will just ignore the switch attribute, but adding custom attributes this way is bound to cause weird bugs if using frameworks that don't prefix the names of their custom attributes. I believe certain doctypes or serving the HTML with another content type (XML) will throw an error for not having the quotes.
- abdusco 3y ago> Attributes with spaces require quotes around the value. It's meant to be read/parsed as `type="checkbox"`, `switch="true"`, `checked="true"`, `class="special"`. They're different attributes, not a long `type` attribute without quotes.
- sublinear 3y ago> checked="true" https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in... That's not how the value of the checked attribute works. It's already messed up enough. > The value attribute is one which all <input>s share; however, it serves a special purpose for inputs of type checkbox: when a form is submitted, only checkboxes which are currently checked are submitted to the server, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string "on" by default.
- vidarh 3y ago> That's not how the value of the checked attribute works. It is roughly/conceptually how the "checked" attribute works, in that boolean attributes provided by name but without a value will be set/truthy. From the link you gave: > checked > A boolean attribute indicating whether this checkbox is checked by default (when the page loads). What you quoted is how the "value" attribute works, which is entirely irrelevant to how the "checked" attribute works.
- domenicd 3y agoAlmost, it's `switch=""`, `checked=""`.
- Izkata 3y agoConvention used to be checked="checked"
- vidarh 3y agoApart from the issue regarding attributes, I do agree adding an attribute on the element isn't great. Though mostly because this is a functionally a checkbox, as evidenced by how they're fine with it falling back to a checkbox, and so they could have just added a CSS attribute instead. > I believe certain doctypes or serving the HTML with another content type (XML) will throw an error for not having the quotes. That is irrelevant - most HTML found in the wild is not particularly close to valid XML as it is. And as per sibling comments, there's no need for quotes here for html - they are multiple separate boolean attributes, and the norm in HTML is to use those without a value for the truthy case.