As a web designer probably there a lot of attributes that you are familiar with and you use them frequently but here are 7 attributes that you may not be using.
Contenteditable
It's a global attribute that specifies whether the content of an element is editable or not.
<p contenteditable="true">Text</p>
Download
It's belong to anchor element in which it specifies that the target will be downloaded when a user clicks on the hyperlink.
<a href="document.pdf" download> Download</a>
Hidden
Hidden belong to global attribute and as the name suggested it hide or specifies that an element is not yet, or is no longer relevant.
<p hidden>This text is hidden </p>
Multiple
It allows user to enter more than one value. it belong to input and select element.
<!-- allows you to upload multiple files -->
<input type="file" multiple>
<!-- allows you to select more than one option -->
<select multiple>
<option value="#">Value 1</option>
<option value="#">Value 2</option>
<option value="#">Value 3</option>
</select>
Poster
Belong to video element in which it specifies an image to be shown while the video is downloading or hasn't started playing.
<video controls poster="image.jpg"> ... </video>
Spellcheck
It specifies whether the element is to have its spelling and grammar checked or not.
<input type="text" spellcheck="true">
<!-- don't use it on password -->
Accept
This attribute specifies what files are supported to be uploaded.
<!-- This allows only pdf file -->
<input type="file" accept="application/pdf">
<!--This allows only images -->
<input type="file" accept="image/*">
<!-- accept="image/jpeg" allows only jpeg/jpg -->
<!-- accept="image/png" allows only png -->
Top comments (0)