HTML Autocomplete sms code


Learn how to help the used showing one-time-password codes in HTML.

9 Mar, 2021 · 1 min read

I’m sure you’ve seen these around, you have to enter an SMS code, and it pops up in the input field.

But did you know this is super easy to achieve in HTML? Yes, HTML, no fancy JavaScript, nothing!

What I’m talking about looks like this:

SMS autocomplete in HTML

HTML Structure

For this to work we need a specific input element with some attributes:


As you can see, we render a numeric input to show the number keyboard on mobile devices. But the proper magic is in the autocomplete field. The one-time-code is used to help the user.

Note: The are multiple autocomplete values we can use: Read more on MDN

You can find the full HTML structure on the following Codepen.

See the Pen Autocomplete code by Chris Bongers (@rebelchris) on CodePen.

Browser support

Unfortunately, this will only work in Safari and iOS at the moment. The autocomplete, in general, has pretty good support.

HTML autocomplete browser support

Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Submit button outside the form

4 Dec, 2022 · 1 min read

Submit button outside the form

Trying out native dialog modals

8 Aug, 2022 · 3 min read

Trying out native dialog modals

Join 2099 devs and subscribe to my newsletter