5 useful Input Attributes
Tags: html, webdev, codenewbie, 100daysofcode
Published: 2021-07-16 00:39:05

Hi, I'm [Aya Bouchiha](https://t.me/AyaBouchiha) this \#day-33,  we are going to discuss 5 useful input attributes.

## pattern

this attribute is almost used with a title attribute that describes the input's pattern, its role is to specify a valid JavaScript regular expression that the input field's value is checked against when the form is submitted. It works with the following input types: (_text, email, tel, password, search, url, date_).
[more details](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern)

```html
<form>
	<input
		type="text"
		placeholder="full name..."
		pattern="[A-z]{8,16}"
		title="the full name should be between 4 and 15 letters"
	/>
	<input type="submit" />
</form>
```

Output:

![input attributes Aya Bouchiha](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/umipwumqnmpo5ij7a5s1.PNG)

## maxlength

maxlength is an input attribute that specifies the maximum length of characters allowed in an input field. And when the length of the input's value is equal to the maxlength, the input field will not accept more characters.

```html
<form>
	<input type="password" placeholder="phone password..." maxlength="4" />
	<input type="submit" />
</form>
```

Output:
After reaching 4 characters, the input field doesn't accept more characters.

![input attributes Aya Bouchiha](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1l1pu4og444gcxh73no0.PNG)

## autocomplete

this attribute specifies whether the browser can predict the input's value and displays options to fill in the field when a user starts typing or not. This attribute works with the following input type (text, tel, email, password, search, url, date pickers, color, range) **\<input>** and **\<form>** as well.

```html
<form>
	<input
		type="text"
		placeholder="first name"
		name="f-name"
		autocomplete="on"
	/>
	<input type="email" placeholder="email" name="email" autocomplete="off" />
	<input type="submit" />
</form>
```

Output:

![input attributes Aya Bouchiha](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1aiqc74cx3l8j2xpknr.PNG)

## autofocus

autofocus is an attribute that specifies that an input field should automatically get focus when the page loads or not.

```html
<form>
 <input type="text" placeholder="your name..." autofocus />
 <input type="submit" />
</form>
```
Output:

![input attributes Aya Bouchiha](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yb77btzec07xdjbinz15.PNG)

## list

This attribute refers to a **\<datalist>** element that contains pre-defined options for an **\<input>** element.
[more details](https://www.geeksforgeeks.org/html-list-attribute/#:~:text=The%20list%20attribute%20in%20HTML,by%20the%20element.&text=Where%2C%20name%20is%20a%20string,with%20the%20element.)

```html
<form>
	<input  list="programming-languages" />
	<datalist id="programming-languages">
	    <option value="java" />
	    <option value="javascript" />
	    <option value="C#" />
	    <option value="python" />
	</datalist>
</form>
```

Output:

![input attributes Aya Bouchiha](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xkadols3rxr63y1vq0x.PNG)


## Summary:

**pattern**: specifies a valid JavaScript regular expression that the input field's value is checked against.

**maxlength**: specifies the maximum length of characters allowed in an input field.

**autocomplete**: specifies that the browser can display options to fill in the field when a user starts typing or not.

**autofocus**: specifies that an input field should automatically get focus when the page loads or not

**list**: used to display a list of pre-defined options for an element to suggest the user.

## Reference

+ [https://www.w3schools.com/html/html_form_attributes.asp](https://www.w3schools.com/html/html_form_attributes.asp)

[for contacting me](https://t.me/AyaBouchiha)

Happy codding!