Atributos nuevos y modificados

Atributos en campos numéricos y de fechas

Atributos opcionales para campos númericos y de fechas:

  • min: define el valor máximo aceptado.
  • max: define el valor mínimo aceptado.
  • step: intervalo de variación del valor en los controles del campo.

En el caso de campos de intervalo (type="range") los atributos min y max si son obligatorios.

Ejemplo en campo numérico

Campo con valor mínimo 20, valor máximo 40 y variación de 2

<input type="number" value="30" min="20" max="40" step="2">

Prueba de número ('min' 20, 'max' 40, 'step' 2):

Ejemplo en campo de intervalo

Campo con valor mínimo 0 y valor máximo 100:

<input type="range" value="50" min="0" max="100">

Prueba de intervalo ('min' 0, 'max' 100):

Ejemplo en campo de fecha

Campo con valor mínimo 2011-01-06, valor máximo 2011-01-10 y variación de 2 días (lo que implica que solo se pueden seleccionar días pares):

<input type="date" min="2011-01-06" max="2011-01-10" step="2">

Prueba de fecha ('min' 2011-01-06, 'max' 2011-01-10, 'step' 2):

Atributo PATTERN

El atributo pattern permite introducir una expresión regular en elementos INPUT de tipo texto (type="text") en base a la que realizar la validación del campo al enviar un formulario.

De este modo no se depende de la existencia de tipos de campo específicos (INPUT de tipo ‘url’, ‘email’, numéricos, etc.).

En este ejemplo el atributo ‘pattern’ hace que el valor del campo sea una palabra que empiece por ‘r’ y acabe por ‘s’:

<input type="text" pattern="br(w*)sb">

Atributo AUTOCOMPLETE

Activa o desactiva el autocompletado automático de los elementos INPUT de tipo texto (type="text") y password (type="password").

Ya estaba soportado anteriormente por los navegadores (enlace externo, en inglés), a pesar de no estar en el estándar HTML 4.

<input type="text" autocomplete="off">

Atributo REQUIRED

Indica que el campo es requerido, y el formulario no validará si no está relleno.

<input type= "email" required>
<input type= "email" required="required" />

Atributo FORM

Los elementos de formulario pueden ubicarse fuera del elemento FORM al que pertenecen, añadiéndoles el atributo form con el valor del atributo id del elemento FORM.

<form id="formulario">
  [Contenido formulario]
</form>
[...]
<p><label for="campotexto">
  Campo de texto:
  <input type="text" id="campotexto" form="formulario">
</label></p>

Atributo PLACEHOLDER

Resulta muy habitual encontrarse con campos de texto que contienen un valor por defecto que ayuda al usuario a comprender que información debe introducir en dicho campo: El comportamiento habitual es que cuando el usuario activa el campo el texto desaparezca.

Para obtener ese efecto en HTML 4 es necesario el uso de Javascript, pero con HTML 5 esa solución deja de ser necesaria.

Soportado por Safari y Chrome.

<input type="search" placeholder="Buscar...">
  • Estado inactivo: Captura del estado inactivo de campo con atributo placeholder
  • Estado activo: Captura del estado activo de campo con atributo placeholder

Campo de prueba de placeholder:

Saber más: HTML 5: Atributo placeholder.

Atributo AUTOFOCUS

El campo de formulario que contenga el atributo autofocus recibirá automáticamente el foco al cargar el documento.

Solo puede haber un elemento que contenga el atributo.

<input type="text" autofocus>
<input type="text" autofocus="autofocus" />
<select autofocus>[...]</select>
<textarea autofocus>[...]</textarea>

Dejar un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.