Atributos HTML5 que te ahorrarán tiempo

HTML5 Logo

La especificación HTML5 sigue su proceso de conversión en estándar. Poco a poco se van incluyendo nuevas características y algunas son ya soportadas por la mayoría de navegadores modernos.

Una de esas características es un grupo de nuevos atributos HTML realmente útiles que solventan situaciones que antaño debían ser resueltas de otras maneras, por ejemplo usando javascript.

Esta es una lista de algunos de esos atributos:

Autofocus:

Este atributo permite hacer que un elemento gane el foco automáticamente al cargar la página. Puede ser asignado a cualquier elemento <input>, <textarea> o <button>.

Es un atributo boolean, lo que quiere decir que se le puede asignar cualquier valor y siempre se obtendrá el mismo efecto, ya que lo único que hace falta para que funcione es que esté presente. Además, la especificación HTML5 vuelve a permitir la existencia de atributos sin valor.

Uso:

<input type="text" autofocus>
<textarea autofocus></textarea>
<button type="submit" autofocus>Enviar</button>

En una misma página no debería haber mas de un elemento con este atributo, pero si por cualquier razón hubiera más de uno, el último de todos recibiría el foco.

Este atributo es soportado por  Google Chrome, Mozilla Firefox, Safari e Internet Explorer 10+, pero no por Opera o versiones más antiguas de Internet Explorer.

Ejemplo:

Placeholder:

El atributo placeholder nos permite definir un texto por defecto o explicativo en los elementos de introducción de texto, borrando ese texto en cuanto el usuario empieza a escribir y volviéndolo a añadir en el momento en el que dicho elemento tiene un valor vacío. Se puede usar en <input> y <textarea>.

Uso:

<input type="text" placeholder="Dirección de correo">
<input type="password" placeholder="Introduce tu contraseña">
<textarea placeholder="Comentarios"></textarea>

Este atributo es especialmente útil en los <input[type=password]> donde nos permite especificar un texto que el usuario podrá leer, a pesar de que cuando él escriba sólo se mostrarán asteriscos.

El soporte de este atributo se extiende actualmente a Internet Explorer 10+, Google Chrome, Mozilla Firefox, Safari y Opera, pero no a versiones más antiguas de internet explorer.

Ejemplo:

Spellcheck:

Muchos navegadores incluyen hoy en día diccionarios en varios idiomas y permiten corregir faltas de ortografía en tiempo real.

Con spellcheck podemos definir si en un determinado elemento queremos forzar a que se aplique esta característica o por el contrario queremos deshabilitarla.

Spellcheck acepta los valores true (para habilitar la característica) o false (para deshabilitarla).

Uso:

<input type="text" spellcheck="true">
<textarea spellcheck="false"></textarea>

Por defecto, en la mayoría de navegadores viene activado por defecto, así que muy probablemente sólo tendremos que deshabilitarla si nos hace falta.

Actualmente Opera, Google Chrome y Safari soportan este atributo, pero no Mozilla Firefozx o Internet Explorer.

Ejemplo:


Maxlength:

Este atributo también se aplica sólamente a los elementos de introducción de texto. Permite definir el número máximo de caracteres que se pueden escribir en él.

Uso:

<input type="text" maxlength="10" placeholder="En este cuadro no se pueden escribir más de 10 caracteres">
<textarea maxlength="200"></textarea>

Este atributo es útil si, por ejemplo, tenemos un formulario de registro en el que el nombre de usuario puede tener como máximo 20 carateres. Nos permitirá validar el dato automáticamente del lado del cliente. Eso si, es recomendable volver a validarlo del lado del servidor.

Todos los navegadores soportan este atributo.

Ejemplo:

Start:

El atributo start se aplica únicamente a listas ordenadas <ol> y sirve para indicar el número con el que empezará dicha lista. El valor de este atributo será el número con el que debe empezar la lista.

Uso:

<ol start="6">
    <li>Item número seis</li>
    <li>Item número siete</li>
    <li>Item número ocho</li>
</ol>

Este atributo los soportan los cinco navegadores más usados.

Ejemplo:

  1. Item número seis
  2. Item número siete
  3. Item número ocho

Reversed:

Al igual que el atributo anterior, este se usa únicamente con con listas ordenadas <ol> y sirve para indicar que la numeración de la lista debe ir a la inversa, es decir, empezando por el número de elementos que tiene la lista y terminando en 1.

Es boolean, por tanto bastará con que el atributo esté presente para que se aplique su efecto, sin importar el valor que se le haya dado.

Uso:

<ol reversed>
    <li>Item número tres</li>
    <li>Item número dos</li>
    <li>Item número uno</li>
</ol>

Tanto este atributo como el anterior nos ayudan a no tener que escribir nunca más los números a mano cuando queremos un comportamiento diferente al definido por defecto, a la vez que nos evita el uso de javascript.

Como curiosidad, podríamos combinar el atributo start con el atributo reversed, haciendo que la lista vaya decreciendo pero que no empiece en el número de items de la lista sino en el número que nosotros le digamos.

Por desgracia, a día de hoy, el atributo reversed sólo está soportado por Google Chrome.

Ejemplos:

  1. Item número tres
  2. Item número dos
  3. Item número uno
  1. Item
  2. Item
  3. Item
  4. Item
  5. Item

Contenteditable:

Por último vamos a ver el atributo contenteditable. Se puede aplicar a cualquier tipo de elemento, y lo que hace es que su contenido sea directamente editable por el usuario directamente desde el navegador.

Acepta los valores true o false, habilitando o deshabilitando la característica en ese elemento.

Uso:

<p contenteditable="true">Este contenido es editable</p>
<div contenteditable="false">Este contenido NO es editable</div>

Este atributo es compatible con todos los navegadores.

Ejemplo:

Este contenido es editable

Conclusión:

Como se puede ver, la especificación HTML5 incluye muchos atributos que ahorran tiempo al usuario y al programador. Esperemos que antes de que se publique la versión final del estándar se incluyan algunos más.

Anímate a compartir con nosotros tus inquietudes y experiencias.

A %d blogueros les gusta esto: