Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a HTML 5: Introducción que contiene a Formularios que contiene a Atributos nuevos y modificados

Datos de búsqueda

HTML 5: Formularios

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>

Compartir este artículo:

  • Compartir en del.icio.us
  • Compartir en Technorati
  • Añadir a Google Bookmarks
  • Compartir en Google Buzz

Datos del artículo:

Comentarios de la página

Puedes comentar o hacer trackback desde tu propio sitio web.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Todavía no hay comentarios.

Hacer un comentario