Updating button as part of a wider piece of work

[rachelandrew]

I am going to work on #2611 and just wanted to check I'm doing the right thing here, so I updated the text above the table on the input element page, and then updated type="button" to add an Attributes section.

I also noted that in these type pages we have live examples using divs not headings so I can fix that while I'm in there.

cc: @wbamberg who raised the initial issue. If we are happy with the approach I can rattle through and do the others.

[github-actions]

Preview URLs

• https://pr5764.content.dev.mdn.mozit.cloud/en-US/docs/Web/HTML/Element/input
• https://pr5764.content.dev.mdn.mozit.cloud/en-US/docs/Web/HTML/Element/input/button

Flaws

Note! 1 document with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/HTML/Element/input
Title: <input>: The Input (Form Input) element
on GitHub
Flaw count: 9

• macros:
  • /en-US/docs/Web/API/HTMLInputElement/value does not exist
  • /en-US/docs/Web/API/HTMLInputElement/valueAsNumber does not exist
  • /en-US/docs/Web/API/DOMContentLoaded does not exist
  • /en-US/docs/Web/API/HTMLInputElement/checkValidity does not exist
  • /en-US/docs/Web/API/HTMLInputElement/setCustomValidity does not exist
  • and 4 more flaws omitted

External URLs

URL: /en-US/docs/Web/HTML/Element/input
Title: <input>: The Input (Form Input) element
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/HTML/Element/input/button
Title: <input type="button">
on GitHub

No new external URLs

[wbamberg]

Thanks for asking, @rachelandrew ! The input element is a bit of a nightmare to document.

I think since I filed that issue things have changed a bit. In particular in mdn/sprints#2308, Estelle did a ton of work on the input element page and it makes more sense now.

In particular we have https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes which gives a table with all the input attributes, which also tells us which types support each attribute.

Then for types that support "special" attributes that not all types support (for example, placeholder), the type page has an "Additional attributes" section listing only the special attributes. For example: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image#additional_attributes.

So this seems pretty usable actually.

From a user perspective, I guess what they most want to see, for each type, is a single list of all attributes relevant to that type. So ideally it should include all the "common" attributes like value, and also all the special ones like placeholder, in a single list. We don't quite have this now because "Additional attributes" doesn't list the "common" attributes, but just defers to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input for them. And then for types that only support the "common" attributes, like button, we don't have anything.

Perhaps as a fairly simple improvement we could:

• rename "Additional attributes" to "Attributes", and make sure every input type has that section
• if the type doesn't have any special attributes, like button the "Attributes" section could say that, and just point to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes for the common ones
• if the type does have special attributes, like https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image, it could point to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes, but then additionally list all the special attributes that apply

We should also I think get rid of that "Supported common attributes" row in the table, since that would be covered by an "Attributes" section.

If we wanted to go further we could also list the common attributes in "Attributes", but the problem then is all the duplication, so if we did that it would be much better to link to a separate page for each attribute.

(I think as a general principle it makes sense to treat input types as distinct elements.)

But that opens another can of worms, which is whether we should have separate pages for these attributes. We actually do have separate pages for some of them but not all: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes - but lists like the one in https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes act as of these pages don't exist. I think maybe it would be better to have separate pages for each attribute, then just link to the page from each type page. (the drawback with that is of we want to include type-specific info of course).

I'm not sure how helpful any of this is!

[rachelandrew]

@wbamberg I think we need separate pages for the attributes, because it keeps coming up in issues that we don't and, as you say, means we can list them all in the place people are likely to look for them. This is a list of all attributes (not all for input), maybe I prioritize the input ones #1712

[sideshowbarker]

It’s not clear what this PR is waiting on