Propiedades del formulario HTML5

Propiedades HTML5 nueva forma

<Form> de HTML5 y <input> agrega varias propiedades nuevas.

<form> nuevos atributos:

• autocompletar
• novalidate

<input> Nuevas propiedades:

• autocompletar
• enfoque automático
• formulario
• formAction
• formenctype
• formmethod
• formnovalidate
• formtarget
• altura y anchura
• lista
• mínimo y máximo
• múltiple
• patrón (expresión regular)
• marcador de posición
• necesario
• paso

<Forma> / <input> atributo de autocompletar

autocompletar atributo especifica el campo de formulario o de entrada debe tener autocompletar.

Cuando los usuarios comienzan a escribir en el campo de autocompletar, el navegador mostrará opciones para rellenar este campo.

Consejo: autocompletar atributo posible elemento de formulario está encendido, y en el elemento de entrada está desactivado.

Nota: Se aplican autocompletar <form>, y los siguientes tipos de etiqueta <input>: texto, búsqueda, URL, teléfono , correo electrónico, contraseña, datepickers, variedad y color.

Ejemplos

formulario HTML en la función Autocompletar abierto (a autocompletar campo de entrada de apagado):

<Forma action = "Demo-form.php" autocomplete = "on"> Nombre : <input type = "text" name = "fname"> <br> Apellido: <input type = "text" name = "lname"> <br> E-mail: <input type = "e-mail" name = "e-mail" autocomplete = "off"> <br> <Input type = "submit"> </ Form>

Trate »

Consejo: Algunos navegadores, es posible que tenga que habilitar la característica Autocompletar, con el fin de recoger la propiedad.

<Forma> propiedad novalidate

Una propiedad booleana propiedad novalidate.

novalidate atributo especifica el momento de enviar el formulario no debe validar la entrada del formulario o de dominio.

Ejemplos

Sin el envío de formularios de datos de verificación

<Forma action = "Demo-form.php" novalidate> E-mail: <input type = "e-mail" name = "user_email"> <Input type = "submit"> </ Form>

Trate »

<Entrada> atributo de enfoque automático

atributo de enfoque automático es un atributo booleano.

atributo especifica el enfoque automático cuando se carga la página, el dominio reciben automáticamente el enfoque.

Ejemplos

Deje que "Nombre" campo de entrada introduzca el enfoque automático al cargar la página:

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

Trate »

<Entrada> propiedad de formulario

atributo especifica un campo de formulario de entrada pertenece a una o más formas.

Consejo: Para citar más de una forma, utilice una lista separada por espacios.

Ejemplos

Situado en forma fuera del campo de entrada se refiere al formulario HTML (la forma sigue siendo una forma de entrada forma parte de):

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

Last name: <input type="text" name="lname" form="form1">

Trate »

<Entrada> propiedad formAction

La propiedad formAction se utiliza para describir la URL del formulario de envío.

La anulación formAction atributos <form> en el atributo de acción.

Nota: El formAction tipo de atributo = "submit" y tipo = "imagen".

Ejemplos

HtmlForm envía el siguiente formulario contiene el botón dos direcciones diferentes:

<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="提交"><br>
<input type="submit" formaction="demo-admin.php"
value="提交">
</form>

Trate »

<Entrada> propiedad formenctype

formenctype atributo describe el formulario se envía a la codificación de los datos del servidor (sólo para el método del formulario form = "post" forma)

modificaciones de propiedades formenctype ENCTYPE atribuir elementos de formulario.

Principal: Este atributo type = "submit" y escriba = "imagen" que se utiliza en conjunción.

Ejemplos

El primer botón de enviar para enviar los datos del formulario se codifica de forma predeterminada, el segundo botón se someten a "multipart / form-data" formato de codificación de datos para enviar el formulario:

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

Trate »

<Entrada> propiedad formmethod

formmethod atributo define el envío del formulario manera.

formmethod propiedad que cubre las etiquetas <form> método de atributo del elemento.

Nota: Este atributo puede utilizarse con type = "submit" y escriba = "imagen" que se utiliza en conjunción.

Ejemplos

Redefinir el envío del formulario a modo de ejemplo:

<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="提交">
<input type="submit" formmethod="post" formaction="demo-post.php"
value="使用 POST 提交">
</form>

Trate »

<Entrada> propiedad formnovalidate

novalidate propiedad es una propiedad booleana.

novalidate atributo describe los elementos <input> no necesitan ser validados cuando se envía el formulario.

atributos formnovalidate anulan atributo novalidate elemento <form>.

Nota: formnovalidate atributo type = "submit para su uso con

