Cool HTM5 Features, Part 2

The readonly attribute

Example:

<input type=’text’ readonly value=’55434343’>

The readonly attribute allows you to show a value in an input element without the user being able

New input types

HTML5 comes with a few new input types that can be used for different type of data. You can use the following new input types:

<input type=’url’>



<input type=’email’>



<input type=’tel’>



<input type=’date’>



<input type=’time’>



<input type=’search’>



<input type=’range’>



<input type=’number’>

The tel input type stands for telephone while the others should be self-evident. It is good to start using them where appropriate as there are subtle differences in the browsers when you use them. For example, on a mobile phone the tel input type might show the numbers first in the user’s browser and the date and time input types would show a proper input for retrieving the date and the time.

 The picture element

The picture element is an enhancement of the <img> tag. It allows you to offer different images to different devices so that you can optimize your webpages in terms of bandwidth and loading time. You use it in the following way:

<picture>

 <source srcset="logo-wide.png" media="(min-width: 600px)">



 <source srcset=”logo-extra-wide.png" media="(min-width: 1200px)">

 <img src="logo-narrow.png" alt="MDN">

</picture>

The img tag is again used as a fallback if none of the source conditions matches. In the example above, we display different images in the browser depending on the width of the browser window  that is viewing the webpage.

The form attribute

With HTML5, you can associate an input with a form even when the input is out of the form tag. Therefore, the input could be anywhere on the page and still be a part of a specific form. You just have to give an identifier to the form and then add the form attribute to the input and give the identifier in the attribute value. Here is how you do this:

<form>



<p>Sign up to retrieve news from us</p>



<input type=’email’ name=’email’ id=’news-form’>



<input type=’submit’ value=’Submit’>



</form>



<div>



<input type=’tel’ form=’news-form’ name=’tel’>



</div>

Reversed ordered lists

Ordered lists in HTML typically start counting list items from 1 and increment as you add items to them. You can reverse the order with the reversed attribute making them start from the highest to the lowest number instead of the opposite. Here is how one can achieve this:

<ol reversed>



<li>Do the dishes.</li>



<li>Make breakfast</li>



<li>Enjoy life</li>



</ol>

The minlength attribute

In the previous article we have talked about how you can use the pattern attribute and the maxlength attribute to check for a specific length of the input that the user has entered.  You can also use the minlength attribute to check for a minimum number of characters that the input needs to have to submit the form.

Example:

<input type=’tel’ required minlength=’8’>