Add HTML inputmode attribute

[NiedziolkaMichal]

This is interactive example for global attribute inputmode.

[wbamberg]

I think it would be helpful to understand, here, for the example to help express why we should use something like inputmode=email rather than <input type="email"....

Especially given stuff like this in the page:

Inputs that require email addresses should typically use <input type="email"> instead.

I found this article helpful: https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/ (as often happens, CSS tricks is more helpful to me than MDN :(.

For instance:

Using the numeric value with an input of type="text" may actually make more sense than setting the input to type="number" alone because, unlike a , inputmode="numeric" can be used with maxlength, minlength and pattern attributes, making it more versatile for different use cases.

...so maybe we could craft an example where we want to use some of these attributes? Not sure what though. Maybe "enter an 8 digit code":

<label> Enter an 8-digit code:
  <input type="text" maxlength="8"
         inputmode="numeric" pattern="[0-9]*"
         value="42">
</label>

?

Similarly this, for url:

The url value provides a handy shortcut for users to append TLDs (e.g. .com or .co.uk) with a single key, as well keys typically used in web addresses, like the dot (.) and forward slash (/) characters. The exact TLD displayed on the keyboard is tied to the user’s locale.

This could also be a useful keyboard to show users if your input accepts domain names (e.g. css-tricks.com) as well as full URIs (e.g. https://css-tricks.com). Use type="url" instead if your input requires validating the input.

...seems like it could be the basis of a good example.

[github-actions]

This pull request has merge conflicts that must be resolved before it can be merged.

[chrisdavidmills]

Hi @NiedziolkaMichal! Are you still interested in working on this example? If not, I'd be happy to finish it off.

I think @wbamberg's comment is spot on in terms of what needs to be done; I also think you should refrain from using <b> (or other similar elements commonly used for presentation) unless you are actually using it for a semantic purpose. In this case, it looks like you are using it purely for presentation, therefore <strong> would be more appropriate.

[bsmth]

Hi @chrisdavidmills thanks a lot for the offer to help out, do you still want to take this? @NiedziolkaMichal - I'm going to close this one for now, but let us know if you'd like to come back to it again before Chris works on it. Thanks all!

[chrisdavidmills]

@bsmth yup, can do.