HTML input attributes
Tags: html, css, webdev, beginners
Published: 2021-07-30 10:00:36

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 🙂