Evergreen DokuWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Form input type, inputmode, and autocomplete attributes ======

[[https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types|The input element has several types]] that may be more useful than text, especially on mobile devices where the virtual keyboard can change. In particular, email, url, and tel correspond to existing IDL field types and can be used to provide a better user experience.

While type="date" and type="datetime" exist, they are problematic in several operating systems ([[https://gist.github.com/RobertAKARobin/850a408e04d5414e67d308a2b5847378|especially Safari on iOS]]) and [[https://www.hassellinclusion.com/blog/input-type-date-ready-for-use/|accessibility testing suggests that more straightforward numeric inputs are better]].

For numeric inputs, type="number" can be confusing and is sometimes not appropriate, given that it is intended to be used for quantities that can be incremented (thus the stepper controls). The ''inputmode="numeric"'' and ''inputmode="decimal"'' attributes for ''input type="text"'' fields provide a better mobile user experience while not enforcing overly restrictive validation rules.

See also:

  * [[https://www.htmhell.dev/adventcalendar/2023/8/|The hidden depths of the input element]]
  * [[https://better-mobile-inputs.netlify.app/|Build a Better Mobile Input]]

===== Roadmap =====

  - <del>Add autocomplete attributes to patron registration: [[https://bugs.launchpad.net/evergreen/+bug/1778063|#1778063]]</del>
  - Add support for input type and inputmode to the fieldmapper editor component: [[https://bugs.launchpad.net/evergreen/+bug/2105677|#2105677]]
  - Add email, URL, and telephone input type attributes to IDL fields
  - Add numeric and decimal inputmode to IDL fields where the datatype is text but numbers are expected; add ''numeric'' class to grid cells when the IDL field has this inputmode