Form element for receiving user input
Sets the expected type of value. Take care to set email, tel, password, and number inputs based on use case to ensure optimal user experience.
See checkbox, radio, and range for details on those specific types.
||Boolean attribute||Disables the input so it can't be changed or interacted with. It will be skipped when tabbing and its value will not be submitted with the form.|
||Boolean attribute||Makes the input read-only, which means the user can't change its value, but can still tab to it and copy the text. Its value will be submitted with the form.|
||Boolean attribute||Highlights input as having an invalid value. When the input is invalid it should have a small element explaining how to correct it. Validation is owned by your application not M-.|
||String||Displays a message inside the input. Ideal for showing an expected format or sample value.|
||Boolean attribute||If present, the browser will bring focus to this element on page load. Excellent for log in or search pages or whenever the first interaction is likely to type something.|
||These are required in order for the browser to autofill the form. Not all values are shown here! See the complete list and learn more at MDN: HTML autocomplete attribute.|
Use the right type
It's very important to take the time to understand what values a user can enter in a given input and to use the right
type for those values. If, for example, the input is for a membership number then using
type="number" will present an easier to use numbers-only keyboard on most touch devices. The same goes for email and phone numbers. These UX optimizations are important to users and are virtually free to implement, so take a moment to ensure you're using the right input type.
Labels should use the
for attribute to reference the id of its corresponding input. Inputs should use the right type (see above), autofocus, and autocomplete to improve their usability.