Ejemplos

Dos botones de enviar el formulario (no aplicable a la verificación):

<form action="demo-form.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="提交"><br>
<input type="submit" formnovalidate value="不验证提交">
</form>

Trate »

<Entrada> propiedad formtarget

formtarget atributo especifica un nombre o una palabra clave para indicar los datos de pantalla recibidos después de que se envía el formulario.

Las modificaciones de propiedades formtarget <form> atributo de destino del elemento.

Nota: tipo de atributo formtarget= "submit" y escriba = "imagen" que se utiliza en conjunción.

Ejemplos

Dos botones de enviar el formulario que aparece 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="正常提交">
<input type="submit" formtarget="_blank"
value="提交到一个新的页面上">
</form>

Trate »

<input> altura y anchura atributos

la altura y el ancho de los atributos especificados para el tipo de imagen de <input> altura de la imagen y el ancho de la etiqueta.

Nota: altura y anchura propiedades sólo se aplican al tipo de imagen <input>.

Consejo: La imagen se suele especificar la altura y la anchura de los atributos.Si el conjunto de imágenes de la altura y la anchura del espacio necesario para la imagen cuando se retendrá la página se carga. Sin estos atributos, el navegador no sabe el tamaño de la imagen, y no puede dejar de lado el espacio apropiado. Fotos en el proceso de carga afectará el cambio de diseño de páginas (aunque la imagen se haya cargado).

Ejemplos

Define una imagen botón de envío, utilice la altura y la anchura atributos:

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

Trate »

<input> propiedades de la lista

atributo de lista de lista de datos especifica los campos de entrada. de lista de datos es una lista de opciones para los campos de entrada.

Ejemplos

Predefinido en <lista de datos> en <input> valor:

<input list="browsers">

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

Trate »

<Entrada> mínimo y máximo atributos

min, max, y atributos de paso se utilizan como tipos de entrada que contienen números o fechas Limitada (restricciones).

Nota: mínimo, máximo y atributos de paso se aplican a los siguientes tipos de etiqueta <input>: selectores de fecha, número y variedad.

Ejemplos

<Entrada> elementos de la configuración mínima y máxima:

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">

Trate »

<input> propiedades múltiples

atributo múltiple es un atributo booleano.

multiple especifica los atributos <input> para seleccionar varios valores.

Nota: Las múltiples propiedades se aplican a los siguientes tipos de etiqueta <input>: correo electrónico y archivos:

Ejemplos

Cargar varios archivos:

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

Trate »

<Entrada> propiedad patrón

atributo patrón describe una expresión regular se utiliza para validar el valor de los elementos <input>.

Nota: atributo patrón seaplica a los siguientes tipos de etiqueta <input>: texto, búsqueda, URL, tel , correo electrónico, y una contraseña.

Consejo: Se utiliza para el mundial título atributo describe el modo.

Consejo: Usted puede en nuestro tutorial JavaScript para aprender sobre el contenido de una expresión regular

Ejemplos

El siguiente ejemplo muestra un tres cartas contienen campo de texto solamente (sin números o caracteres especiales):

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

Trate »

<Entrada> atributo marcador de posición

atributo marcador de posición proporciona una pista (pista), describen el valor esperado del campo de entrada.

Un breve recordatorio se mostrará en el campo de entrada antes de que el valor de la entrada del usuario.

Nota: atributo marcador de posiciónse aplica a los siguientes tipos de etiqueta <input>: texto, búsqueda, URL, teléfono , correo electrónico y contraseña.

Ejemplos

campo de entrada de texto del mensaje t:

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

Trate »

<Entrada> Atributo requerido

atributo necesario es un atributo booleano.

atributo obligatorio especifica que un campo de entrada debe ser llenado (no vacío) antes de enviar.

Nota: los atributos necesariospara los siguientes tipos de etiqueta <input>: texto, búsqueda, URL, teléfono , correo electrónico, contraseña, selectores de fecha, número, casilla de verificación, la radio y el archivo.

Ejemplos

No campos de entrada vacías puede:

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

Trate »

<input> atributos de paso

atributo de paso para el campo de entrada especifica los intervalos de números legales.

Si el paso = "3", números jurídicas podrían ser -3,0,3,6, etc.

Consejo: atributo de pasopuede crear un valor máximo regional y atributos min.

Nota: El paso tipos de atributos utilizados en conjunción con el siguiente tipo: número, variedad, fecha, fecha y hora , fecha y hora local, el mes, la hora y la semana.

Ejemplos

Predeterminada paso a paso de entrada 3:

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

Trate »

etiqueta <input> de HTML5