Fine-tuning Text Inputs

Garrett talks through some handy HTML attributes: spellcheck, autofocus, autocapitalize, autocomplete, and autocorrect:

While they feel like small details, when we set these attributes on inputs, we streamline things for visitors while also guiding the browser on when it should just get out of the way.

Fine-tuning Text Inputs

Tagged with

Responses

joe jenett

  • <html-include> 📌

    …a web component that fetches HTML and includes it into your page.

  • Obsidian PopClip Extension 📌

    Captures the selected text to Obsidian, placing it either in a specified file or in the Daily Note page, optionally under a configurable heading. […]

    ⚠️ Heads up! Preparation steps in Obsidian are needed. Please read the Configuration section carefully.

  • Fine-tuning Text Inputs ⇦

    Web forms and inputs support a variety of additional attributes that can provide hints to the browser and improve the user experience of filling out forms online. With the tiniest bit of extra effort, we can make sure our forms help rather than hinder.

  • Sublinks 📌

    …a state-of-the-art link aggregation platform, reminiscent yet advanced compared to Lemmy & Kbin.

  • gcons 📌

    Comprehensive collection of 100 creative, open source and multi-purpose icons in 12 colors for the web and desktop applications.

# Posted by joe jenett on Friday, June 14th, 2024 at 4:07pm

Related links

Progressively Enhanced Form Validation, Part 1: HTML and CSS – Cloud Four

A great reminder of just how much you can do with modern markup and styles when it comes to form validation. The :user-invalid and :user-valid pseudo-classes are particularly handy!

Tagged with

HTML test cases

This is handy—an up-to-date list of tests run on form fields with different combinations of screen readers and browsers.

Tagged with

HTML Forms: How (and Why) to Prevent Double Form Submissions – Bram.us

I can see how this would be good to have fixed at the browser level.

Tagged with

MSEdgeExplainers/explainer.md at main · MicrosoftEdge/MSEdgeExplainers

This is great! Ideas for allowing more styling of form controls. I agree with the goals 100% and I like the look of the proposed solutions too.

The team behind this are looking for feedback so be sure to share your thoughts (I’ll probably formulate mine into a blog post).

Tagged with

Limiting input type=”color” to a certain palette (from an image) | Christian Heilmann

I never thought of combining the datalist element with input type="color"—it’s pretty cool that it just works!

Tagged with

Related posts

Command and control

HTML’s new `command` attribute on the `button` element could be a game-changer.

The datalist element on iOS

Some buggy behaviour has been fixed in iOS 18 but now there’s a new bit of weirdness.

Pickin’ dates on iOS

Mobile Safari doesn’t support the min and max attributes on date inputs.

Good form

Science, the web, and user experience.

Submitting a form with datalist

It can autocomplete, but how do you get it to autosubmit?