DEV Community

loading...
Cover image for HTML input attributes

HTML input attributes

Naveenchandar
Optimistic human 🧍 and trying hard not to procrastinate things!!!😜 Passionate about Web Development and have a keen interest in learning new technologies.
・3 min read

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">
Enter fullscreen mode Exit fullscreen mode

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

<input type="text" name="firstname" value="Naveen">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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'>
Enter fullscreen mode Exit fullscreen mode

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

<input type="text" name="username" autofocus>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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

<input type="text" name="username" maxlength="10">
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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/*">
Enter fullscreen mode Exit fullscreen mode

Thank you for reading this post. Have a great day πŸ™‚

Discussion (4)

Collapse
ashmehek profile image
Ashwin C Punjabi

Great share Naveen. I learnt about multiple, step, and readonly.

Collapse
naveenchandar profile image
Naveenchandar Author

Thank you..πŸ™‚

Collapse
chrmc7 profile image
Chris β˜•οΈ

The HTML input element is pretty awesome. I think it's cool how specific type attributes can completely change its functionality. Great post πŸ˜€

Collapse
naveenchandar profile image
Naveenchandar Author

Thanks..πŸ™‚πŸ˜€