Skip to content
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.

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

Use semantic HTML tags for tutorial form example #2715

Merged
merged 4 commits into from
Aug 29, 2023

Conversation

timacdonald
Copy link
Contributor

@timacdonald timacdonald commented Aug 27, 2023

This PR improves the form example by:

  1. Using label tags, rather than generic inaccessible <p> tags.
  2. Removes the redundant type attribute from input tags.

If this attribute is not specified, the default type adopted is text source

  1. Adds an id tag to the input so that label tags can reference them with their for attibute.
  2. Use a submit button and provide custom text. Adding custom text between an HTML tag feels much more familiar than doing it within an attribute. This also matches how the label works.
  3. Added some spacing to ease the flow to reading the label / input pairs.
  4. Removed the "closing" slash on the inputs. We've already shown the doctype in the opening example of the PHP docs showing that we aren't using "quirks mode" or an XML type that requires closing.

I can only assume that <p> tags were used for formatting. I don't think that a horizontal form is an issue and something we need to "format". I also don't think wrapping things in <p> or <div> is the way we should promote formatting in HTML, over CSS

Docs before

Screenshot 2023-08-28 at 9 05 40 am

Docs after

Screenshot 2023-08-28 at 9 05 31 am

Rendered HTML before

Screenshot 2023-08-28 at 8 50 14 am

Rendered HTML after

Screenshot 2023-08-28 at 8 55 29 am

This PR contains the same commit to indent the form seen in #2713. This should allow both to merged / rejected independently without causing conflicts...that is if I know how git works lol 🤞

@timacdonald timacdonald marked this pull request as ready for review August 27, 2023 23:01
@TimWolla
Copy link
Member

Removes the redundant type attribute from input tags.

I disagree with that change. Explicitly providing the type makes the HTML more readable, especially since “age” could be type="number". Likewise I believe it should be <button type="submit">.

@timacdonald
Copy link
Contributor Author

Thanks for the review, @TimWolla.

I've restored the type="text" attribute on the name input and added type="number" to the age input. I like type="number" here as the casting of the (int) $_POST['age'] later shows that you can't just trust user input - even if subtly.

I've put the type attribute last, as the most important part of this tutorial, in my opinion, is the how the "name" ends up in the $_POST. The type attribute is there as a secondary thing not specifically related to the example at hand.

@TimWolla
Copy link
Member

Thank you. LGTM now.

@TimWolla TimWolla merged commit d322914 into php:master Aug 29, 2023
2 checks passed
@timacdonald timacdonald deleted the form-tags branch September 2, 2023 22:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants