Nuevos atributos de la etiqueta Input del HTML5

El HTML5 agregó los siguientes atributos para la etiqueta <input>:

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list
• min and max
• multiple
• pattern (regexp)
• placeholder
• required
• step

y los siguientes atributos para la etiqueta <form>:

• autocomplete
• novalidate

El atributo autocomplete

El atributo autocomplete establece si un formulario o campo de entrada debe tener el autocompletado activado o desactivado (en "on" o en "off"). Cuando el autocompletado esta en activado, el Navegador Web completa automaticamente los valores de entrada en función de otros valores que se hayan ingresado anteriormente.

Nota: Es posible activar el autocompletado en el formulario y desactivarlo en campos de entrada individualmente y viceversa.

El atributo autocomplete trabaja con la etiqueta form y los siguientes atributos type: text, search, url, tel, email, password, datepickers, range, and color.

Ejemplo: a continuación mostramos el código de un formulario con el autocomplete activado y en uno de los campos de entrada desactivamos el autocomplete:

Código:

<form autocomplete="on">
  Nombre:<br>
  <input type="text" name="nombre"><br>
  Apellido:<br>
  <input type="text" name="apellido"><br>
  Correo Electrónico:<br>
  <input type="email" name="email" autocomplete="off">
</form>

Nota: En algunos Navegadores Web es necesario activar la función "autocompletado" para que esto funcione.

El atributo novalidate

El atributo novalidate es una atributo para la etiqueta form. El atributo novalidate establece que los datos del formulario no se validen cuando es enviado el formulario.

Código:

<form action="pagina.php" novalidate>
  email:<br>
  <input type="email" name="correo">
  <input type="submit">
</form>

El atributo autofocus

El atributo autofocus establece que el campo de entrada debe obtener el foco automaticamente cuando la página es cargada.

Código:

<form>
  Nombre:<br>
  <input type="text" name="nombre" autofocus>
</form>

El atributo form

El atributo de form especifica uno o más formularios a los que pertenece un elemento <input>. Para hacer referencia a más de un formulario, use una lista separada por espacios de los ids de los form.

<form action="pagina.php" id="formulario1">
  Nombre:<br>
  <input type="text" name="nombre">
  <input type="submit" value="Enviar">
</form>

Apellido<br>
<input type="text" name="apellido" form="formulario1">

El atributo formaction

El atributo formaction establece la URL de un archivo que se procesará el control de entrada cuando se envía el formulario. El atributo formaction anula del atributo action de la etiqueta form. El atributo formaction es usado con type="submit" y type="image".

A continuación, un ejemplo con dos botones "submit" con diferente action, haciendo uso la etiqueta formaction:

Código:

<form action="pagina.php">
  Nombre: <input type="text" name="nombre"><br>
  Apellido: <input type="text" name="apellido"><br>
  <input type="submit" value="Enviar"><br>
  <input type="submit" value="Enviar como Admin" formaction="pagina2.php">
</form>

El atributo formenctype

El atributo formenctype establece como deben ser códificados los datos del formuario cuando es enviado. Debe establecerse el method="post" también para su funcionamiento. El atributo formenctype anula el atributo enctype de la etiqueta form. El atributo formenctype es usado con type="submit" y type="image".

En el siguiente ejemplo Enviar datos del formuario que es codifícado por defecto (el primer boton de envío), y codifíca como "multipart/form-data" (el segundo botón de envío).

Código:

<form action="pagina.php" method="post">
  Nombre:<br>
  <input type="text" name="nombre"><br>
  <input type="submit" formenctype="multipart/form-data">
</form>

El atributo formmethod

El atributo formmethod define el metodo HTTP del envío de los datos del formulario a la URL del atributo action. El atributo formmethod anula el atributo method de la etiqueta <form>. El atributo formmethod puede ser usado con los tipos submit e image.

En el siguiente ejemplo el segundo botón de envío anula el atributo method="get" de la etiqueta form.

Código:

<form action="pagina.php" method="get">
  Nombre:<br>
  <input type="text" name="nombre">
  Apellido:<br>
  <input type="text" name="apellido">
  <input type="submit" value="Enviar">
  <input type="submit" formmethod="post" value="Enviar por POST">
</form>

El atributo formnovalidate

El atributo formnovalidate anula el atributo novalidate de la etiqueta form. El atributo formnovalidate puede ser usado con type="submit".

En el siguiente ejemplo se muestran dos botones de envío con y sin validación:

Código:

<form action="pagina.php">
  correo electrónico:<br>
  <input type="email" name="correo"><br>
  <input type="submit" value="Enviar"><br>
  <input type="submit" value="Enviar sin validar" formnovalidate>
