HTML5 Atributos de formulario

Nuevos atributos de formulario en HTML5

Las etiquetas <form> e <input> de HTML5 añaden varios atributos nuevos.

Nuevos atributos para <form>:

• autocomplete
• novalidate

Nuevos atributos para <input>:

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

Atributo autocomplete de <form> / <input>

El atributo autocomplete especifica que un campo form o input debe tener la función de autocompletado.

Cuando el usuario comienza a escribir en un campo de autocompletado, el navegador debería mostrar las opciones de relleno en ese campo.

Sugerencia:El atributo autocomplete puede estar activado en el elemento form y desactivado en el elemento input.

Nota:autocomplete se aplica a la etiqueta <form> y a los siguientes tipos de etiqueta <input>: text, search, url, telephone, email, password, datepickers, range y color.

Ejemplo

Activar autocomplete en un formulario HTML (con un campo input con autocomplete desactivado):

<form action="demo-form.php" autocomplete="on"> First name:<input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form>

Pruébelo »

Sugerencia:En algunos navegadores, es posible que necesite habilitar la función de autocompletado para que este atributo tenga efecto.

Atributo novalidate de <form>

novalidate es un atributo booleano (true o false).

El atributo novalidate es un atributo booleano de los elementos de formulario HTML que se utiliza para configurar que el navegador no valide el formulario.

Cuando este atributo se añade al elemento <form>, el navegador no realizará la validación de formularios por defecto ni comprobará si los campos de entrada cumplen las reglas de validación especificadas.

Usar el atributo novalidate permite al desarrollador controlar completamente la lógica de validación del formulario, pudiendo personalizar el comportamiento de la validación mediante JavaScript u otros medios.

Ejemplo

Enviar datos de formulario sin validación

<form action="demo-form.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form>

Pruébelo »

Atributo autofocus de <input>

El atributo autofocus es un atributo booleano.

El atributo autofocus especifica que el campo obtiene automáticamente el foco cuando se carga la página.

Ejemplo

Hacer que el campo de entrada "First name" se enfoque automáticamente al cargar la página:

First name:<input type="text" name="fname" autofocus>

Pruébelo »

Atributo form de <input>

El atributo form especifica uno o más formularios a los que pertenece el campo de entrada.

Sugerencia:Para hacer referencia a más de un formulario, utilice una lista separada por espacios.

Ejemplo

Un campo input fuera del formulario hace referencia a un formulario HTML (dicho campo input todavía pertenece al formulario):

<form action="demo-form.php" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="Enviar"> </form> Last name: <input type="text" name="lname" form="form1">

Pruébelo »

Atributo formaction de <input>

El atributo formaction se utiliza para describir la URL a la que se envía el formulario.

El atributo formaction sobrescribe el atributo action del elemento <form>.

Nota:El atributo formaction se utiliza con type="submit" y type="image".

Ejemplo

El siguiente formulario HTML contiene dos botones de envío con diferentes direcciones:

<form action="demo-form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Enviar"><br> <input type="submit" formaction="demo-admin.php" value="Enviar"> </form>

Pruébelo »

Atributo formenctype de <input>

El atributo formenctype describe la codificación de datos enviados al servidor desde el formulario (solo para formularios con method="post" en el formulario).

El atributo formenctype sobrescribe el atributo enctype del elemento form.

Importante:Este atributo se utiliza junto con type="submit" y type="image".

Ejemplo

El primer botón de envío envía los datos del formulario con la codificación predeterminada, y el segundo botón envía los datos con el formato de codificación "multipart/form-data":

<form action="demo-post_enctype.php" method="post"> First name: <input type="text" name="fname"><br> <input type="submit" value="Enviar"> <input type="submit" formenctype="multipart/form-data" value="Enviar como Multipart/form-data"> </form>

Pruébelo »

Atributo formmethod de <input>

El atributo formmethod define el método de envío del formulario.

El atributo formmethod sobrescribe el atributo method del elemento <form>.

Nota:Este atributo se puede utilizar junto con type="submit" y type="image".

Ejemplo

Ejemplo de redefinición del método de envío del formulario:

<form action="demo-form.php" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Enviar"> <input type="submit" formmethod="post" formaction="demo-post.php" value="Enviar usando POST"> </form>

Pruébelo »

Atributo formnovalidate de <input>

El atributo novalidate es un atributo booleano.

El atributo novalidate especifica que el elemento <input> no necesita ser validado al enviar el formulario.

El atributo formnovalidate sobrescribe el atributo novalidate del elemento <form>.

