New attribute in input and video tag

What I’ve recently discovered during my monthly reading to keep myself up-to-date

<input type=“range”>

image

Creates a range for number. User can define the range min – max (price for instance) thank to button which slides.

Of course it necesary to define the down and top value of the rage like in this example:

<input type=“range” name=“points” min=“0” max=“10”

Not supported in Internet Explorer 9 and less


<input list>

image

Is a easy autocomplete field. It has a similar markup as the <select> tag, in fact it uses <option> tags to define the list of autocomplete.

Usefull when there’s a few options to choose from. The options have to be included inside a <datalist> tag 

<input list=“browsers” name=“browser”>
 <datalist id=“browsers”>
   <option value=“Internet Explorer 6”>
   <option value=“Internet Explorer 8”>
  <option value=“Internet Explorer 10”>    
  <option value=“Firefox”>
  <option value=“Chrome”>
 </datalist>

Not supported in Internet Explorer 9 and less



<video poster=“”>

image

Allow the display of an image exctracted from the video. Usefull when the video doesn’t load. Visually friendlier and more informative than an ugly icon or a black screen.

<video controls poster=“/images/w3html5.gif”>
  <source src=“movie.mp4” type=“video/mp4”>
  <source src=“movie.ogg” type=“video/ogg”>
</video>

Spread the love

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *