search

alphagov / govuk_elements

❗️GOV.UK Elements is deprecated, and will only receive major bug fixes and security patches.
https://govuk-elements.herokuapp.com/
MIT License
227 stars 90 forks source link

Date form example uses invalid HTML #551

Closed selfthinker closed 7 years ago

selfthinker commented 7 years ago

The date form example uses invalid HTML. The W3C Validator says:

Attribute pattern is only allowed when the input type is email, password, search, tel, text, or url.

It was added in #47, and I believe it was done to make sure the number keyboard shows up in some devices -- at least at the time.

We should find out if it's still necessary, and if it is, we should add some kind of documentation somewhere that the invalid HTML is intentional.

edwardhorsford commented 7 years ago

The pattern attribute forces numeric keypads on iOS devices. Having just tried it, type=number alone does not force the numeric keypad.

For other types of numbers, type=number isn't appropriate and type=text should be used. For dates it's probably fine though.

Agree should probably add some documentation.

@hannalaakso anything to add?

hannalaakso commented 7 years ago

Here's a blog post about the different iOS keypads when you add or omit the pattern attribute on number inputs: http://bradfrost.com/blog/mobile/better-numerical-inputs-for-mobile-forms We are looking to create guidance on choosing the most appropriate input and pattern for different use cases involving numbers.

Agree that adding a note about the invalid HTML is a good idea.