HTML5: Latest Features – Part 2
In a previous article, we discussed some of the important and innovative features of HTML5 that were absent in the previous versions of HTML. In this article, we would discuss some more of those features.
The Output element: the output element is used to display some sort of calculation. For example, if you’d like to display the coordinates of a mouse position, or the sum of a series of numbers, this data should be inserted into the output element.
As a simple example, let’s insert the sum of two numbers into an empty output with JavaScript, when ‘submit’ button is pressed.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<form action="" method="get"> <p> 10+ 5 = <output name="sum"></output> </p> <button type="submit"> Calculate </button> </form> <script> (function() { var f = document.forms[0]; if ( typeof f['sum'] !== 'undefined' ) { f.addEventListener('submit', function(e) { f['sum'].value = 15; e.preventDefault(); }, false); } else { alert('Your browser is not ready yet.'); } })(); </script> |
This element can also receive a ‘for' attribute, which reflects the name of the element that the output relates to, similar to the way that a label works.
Mark Element: The <mark> element is a sort of highlighter. A string wrapped within this tag should be relevant to the current actions of the user. For example, if you search for “Open your Mind” on some blog, you could then utilize some JavaScript to wrap each occurrence of this string within <mark> tags.
<h3> Search Results </h3>
<p> They were interrupted, just after John said, <mark>”Open your Mind”</mark>. </p>
Pattern Attribute: How often have you found yourself writing some quickie regular expression to verify a particular textbox. Thanks to the new pattern attribute, we can insert a regular expression directly into our markup. Consider an example:
|
1 2 3 4 5 6 7 8 9 10 11 |
<form action="" method="post"> <label for="username">Create a Username: </label> <input type="text" name="username id="username" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus required> <button type="submit">Go </button </form> |
If you’re moderately familiar with regular expressions, you’ll be aware that this pattern: [A-Za-z]{4,10}accepts only upper and lowercase letters. This string must also have a minimum of four characters, and a maximum of ten.
These and other such attributes which are powerful as well as easy to use have made HTML5 most favorite tool for web developers.
BlueHost | HostGator | Media Temple