</from>

El atributo formtarget

El atributo formtarget especifica un nombre o un palabra clave que indica donde mostrar la respuesta que se recibe después de enviar el formulario, es decir, si en la misma ventana o una nueva. El atributo formtarget anula el atributo target de la etiqueta form. El atributo formtarget puede ser usado con type="submit" e type="image".

En el siguiente ejemplo se muestra un formulario con dos botones de envío con diferentes target de vantana:

Cógigo:

<form action="pagina.php">
  Nombre:</br>
  <input type="text" name="nombre">
  Apellido:<br>
  <input type="text" name=”apellido">
  <input type="submit" value="Enviar">
  <input type="submit" value="Enviar en una nueva vantana" formtarget="_blank">
</form>

Los atributos width y height

Los atributos width y height especifican el ancho y alto respectivamente de un elemento <input type="image">. Siempre especifique el tamaño de las imágenes. Si el navegador no conoce el tamaño, la página parpadeará mientras se cargan las imágenes.

En el siguiente ejemplo se define una imagen como el botón Enviar, con atributos de altura y ancho:

Código:

<input type=”image” src="imagen.jpg" alt="submit" width="48" height="48">

El atributo list

El atributo list se refiere a un elemento <datalist> que contiene opciones predefinidas para un elemento <input>.

Un elemento <input> con valores predefinidos en un <datalist>:

Código:

<input list="navegadores">
<datalist id="navegadores">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Muestra:

Los atributos min y max

Los atributos min y max especifican los valores mínimo y máximo para un elemento <input>. Los atributos min y max funcionan con los siguientes type: number, range, date, datetime-local, month, time y week.

En el siguiente ejemplo se muestra un elemento <input> con valores min y max:

Código:

Introduzca una fecha anterior a 1980-01-01:<br>
<input type="date" name="fecha" max="1979-12-31"><br>
Introduzca una fecha posterior a 2000-01-01:<br>
<input type="date" name="fecha" min="2000-01-02"><br>
Cantidad entre 1 y 5:<br>
<input type="number" name="cantidad" min="1" max="5">

Muestra:

Introduzca una fecha anterior a 1980-01-01:

Introduzca una fecha posterior a 2000-01-01:

Cantidad entre 1 y 5:

El atributo multiple

El atributo multiple especifica que el usuario puede ingresar más de un valor en el elemento <input>. El atributo multiple funciona con los siguientes type: email y file.

En el siguiente ejemplo, se muestra un campo para la subida de archivos que acepta valores multiples:

Código:

Selecciona imágenes:
<input type="file" name="img" multiple>

El atributo pattern

El atributo pattern especifica una expresión regular con la que se compara el valor del elemento <input>. El atributo pattern funciona con los siguientes type: text, search, url, tel, email y password.

Consejo: Use el atributo global title para describir el patrón (pattern) para ayudar al usuario.

En el siguiente ejemplo, un campo de entrada que puede contener solo tres letras (no números ni caracteres especiales):

Código:

Código País:<br>
<input type="text" name="cod_pais" pattern="[A-Za-z]{3}" title="Código de tres letras para País">

El atributo placeholder

El atributo placeholder especifica una sugerencia que describe el valor esperado en un campo de entrada (un valor de muestra o una descripción breve de un formato). La sugerencia es mostrada en el campo de entrada antes de que el usuario ingrese un valor. El atributo placeholder funciona con los siguientes type: text, search, url, tel, email y password.

En el siguiente ejemplo, un campo de entrada con un texto placeholder:

Código:

<input type="text" name="nombre" placeholder="Ingresa aquí tu nombre">

Muestra:

El atributo required

El atributo required especifica que un campo de entrada debe ser llenado antes de enviar el formulario. El atributo required funciona con los siguientes type: text, search, url, tel, email, password, date, pickers, number, checkbox, radio y file.

En el siguiente ejemplo, un campo de entrada requerido:

Nombre:<br>
<input type="text" name="nombre" required>

El atributo step

El atributo step especifica el intervalos numéricos permitidos para un elemento <input>. Es decir, si el valor de step es 3, los números permitidos son -3, 0, 3, 6, etc. El atributo step funciona con los siguientes type: number, range, date, datetime-local, month, time y week.

Consejo: El atributo step puede ser usado junto con los atributos min y max para crear un rango de valores permitidos.

En el siguiente ejemplo, un campo de entrada con un intervalo numérico definido:

Código:

<input type="number" name="puntos" step="3">

Muestra: