Useful HTML5 Snippets

This collection of useful snippets using HTML5 can help you improve your site.

Autocomplete in text fields

Using the HTML5 datalist you can create a text field with auto-completion. Very comfortably!

 <input name="frameworks" list="frameworks" /> <datalist id="frameworks"> <option value="MooTools"> <option value="Moobile"> <option value="Dojo Toolkit"> <option value="jQuery"> <option value="YUI"> </datalist> 

Input fields email, url and tel

HTML5 has a lot of new types for input fields, among them email , url and tel . They allow you to write more beautiful code, do all the work on content validation for you, and also force mobile browsers to display a touch keyboard with special buttons (like @ and. Com) when filling in these fields.

 <input type="url"> <input type="email"> <input type="tel"> 

Patterns for matching regular form fields

You used to use JavaScript to validate content on the front end. Now, with the HTML5 attribute of the pattern , you can simply specify a regular expression that the input data must match!

 <input type="email" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}"> <input type="password" pattern="(?=.*\d)(?=.*[az])(?=.*[AZ]).{8,}" title="   ,            "> <input type="tel" pattern="(\+?\d[- .]*){7,13}" title=",     "> 

')

Custom context menu

HTML5 allows you to add elements to the context menu (this is the same menu that appears when you right-click anywhere on your page).
At the time of this writing, the ContextMenu element is only compatible with Firefox, but it can be hoped that other browsers will add its support as soon as possible.

 <section contextmenu="mymenu"> <p>,      .</p> </section> <menu type="context" id="mymenu"> <menuitem label=",    " icon="img/forbidden.png"></menuitem> <menu label=" "> <menuitem label="  FaceBook" onclick="window.location.href = 'http://facebook.com/sharer/sharer.php?u=' + window.location.href;"> </menuitem> </menu> </menu> 

Video on HTML5, with backup Flash-player.

One of the biggest new features in HTML5 is definitely its ability to play videos without using Flash. But for older browsers that are not compatible with HTML5, you need to implement Flash Player as a fallback. The following example shows how to insert mp4 and ogv videos into HTML5, with a backup player for older browsers.

 <video width="640" height="360" controls> <source src="__VIDEO__.MP4" type="video/mp4"> <source src="__VIDEO__.OGV" type="video/ogg"> <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> <param name="movie" value="__FLASH__.SWF"> <param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4"> <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="      "> </object> </video> 

Hidden elements in HTML5

In HTML5, the hidden attribute has appeared, which can be applied to any element. Its action is similar to the CSS property display:none .

 <p hidden>    </p> 

Autofocus for text fields

The autofocus allows you to set the focus on a specific item when the page loads. Useful, for example, for search, authorization or registration pages.

 <input autofocus="autofocus"> 

HTML5 preload

Jean-Baptiste Jung has written a detailed article about HTML5 preloading. If in short - this is an easy way to notify the browser about what resources may soon be needed in order for it to load them in advance (for example, pictures loaded by AYAX). In the code below, the image is preloaded.

 <link rel="prefetch" href="http://www.catswhocode.com/wp-content/uploads/my_image.png"> 

Playing HTML5 audio files

HTML5 can play videos and, of course, it can also play audio files, for example, in mp3 format. The code below implements a minimalist but functional audio player.

 <audio id="player" src="sound.mp3"></audio> <div> <button onclick="document.getElementById('player').play()">Play</button> <button onclick="document.getElementById('player').pause()">Pause</button> <button onclick="document.getElementById('player').volume+=0.1">Volume Up</button> <button onclick="document.getElementById('player').volume-=0.1">Volume Down</button> </div>