TL;DR
See here for a list of every single input type.
The bad ones:
buttondatedatetime-localemailmonthnumberresetsearchsubmittimeweek
The good ones:
checkboxfilehiddenpasswordradiotext
The I’m not sure ones:
colorimagerangetelurl
If you have any info/knowledge on whether these inputs are good or bad let me know!
The longer version
Button like inputs
buttonresetsubmit
As far as I can tell they’re not inherently terrible but you’re probably just better off using the <button> version of them:
<button type="button"><button type="reset"><button type="submit">
But for reset, keep in mind that:
You should usually avoid including reset buttons in your forms. They’re rarely useful, and are instead more likely to frustrate users who click them by mistake (often while trying to click the submit button).
– MDN Web Docs
Dates
datedatetime-localmonthtimeweek
Is input type=”date” ready for use in accessible websites? by Graham Armfield
Why GOV.UK Design System doesn’t use input[type="date"]
Maybe You Don’t Need a Date Picker by Adrian Roselli
If you really do need a date picker:
- ARIA APG Date Picker Dialog Example
- ARIA APG Date Picker Combobox Example
- Duet Date Picker
- Tommy Feldt’s inclusive datepicker
Number
We take a look at why the GOV.UK Design System changed the element it uses for inputting numbers, making it more accessible and easier to use
Related documentation The documentation and code examples for on how to ask users for an email address (under ‘Help users to enter a valid email address’) states: setting the type attribute to emai…
Search
Another case of the headline saying it all. If you have a valid, accessible search field (with a useful, sensible label) then you can probably ignore type=”search” and use type=”text” instead. I made a code sample you can use for testing in your preferred set-up; it is what I used…