Nota:El atributo formnovalidate se utilizatype="submit"junto con

Ejemplo

Un formulario con dos botones de envío (con y sin validación):

<form action="demo-form.php"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="Enviar"><br> <input type="submit" formnovalidate value="Enviar sin validación"> </form>

Pruébelo »

Atributo formtarget de <input>

El atributo formtarget especifica un nombre o una palabra clave que indica dónde mostrar los datos después de enviar el formulario.

El atributo formtarget sobrescribe el atributo target del elemento <form>.

Nota:El atributo formtarget se utilizatype="submit"ytype="image"junto con.

Ejemplo

Un formulario con dos botones de envío, mostrando en diferentes ventanas:

<form action="demo-form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Envío normal"> <input type="submit" formtarget="_blank" value="Enviar a una nueva página"> </form>

Pruébelo »

Atributos height y width de <input>

Los atributos height y width especifican la altura y el ancho de la imagen para la etiqueta <input> de tipo image.

Nota:Los atributos height y width solo se aplican a las etiquetas <input> de tipo image.

Consejo:Normalmente las imágenes especifican al mismo tiempo los atributos height y width. Si la imagen define la altura y el ancho, el espacio necesario para la imagen se reserva cuando se carga la página. Sin estos atributos, el navegador no sabe el tamaño de la imagen y no puede reservar el espacio apropiado. La imagen puede alterar el diseño de la página mientras se carga (aunque la imagen ya se haya cargado).

Ejemplo

Define un botón de envío de imagen, utilizando los atributos height y width:

<input type="image" src="img_submit.gif.html" alt="Submit" width="48" height="48">

Pruébalo »

Atributo list de <input>

El atributo list especifica el datalist del campo de entrada. El datalist es una lista de opciones para el campo de entrada.

Ejemplo

Predefine valores de <input> en <datalist>:

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Pruébalo »

Atributos min y max de <input>

Los atributos min, max y step se utilizan para especificar restricciones (limitaciones) para los tipos de input que contienen números o fechas.

Nota:Los atributos min, max y step se aplican a los siguientes tipos de etiquetas <input>: date pickers, number y range.

Ejemplo

Configuración de valores mínimos y máximos del elemento <input>:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

Pruébalo »

Atributo multiple de <input>

El atributo multiple es un atributo booleano.

El atributo multiple especifica que se pueden seleccionar múltiples valores en el elemento <input>.

Nota:El atributo multiple se aplica a los siguientes tipos de etiquetas <input>: email y file:

Ejemplo

Subir múltiples archivos:

Select images: <input type="file" name="img" multiple>

Pruébalo »

Atributo pattern de <input>

El atributo pattern describe una expresión regular utilizada para validar el valor del elemento <input>.

Nota:El atributo pattern se aplica a los siguientes tipos de etiquetas <input>: text, search, url, tel, email y password.

Consejo:Se utiliza el atributotitleglobal para describir el patrón.

Consejo:Usted puede, en nuestrotutorial de JavaScript,aprender sobre expresiones regulares.

Ejemplo

El siguiente ejemplo muestra un campo de texto que solo puede contener tres letras (sin números ni caracteres especiales):

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

Pruébalo »

Atributo placeholder de <input>

El atributo placeholder proporciona una pista (hint) que describe el valor esperado en el campo de entrada.

La pista breve se muestra en el campo de entrada antes de que el usuario ingrese un valor.

Nota:El atributo placeholder se aplica a los siguientes tipos de etiquetas <input>: text, search, url, telephone, email y password.

Ejemplo

Texto de sugerencia del campo input:

<input type="text" name="fname" placeholder="First name">

Pruébalo »

Atributo required de <input>

El atributo required es un atributo booleano.

El atributo required especifica que el campo de entrada debe completarse antes de enviar el formulario (no puede estar vacío).

Nota:El atributo required se aplica a los siguientes tipos de etiquetas <input>: text, search, url, telephone, email, password, date pickers, number, checkbox, radio y file.

Ejemplo

Campo input que no puede estar vacío:

Username: <input type="text" name="usrname" required>

Pruébalo »

Atributo step de <input>

El atributo step especifica el intervalo numérico válido para el campo de entrada.

Si step="3", los números válidos son -3, 0, 3, 6, etc.

Consejo:El atributo step se puede combinar con los atributos max y min para crear un rango de valores.

Nota:El atributo step se utiliza con los siguientes tipos (type): number, range, date, datetime, datetime-local, month, time y week.

Ejemplo

Especifica que el paso (step) del input sea 3:

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

Pruébalo »

Etiqueta <input> de HTML5