Hello, Readers, sorry I was busy in some work so it got late.
Let's Get Started
HTML attributes allow you to perform a lot more complex tasks directly on your HTML files. Here are some of the most useful ones to know!
HTML is the building block of the web. Knowing some less-known, but useful parts of this markup language can make your life a lot easier. HTML attributes provide several features that can help you to get the most out of HTML. It defines additional characteristics or properties of an HTML element.
In this article, you'll learn about 11 HTML attributes that you probably havenβt heard of yet.
1. Multiple
This attribute allows users to enter multiple values. You can use the multiple attribute with tags and tags. This boolean attribute is valid only for email or file input types.
Using multiple Attribute With Tag
<label for="language">Select languages:</label>
<select name="language" id="language" multiple>
<option value="C++">C++</option>
<option value="Python">Python</option>
<option value="JavaScript">JavaScript</option>
<option value="Java">Java</option>
</select>
Using multiple Attribute for File Input
By using the multiple attribute for file input, you can select multiple files (by holding the Shift or Ctrl keys).
<input type="file" multiple>
Using multiple Attribute for Email Input
By using the multiple attribute for email input, you can enter a list of comma-separated email addresses. All the white spaces will be removed from each address in the list.
<input type="email" multiple>
2.Contenteditable
You can make the HTML content editable on a web page using the contenteditable attribute. This is a global attribute, i.e, it's common to all HTML elements.
<p contenteditable="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
3.Spellcheck
The spellcheck attribute specifies whether the element may be checked for spelling errors or not. You can spellcheck text in the elements, text in the editable elements, or text in the input elements(except passwords).
<p contenteditable="true" spellcheck="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
4.Dowmload
You can download a resource using the download attribute. The download attribute tells the browser to download the specified URL instead of navigating to it. You can use the download attribute with tag and tag.
Note: The download attribute only works with same-origin URLs. It follows the rules of the same-origin policy.
<a href="xyz.png" download="myImage">Download</a>
5.Accept
The accept attribute of the tag specifies the type of files a user can upload. You can specify a comma-separated list of one or more file types as its value.
Accepting an Audio File
<input type="file" id="audioFile" accept="audio/*">
Accepting a video file
<input type="file" id="videoFile" accept="video/*">
Accepting an Image File
<input type="file" id="imageFile" accept="image/*">
Accepting a Microsoft Word File
<input type="file" id="docpicker"
accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
Accepting PNG or JPEG Files
<input type="file" id="imageFile" accept=".png, .jpg, .jpeg">
Accepting a PDF File
<input type="file" id="pdfFile" accept>
6. translate
The translate attribute tells the browser that the element should be translated or not when the page is localized. It can have 2 values: "yes" or "no".
<p translate="no">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
7. poster
The poster attribute is used to show an image while the video is downloading or until the user plays the video.
Note: If you don't specify anything, nothing is displayed until the first frame is available. When the first frame is available, it's shown as the poster frame.
<video controls
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
poster="posterImage.png">
</video>
8. inputmode
The inputmode attribute indicates the browser which keyboard to display when a user has selected any input or textarea element. This attribute accepts various values:
None
<input type="text" inputmode="none" />
Numeric
<input type="text" inputmode="numeric" />
Tel
<input type="text" inputmode="tel" />
Decimal
<input type="text" inputmode="decimal" />
<input type="text" inputmode="email" />
URL
<input type="text" inputmode="url" />
Search
<input type="text" inputmode="search>
9. pattern
The pattern attribute of the <input>
element allows you to specify a regular expression for which the element's value will be validated against. You can use the pattern attribute with several input types like text, date, search, URL, tel, email, and password.
<form>
<input name="username" id="username" pattern="[A-Za-z0-9]+">
</form>
10. autocomplete
The autocomplete attribute specifies whether the browser should automatically complete the input based on user inputs or not. You can use the autocomplete attribute with several input types like text, search, URL, tel, email, password, date pickers, range, and color. You can use this attribute with the elements or
elements.<form>
<input name="username" id="username" pattern="[A-Za-z0-9]+">
</form>
11. autofocus
The autofocus attribute is a boolean attribute indicating that an element should be focused on page load. You can use this attribute with , , , , or elements.
Using autofocus Attribute With input Element
<input type="text" autofocus>
Using autofocus Attribute With select Element
<select name="languages" id="languages">
<option value="C++">
C++
</option>
<option value="Python">
Python
</option>
<option value="JavaScript">
JavaScript
</option>
<option value="Java">
Java
</option>
</select>
Using autofocus Attribute With textarea Element
<textarea autofocus>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</textarea>
Top comments (4)
Really cool selection, but I guess the title is a little bit misleading since you are referring to
attributes
in the article instead oftags
as stated in the titleStill a really nice collection of rather unknown features π
MY WEBSITE (UNDER CONSTRUCTION) codeflix.atwebpages.com/
I agree with @ichichich3011. I suggest "11 Html tag attributes you must know about." or some similar variation.
Thanks for the feedback