Use semantic input type attributes
SkillWeb & browsinginput-types is a skill for AI agents that reviews templates, rendered HTML, and shared components for semantic input type attributes. It checks that each input uses the right type and au
Available today. Use it from your connected AI after setup.
No other account needed.
Have the skill available to your AI agent alongside the HTML files, templates, or components you want reviewed.
Then ask your AI: use the Use semantic input type attributes skill
What your AI can do with it
- Audit all input elements in an HTML file for the most appropriate type attribute
- Check whether each input has an appropriate autocomplete value
- Flag exact elements, attributes, and routes where rendered HTML violates the rule
- Update input type attributes to semantic values and add autocomplete attributes
- Explain HTML input types, their effect on mobile keyboards, and autocomplete combinations
- Review templates, server-rendered HTML, and shared components that output input markup
Getting started
- Have the skill available to your AI agent alongside the HTML files, templates, or components you want reviewed.
- Ask the agent to audit the input elements in a given HTML file and check each type and autocomplete value.
- Ask the agent to review templates, server-rendered HTML, or shared components and flag exact elements and routes that violate the rule.
- Ask the agent to fix flagged inputs by updating type attributes to semantic values and adding autocomplete attributes.
- Consult references/rule.md for implementation details, code examples, and framework-specific guidance.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/input-types/SKILL.md and read by ahel’s review.
Using type=text for every input forces mobile users to switch keyboards manually for email, phone, and number entry. The correct type also enables browser autofill to correctly identify fields for name, address, and payment data. Combined with autocomplete attributes, semantic types can make form completion 40% faster for returning users.
Quick Reference
- type=email shows the @ keyboard on mobile and enables email format validation
- type=tel shows the numeric phone keypad on mobile
- type=number shows a numeric keypad; use inputmode=numeric for fields that look like numbers but aren't
- type=date/time renders native pickers and returns standardized values
Check
Audit all input elements in this HTML file. Check whether each uses the most appropriate type attribute and autocomplete value.
Fix
Update input type attributes to semantic values and add appropriate autocomplete attributes for autofill support.
Explain
Explain the different HTML input types, what each one does on mobile keyboards, and how to combine them with autocomplete attributes.
Code Review
Review templates, server-rendered HTML, and shared components that output markup related to Use semantic input type attributes. Flag exact elements, attributes, and routes where the rendered HTML violates the rule.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/html/input-types
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- What does the skill check?
- It audits input elements in HTML files, templates, and shared components, checking whether each uses the most appropriate type attribute and autocomplete value, and flags exact elements, attributes, and routes that violate the rule.
- Why use semantic input types?
- type=text for every input forces mobile users to switch keyboards manually. The correct type shows the right keyboard (like the @ keyboard for email) and enables browser autofill to identify fields for name, address, and payment data.
Advanced
- Item type
- skill
- Key
input-types- Source
- github.com/thedaviddias/front-end-checklist