Bad HTML form in media upload form

[RanYanivHartstein]

The media upload form in wp-admin/wp-includes/media.php for uploading images has one form field defined in different HTML than all the rest. This includes using an image instead of abbreviated text to mark a field as required, and unnecessarily wrapping one form field in paragraph tags.

[RanYanivHartstein]

Patch to fix bad HTML form in media upload form

[azaozz]

This form replaces TinyMCE's Insert Image dialog and behaves in similar way. As soon as an image URL is entered, it loads the image in the background to check that it's accessible (some sites have "hotlinking protection") and to get the exact width of the image (needed for adding captions).

There's a small icon that gives feedback when the entered URL is not accessible or mistyped. It replaces the "Required" asterisk. For that to work smooth, the asterisk is an icon too.

The extra <p> tag is there to add a margin between the required and the optional fields in the form.

[westi]

Replying to azaozz:

This form replaces TinyMCE's Insert Image dialog and behaves in similar way. As soon as an image URL is entered, it loads the image in the background to check that it's accessible (some sites have "hotlinking protection") and to get the exact width of the image (needed for adding captions).

There's a small icon that gives feedback when the entered URL is not accessible or mistyped. It replaces the "Required" asterisk. For that to work smooth, the asterisk is an icon too.

The extra <p> tag is there to add a margin between the required and the optional fields in the form.

Thanks for the explaination.

Does that make this WONTFIX?

[azaozz]

There are few HTML validation errors that weren't mentioned by the reporter, but since the title is "Bad HTML...", perhaps can fix them here instead of a new ticket.

[azaozz]

(In [8361]) Fix invalid HTML and remove duplicate fields. Fixes #7293 for trunk.

[azaozz]

Re-open for 2.6.1

[azaozz]

(In [8362]) Fix invalid HTML and remove duplicate fields. Fixes #7293 for 2.6.

[RanYanivHartstein]

This still doesn't explain why an <abbr> tag is used to show the asterisk in one form field, whereas in others an image is used.

Furthermore, using a <p> to add spacing is bad form - it would be much better to simply increase the bottom margin of the relevant element.

The reason I opened this in the first place is because building the form field this way totally breaks when applying the RTL styles, and it seemed like a better idea to fix the root of the problem for all users instead of applying lines and lines of css hacks to override this just for RTL users.

[westi]

2.6.1 has been released, moving to 2.6.2 milestone

[azaozz]

Replying to RanYanivHartstein:

This still doesn't explain why an <abbr> tag is used to show the asterisk in one form field, whereas in others an image is used.

Because the image is used to show the state of the entered URL.

Furthermore, using a <p> to add spacing is bad form - it would be much better to simply increase the bottom margin of the relevant element.

<p> defines new paragraph there.