HTML input attributes

HTML input attributes make the input elements more usable. These input attributes provide more information about the input elements. Today we are going to see the available attributes for input html element.

name
This attribute specifies the unique name in order to identify the particular input element.

<input type="text" name="name">

value
This attribute specifies the initial value for the input element and user can change this value.

<input type="text" name="firstname" value="Naveen">

disabled
This attribute will disable the input element i.e., making the element non editable and unclickable. These values will not be sent while submitting the form.

<input type="text" disabled>

required
This attribute will check the input element whether it is filled or not. User must fill this input before submitting the form. This is simple validation without using javascript.

Note
This will only work for following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

<input type="text" name="firstname" required>

placeholder
The placeholder attribute works like a hint. It describes what to enter in the input field to user. It shows the text in grey fonts and once the user clicks on the input field it will be faded.

<input type="text" placeholder='Enter your first name'>

autofocus
As the name suggests it will automatically focus the input element on page load.

<input type="text" name="username" autofocus>

readonly
The readonly attribute displays the value (if the value is specified) but doesn’t allow user to change the value.

<input type="email" name="email" readonly>

It cannot be modified but we can focus it, highlight it, and copy the text from it.

The value of a read-only input field will be sent when submitting the form.

size
This attribute represents the number of characters to show. It defines the visual length of input field. Default value is 20.

Note:
This attribute works with the following input types: text, search, tel, url, email, and password.

<input type="text" name="username" size="50">

height and width
These attributes indicates the height and width of an HTML input element. This attribute is used only for input type image.
Without setting these attributes, when page loads browser will not know how much space is required for image and cannot allocate a separate space for it. Flickering may occur while loading image. If height and width are set, the particular space is reserved by the browser when page loads.

<input type="image" src="img.png" alt="cover picture" width="48" height="48">

maxlength
This attribute specifies the maximum number of characters can be entered in the input field.

<input type="text" name="username" maxlength="10">

min and max
These attributes specified the minimum input value and maximum input value available for the particular input field.

Note
This will only work for following input types: number, date, range, time, week and month.

<input type="number" name="quantity" min="1" max="5">

step
This attribute specifies the intervals of the legal input numbers.
Example:
if step="6", legal numbers that can be used are -6, 0, 6 etc.

Note
This will only work for following input types: number, range, date, datetime-local, month, time and week.

<input type="number" name="points" step="3">

list
This attribute specifies the input field with a list of default predefined options.

<form>
  <input list="language">
  <datalist id="language">
    <option value="Javascript">
    <option value="Python">
    <option value="C">
    <option value="C#">
    <option value="C++">
  </datalist>
</form>

multiple
This attribute specifies that the user is allowed to enter more than one value in an input field.

Note
It will work only with the following input types: email, and file.
while selecting files, click ctrl and select multiple files.
while entering email id values entervalues separated with comma.

<input type="file" id="files" name="files" multiple>
<input type="email" id="emails" name="emails" multiple>

autocomplete
This attribute specifies whether an input field should have autocomplete on or off.

Autocomplete allows the browser to predict the value. When user starts to type in input field, the browser should display previous filled options to fill in the field.

Note
It works with form and the following input types: text, search, url, tel, email, password, datepickers, range, and color.
By default this attribute will be on.

<input type="email" id="email" name="email" autocomplete="off">

accept
This attribute specifies what file types the user can pick from the file input dialog box.

Note
This can only be used with <input type="file">.

<input type="file" id="img" name="img" accept="image/*">

Thank you for reading this post. Have a great day 🙂