HTML5 Spec (issue?): Laravel quotes boolean attribute values when merged using components
When an input tag has the required boolean attribute, I noticed some interesting differences in the handling of the output when $attributes->merge() is used with a Blade component.
If I create a standard input tag using HTML, and add the attribute required, the HTML output renders as expected, with only the attribute required being added.
- Source View
<input placeholder="input-a" required />
- HTML Output
<input placeholder="input-a" required />
If I extract this input to a component, and merge attributes, the output adds the string "required" to the boolean attribute.
- Source Component
<input {{ $attributes->merge() }} />
- Source View
<x-form-input placeholder='input-b' required />
- HTML Output
<input placeholder="input-b" required="required" />
I thought this was interesting, and required still works either way. However, I wanted to understand the differences in the output and any implications. I eventually made my way to the W3.org HTML5 specification on boolean attributes.
The spec mentions and shows that if the boolean attribute is present, the value must be an empty string or match for the attribute's canonical name. It goes on to show three valid examples. In this case they would be:
-
required -
required=required -
required=""
There are no quotes on the attribute value. Since Laravel outputs a string as the attribute value, required="required", it doesn't appear to match the HTML5 specification.
I considered opening this as an issue, or digging through Laravel source code, but wanted to see what anyone else's opinion on this might be first. Web code is generally much more forgiving then languages such as C. So, perhaps the difference between required=required and required="required" is irrelevant, but my instincts see these as two very distinct values.
Please or to participate in this conversation.