<input>

Definition

The HTML <input> element is a self-closing tag used to create various form controls that allow users to enter data. It is one of the most commonly used elements in HTML forms.

The <input> element has several types, including text, password, checkbox, radio, submit, reset, button, email, url, date, and more. Each type corresponds to a different input control that allows users to provide different types of data. For example, the text type is used for text input fields, while the checkbox type is used for checkboxes.

Examples

Here's an example of a simple text input field created using the <input> element:

<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name">

In this example, the input field has a type of "text", an ID of "name", a name of "name", and a placeholder of "Enter your name". When the user types their name into the field and submits the form, the value of the input field will be sent to the server with a name of "name".

Attributes

This element's attributes include the global attributes.

Best Practices

• Depending on the information you want the user to provide, make sure to use the correct type attribute. For example, use text for regular text inputs, email for email addresses, number for numerical input, and password for password input.
• Always associate the input element with a label element using the for attribute. This helps users with disabilities who may use screen readers to navigate your website.
• If the input field is expecting a certain format or pattern, provide a default value or a placeholder to guide the user.
• Make sure to validate the user's input on the server side. Client-side validation using JavaScript can be useful for providing immediate feedback to the user, but it should not be relied upon as the only form of validation.
• Use the autocomplete attribute to help users complete forms more quickly. For example, use autocomplete='email' for an email input field.
• Use the required attribute only when necessary, as it can be frustrating for users to encounter an error message after filling out a form.
• For date inputs, consider using a date picker to ensure that users enter dates in the correct format.
• Use the pattern attribute to enforce a specific pattern or format for user input. For example, use pattern='[0-9]{3}-[0-9]{2}-[0-9]{4}' for a social security number input field.
• Use the minlength and maxlength attributes to specify the minimum and maximum length of input, respectively.
• For numerical input fields, consider using a range input to allow users to select a value within a specific range.

Accessibility Considerations

• Always associate the input element with a label element using the for attribute, and make sure the label text clearly describes the input's purpose.
• Use the aria-describedby attribute to provide additional context for the input, such as instructions or hints.
• Use the appropriate type attribute for each input field, as some assistive technologies may have difficulty interpreting certain types of input.
• Make sure there is a visible focus indicator around the input element when it receives focus, as some users with disabilities may rely on keyboard navigation.
• If an error occurs, make sure the error message is clear and describes how to fix the error.
• Ensure there is enough contrast between the input and its background, as low contrast can make it difficult for users with low vision to read.
• If an image is used within the input, make sure to provide a descriptive alt text that conveys its purpose.
• Ensure that users can navigate and interact with input fields using only the keyboard, as some users may not be able to use a mouse or other pointing device.
• Use the autocomplete attribute to help users with disabilities complete forms more quickly.
• Test your input fields with a screen reader to ensure they are compatible and can be easily understood by users with visual impairments.

Browser Compatibility