Cool HTML5 features

The accept attribute

You can use the HTML5 accept attribute to pinpoint what kind of files you accept from an input of type file. You can allow only images, videos, audios or a specific file extension. You use it in the following way:

<input type=’file’ accept="file_extension|audio/*|video/*|image/*|media_type">

You can be more specific, for example, by stipulating image/png instead of the wildcard image/* which accepts all kinds of images. When you add the accept attribute and the user is shown the file dialog, he would be able to select only files from that particular type with some browser magic.

The autofocus attribute

You can use the autofocus attribute to have a form input immediately focused when a page loads. You use it like this:  <input type=”text” placeholder=”Enter your name” autofocus>.

The placeholder attribute

The placeholder attribute, as shown above, allows you to have a text shown directly in the input that disappears when the user focuses and starts typing in the box.

The hidden attribute

The hidden attribute can be used as an attribute instead of adding extra CSS, inline or not. You can use it instead of display: none;.

HTML templates

With HTML5, you can have HTML templates. Basically, this is the <template> tag followed by arbitrary markup which is not loaded on the page (if you have an image, audio or video tag, it would not be loaded until you activate the template) until you say so. Let’s assume the following markup:

<template id="the-template">

     <img src="img.png" alt="Kewl image">

     <p>Hello</p>

</template>

Now, the image would not be loaded when the page loads. To activate the template, we would have to use JavaScript. The easiest way to activate it is to clone it and append it to the element that we want. Here is how we can incorporate the above template to the end of the body tag:

var template = document.querySelector("#the-template");



var templateClone = document.importNode(template.content, true);



document.body.appendChild(template.content);

Multiple file upload (multiple attribute)

You can upload multiple files using the multiple attribute. Adding the attribute would allow browsers to show a file picker in which multiple files could be selected simultaneously instead of only one.

HTML5 validation

You can use the required attribute to make an input required; that is the user must enter a value before submitting the form. You can use the pattern attribute and provide a regular expression in it for a more specific, custom validation. For example pattern=”.{3,}” would require at least 3 characters to be entered in the input.  You can use the maxlength attribute to specify a maximum number of characters for the input. For numeric inputs, you can use the min and max attributes to specify the minimum value of the digits and their maximum value. For example, min=”1” and max=”999” would result in the user being able to enter a digit between 1 and 999.