The depths of the input element

https://www.htmhell.dev/adventcalendar/2023/8/

by todsacerdoti • 3 years ago

84 21 3 years ago

beebeepka• 3 years ago

Ha, I actually didn't know some of this stuff. I am guilty of not being very helpful to mobile and disabled users so far, mostly because I almost never work on user facing projects. Which is terrible excuse because why wouldn't a visually impaired or disabled person not be working in a back office or something.

We should not be sticking to what works for "most people". I am sorry.

midasuni2• 3 years ago

If you were sorry you would change your approach.

midasuni2• 3 years ago

Chrome and Edge have been known to send the contents of <input> elements to a spellchecking service over the network, exposing whatever was in the field

One day maybe someone will write a client side spell checker that can work without sending things to a data centre to be rendered.

jjtheblunt• 3 years ago

Hasn't Apple done that with the iOS/WatchOS resident language models, for one example?

wild_egg• 3 years ago

I read the parent comment here as sarcasm... We've had offline spell checkers for decades. Sending our text to some server for checking is a modern horror

cloths• 3 years ago

Nice write-up! The nuances between browsers can be annoying yes, if I remember correctly the spellcheck behaviour for contenteditable div are also different between FF and Chromium-based.

couchand5• 3 years ago

Love to see recognition of inputmode. Remember, the one true ZIP code field is

    <input type="text" inputmode="numeric">

Sad to see the invalid markup throughout. The input tag is void, it has no closing tag. Self-closing tags are not HTML!

Filligree2• 3 years ago

Love to see recognition of inputmode. Remember, the one true ZIP code field is

Would that allow me to enter my alphanumeric zip code on a cellphone?

couchand5• 3 years ago

You may have an alphanumeric postal code but as far as I'm aware there are no alphanumeric ZIP codes.

MrJohz• 3 years ago

Rather than arguing about what is and isn't a zip code, here's an actual answer: no, at least on Firefox Android (and I assume generally on Android devices), if you have "inputmode=numeric", then the only keyboard available to the user is the phonepad-style number keyboard, and they cannot switch to another keyboard.

This honestly surprised me, my expectation was that it would select a keyboard by default, but you'd still be able to switch to other keyboards manually. So I guess if your zip/postcode/PLZ/etc field needs to accept international values, don't use inputmode=numeric (or similar) on it.

threatofrain• 3 years ago

<p>You can get a kind of self-close with this.

<p>Although it only works on some elements.

extra88• 3 years ago

They're referring to the use of the trailing slash in examples like this: <input type="text" inputmode="numeric" />

Such slashes were mandatory in XHTML for such elements but aren't a thing in HTML. They're also not invalid, the HTML validator says "Info: Trailing slash on void elements has no effect and interacts badly with unquoted attribute values."

ano-ther• 3 years ago

Good article.

Please don’t use autocapitalize=words for name input fields. It makes people named de Haan unhappy.

The depths of the input element

Related Stories