Attributes of Input Tag

The <input> tag is one of the most important elements in HTML forms, used to collect data from users. What makes it powerful and flexible are its attributes.

These attributes control how the input behaves, how it looks, what type of data it accepts, and how it interacts with the form and the user.

From setting input types like text, email, and file uploads, to controlling validation and appearance with attributes like required, placeholder, pattern, and maxlength—each attribute plays a key role in improving user experience and form functionality.

1. type

• Tells the browser what kind of input to expect.
• Possible values:
  • text – plain text
  • password – hides what you type
  • email – checks for proper email format
  • number – only numbers allowed
  • tel – for telephone numbers
  • url – checks for proper website link
  • date – calendar to pick date
  • time – pick time
  • datetime-local – pick date and time
  • month – pick month and year
  • week – pick week of year
  • file – upload a file
  • radio – select one from many
  • checkbox – select one or many
  • submit – submit the form
  • reset – reset form fields
  • hidden – invisible value
  • button – just a button (needs JS to work)
  • range – slider bar
  • color – color picker

2. name

• Gives the input a name so its value can be sent to the server.

3. value

• Sets the default value shown inside the input.

4. placeholder

• Shows grey-colored text inside the box as a hint.

5. required

• Makes the field mandatory before form submission.

6. readonly

• Makes input visible but user cannot change it.

7. disabled

• Makes input grayed out and unclickable.

8. maxlength

• Sets the maximum number of characters user can type.

9. min and max

• Set lowest and highest value for inputs like number, date, range, etc.
• Values can be: A number or date depending on input type.
  • Example for number: min=”1″ max=”100″
  • Example for date: min=”2024-01-01″

10. step

• Sets the amount by which values will increase or decrease.

11. pattern

• Checks if input matches a particular format using regular expressions.
• Values can be: Regex pattern. Example: pattern=”[A-Za-z]+” (only letters)

12. autofocus

• Automatically puts the cursor in this input when page loads.

13. autocomplete

• Lets browser remember and auto-fill the input.
• Values:
  • on – allow browser to remember
  • off – prevent auto-fill

14. multiple

• Allows selecting multiple files or email addresses (depends on type).
• Used with: type=”file” or type=”email”

15. size

• Sets the visible width of the input box in number of characters.

16. id

• Gives a unique ID to the input for styling or linking with <label>.

17. class

• Applies CSS styles. Multiple elements can share the same class.

18. form

• Links the input to a form (if it’s placed outside the <form> tag).

19. list

• Connects to a <datalist> element for suggestions.

20. accept

• Restricts file types in file input.
• Used with: type=”file”
• Examples:
  • image/* – only image files
  • .pdf – only PDF files
  • audio/* – only audio files