HTML5 Propiedades del formulario
HTML5Se han añadido nuevas propiedades de formulario, form ha añadido autocomplete y novalidate, input ha añadido autocomplete, autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height y width, list, min y max, multiple, pattern (regexp)
HTML5 Nuevas propiedades de formulario
HTML5 Las etiquetas <form> y <input> han añadido varias nuevas propiedades.
Nuevas propiedades de <form>:
Nuevas propiedades de <input>:
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height y width
list
min y max
multiple
pattern (regexp)
placeholder
required
step
<form> / Propiedad 'autocomplete' de <input>
La propiedad 'autocomplete' especifica que el campo 'form' o 'input' debe tener la función de autocompletar.
Cuando el usuario comience a escribir en el campo de finalización automática, el navegador debe mostrar las opciones llenadas en ese campo.
Aviso: La propiedad autocomplete puede estar activada en el elemento form y desactivada en el elemento input.
Nota: autocomplete se aplica al etiqueta <form>, así como a los siguientes tipos de etiquetas <input>: text, search, url, teléfono, correo electrónico, contraseña, seleccionadores de fecha, rango y color.
Ejemplo en línea
Activar autocomplete en el formulario HTML (un campo de entrada desactiva autocomplete):
Consejo: En algunos navegadores, es posible que necesite activar la función de finalización automática para que esta propiedad funcione.
Propiedad novalidate de <form>
La propiedad novalidate es una propiedad booleana (booleana).
La propiedad novalidate especifica que no se debe validar el formulario o los campos de entrada al enviar.
Ejemplo en línea
No se debe validar los datos del formulario al enviarlo
Propiedad autofocus de <input>
La propiedad autofocus es una propiedad booleana.
La propiedad autofocus especifica que el campo se centre automáticamente al cargar la página.
Ejemplo en línea
Hacer que el campo de entrada "Nombre" se centre automáticamente al cargar la página:
<input> propiedad form
La propiedad form especifica uno o más formularios a los que pertenece el campo de entrada.
Aviso:Para referirse a más de un formulario, utilice una lista separada por espacios.
Ejemplo en línea
Los campos input situados fuera del formulario form hacen referencia al HTML form (este formulario input sigue siendo parte del formulario form):
Propiedad formaction del <input>
La propiedad formaction se utiliza para describir la dirección URL de envío del formulario.
La propiedad formaction sobrescribe la propiedad action del elemento <form>.
Atención: La propiedad formaction se utiliza para type="submit" y type="image".
Ejemplo en línea
El siguiente formulario HTML contiene dos botones de envío con diferentes direcciones:
Propiedad formenctype del <input>
La propiedad formenctype describe el formato de codificación de los datos enviados al servidor por el formulario (sólo para formularios con method="post" en el formulario)
La propiedad formenctype sobrescribe la propiedad enctype del elemento form.
Principal: Esta propiedad se utiliza junto con type="submit" y type="image".
Ejemplo en línea
El primer botón de envío envía los datos del formulario con la codificación predeterminada, el segundo botón de envío lo hace con "multipart/form-data" formato de codificación para enviar datos del formulario:
<input> atributo formmethod
El atributo formmethod define el modo de envío del formulario.
El atributo formmethod sobrescribe el atributo method del elemento <form>.
Atención: Esta propiedad se puede usar junto con type="submit" y type="image".
Ejemplo en línea
Ejemplo de redefinición del modo de envío del formulario:
<input> atributo formnovalidate
El atributo novalidate es un atributo booleano.
El atributo novalidate describe que el elemento <input> no necesita ser verificado al enviar el formulario.
El atributo formnovalidate sobrescribe el atributo novalidate del elemento <form>.
Atención: El atributo formnovalidate se utiliza junto con type="submit"
Ejemplo en línea
Dos formularios con dos botones de envío (usando y no usando validación):
<input> atributo formtarget
El atributo formtarget especifica un nombre o una palabra clave para indicar la presentación de los datos después de que se envían los datos del formulario.
El atributo formtarget sobrescribe el atributo target del elemento <form>.
Atención: El atributo formtarget se utiliza junto con type="submit" y type="image".
Ejemplo en línea
Dos botones de envío de formulario, mostrados en diferentes ventanas:
Propiedades height y width de <input>
Las propiedades height y width especifican la altura y anchura de las imágenes para las etiquetas <input> del tipo image.
Atención: Las propiedades height y width solo son aplicables a las etiquetas <input> del tipo image.
Aviso:El tamaño del área requerida por la imagen se determina generalmente mediante la especificación de las propiedades de altura y anchura. Si se establecen la altura y el ancho de la imagen,
Se mantendrá durante la carga de la página. Si no se especifican estas propiedades,
El navegador no conoce el tamaño de la imagen y no puede reservar
Espacio adecuado. Durante el proceso de carga de la imagen, el diseño de la página puede cambiar.
(A pesar de que la imagen se ha cargado).
Ejemplo en línea
Se definió un botón de envío de imagen, utilizando las propiedades height y width:
Propiedad list de <input>
La propiedad list especifica la lista de opciones del campo de entrada. La lista de opciones es una lista de opciones para el campo de entrada.
Ejemplo en línea
En el datalist se predefinen valores de <input>:
Propiedades min y max de <input>
Las propiedades min, max y step se utilizan para establecer límites ( restricciones ) para los tipos de entrada que contienen números o fechas.
Atención: las propiedades min, max y step son aplicables a los tipos de etiquetas <input> siguientes: seletores de fecha, número y rango.
Ejemplo en línea
Configuración del valor mínimo y máximo del elemento <input>:
Propiedad multiple del <input>
La propiedad multiple es una propiedad booleana.
La propiedad multiple permite seleccionar varios valores en el elemento <input>.
Atención: La propiedad multiple es aplicable a los siguientes tipos de etiquetas <input>: email y file:
Ejemplo en línea
Subir varios archivos:
Propiedad pattern del <input>
La propiedad pattern describe una expresión regular utilizada para verificar el valor del elemento <input>.
Atención:La propiedad pattern es aplicable a los siguientes tipos de etiquetas <input>: text, search, url, tel, email y password.
Aviso: Se utiliza globalmente title La propiedad describe el patrón.
Ejemplo en línea
El siguiente ejemplo muestra un campo de texto que solo puede contener tres letras (sin números ni caracteres especiales):
<input> atributo placeholder
El atributo placeholder proporciona una sugerencia (hint) que describe el valor esperado para el campo de entrada.
Una sugerencia breve se mostrará en el campo de entrada antes de que el usuario ingrese un valor.
Atención: El atributo placeholder se aplica a los tipos siguientes de etiquetas <input>: text, search, url, teléfono, correo electrónico y contraseña.
Ejemplo en línea
Texto de sugerencia del campo de entrada input t:
Atributo required del <input>
El atributo required es un atributo booleano.
El atributo required especifica que el campo de entrada debe estar llenado antes de enviar (no puede estar vacío).
Atención:El atributo required se aplica a los tipos siguientes de etiquetas <input>: text, search, url, teléfono, correo electrónico, contraseña, seleccionadores de fecha, número, casilla de verificación, radio y archivo.
Ejemplo en línea
El campo de entrada input no puede estar vacío:
Atributo step del <input>
El atributo step define intervalos de números válidos para el campo de entrada.
Si step="3Si se utiliza "", los números válidos son -3,0,3,6 y
Consejo: El atributo step puede usarse con
Los atributos max y min crean un rango de valores.
Atención: el atributo step se utiliza junto con los tipos de tipo siguientes: number, range, date, datetime, datetime-local, mes, tiempo y semana.
Ejemplo en línea
Se establece el paso de input step como3:
HTML5 Etiqueta <input>
| Etiqueta | Descripción |
| <form> | Definir un formulario |
| <input> | Definir un campo de entrada |