Tag: instead

What to Use Instead of Number Inputs

You might reach for <input type="number> when you’re, you know, trying to collect a number in a form. But it’s got all sorts of issues. For one, sometimes what you want kinda looks like a number, but isn’t one (like how a credit card number has spaces), because it’s really just a string of numbers. Even more importantly, there are a variety of screen reader problems.

Hanna Laakso documents the problems for GOV.UK. This is what they landed on:

<input type="text" inputmode="numeric" pattern="[0-9]*">

The inputmode attribute is pretty great, and we have a deep dive on that.

Phil Nash came to (almost) same exact conclusion, and blogged about improving the experience of a two-factor auth code input on the Twilio blog:

<input   type="text"   name="token"   id="token"   inputmode="numeric"   pattern="[0-9]*"   autocomplete="one-time-code" />

That last attribute is interesting and new to me. It means you get this super extra useful experience on browsers that support it:

iOS screen with a numeric input and a text message offering to auto-fill the two-factor auth

There are other autocomplete values, as Phil writes:

There are many autocomplete values available, covering everything from names and addresses to credit cards and other account details. For sign up and login there are a few autocomplete values that stand out as useful hints: usernameemailnew-passwordcurrent-password.

Browsers and password managers have very good heuristics to find login forms on web pages, but using the username and current-password values make it very obvious. 

The post What to Use Instead of Number Inputs appeared first on CSS-Tricks.


, ,

Why do we use .html instead of .htm?

Interesting question from Andy:

The most likely answer from the thread: DOS was a massive operating system for PCs for a long time and it had a three-character limit on file extensions.

Interesting that the first book on HTML covers this specifically:

Where my mind went was server software. I know that web servers automatically do different things with different file types. In a test on my own server (set up to serve a WordPress site), I put some files at the root that all contain the exact same content: <h1>Cool</h1>

  • file.text = file is rendered as plain text in browser (Content-Type: text/plain)
  • file.html = file renders as HTML in browser (Content-Type: text/html)
  • file.htm = file renders as HTML in browser (Content-Type: text/html)
  • file.fart = file is downloaded by browser (Content-Type: application/octet-stream)

You can write code to serve files with whatever content types you want, but in lieu of that, file extensions do matter because they affect how default web servers choose to serve file type headers.

The post Why do we use .html instead of .htm? appeared first on CSS-Tricks.


, ,