Formas de HTML5
Nuevos tipos de entrada HTML5
HTML5 tiene una serie de nuevos tipos de forma de entrada. Estas nuevas características proporcionan un mejor control de entrada y validación:
- url
- número
- rango
- Fecha recolectores (día, mes, semana, hora, fecha y hora, fecha y hora local)
- buscar
- color
Tipo de entrada - email
tipo de correo electrónico debe contener campos de entrada para la dirección de correo electrónico.
Cuando se envía el formulario, se verificará automáticamente el valor del campo de correo electrónico.
E-mail: <input type="email" name="user_email" />
Tipo de entrada - url
escribe la URL se utiliza para campos de entrada debe contener una dirección URL.
Cuando se envía el formulario, se verificará automáticamente el valor del campo URL.
Homepage: <input type="url" name="user_url" />
Tipo de entrada - Número
campo de entrada Número de tipo debe contener un valor.
También puede establecer el límite para los números aceptables:
Points: <input type="number" name="points" min="1" max="10" />
Utilice el siguiente propiedad a un número predeterminado de tipos definidos:
| propiedad | valor | descripción |
|---|---|---|
| máx | número | El máximo permitido por la normativa |
| me | número | El mínimo permitido por la normativa |
| paso | número | Legalmente intervalos de números (Si el paso = "3", los números legales -3,0,3,6 etc.) |
| valor | número | El valor predeterminado especificado |
Tipo de entrada - gama
rango para el tipo de campo de entrada debe contener un rango de valores digitales.
tipo de gama se muestra como una barra de deslizamiento.
También puede establecer el límite para los números aceptables:
<input type="range" name="points" min="1" max="10" />
Utilice el siguiente propiedad a un número predeterminado de tipos definidos:
| propiedad | valor | descripción |
|---|---|---|
| máx | número | El máximo permitido por la normativa |
| me | número | El mínimo permitido por la normativa |
| paso | número | Legalmente intervalos de números (Si el paso = "3", los números legales -3,0,3,6 etc.) |
| valor | número | El valor predeterminado especificado |
Tipo de entrada - Fecha recogedores (selector de fechas)
HTML5 tiene un nuevo tipo de entrada para seleccionar varias fechas y horarios:
- fecha - para seleccionar día, mes, año
- mes - Seleccione el mes, el año
- Semana - Week y seleccionada en
- tiempo - Seleccione el tiempo (hora y minuto)
- de fecha y hora - Seleccione la hora, día, mes, año (UTC)
- fecha y hora local - para seleccionar la hora, fecha, mes, año (hora local)
El siguiente ejemplo le permite seleccionar una fecha en el calendario:
Date: <input type="date" name="user_date" />
Tipo de entrada - Búsqueda
buscar el tipo de dominios de búsqueda, como búsqueda del sitio o de búsqueda de Google.
buscar campo como campo de texto normal.
Los nuevos elementos de formulario HTML5
HTML5 tiene un número de formas que participan elementos y atributos.
- lista de datos
- keygen
- salida
elemento de lista de datos
elemento de lista de datos especifica una lista de opciones de campo de entrada.
lista de opciones es por elementos dentro de la lista de datos creada.
Para la lista de datos dependiente del campo de entrada, utilice la lista de campos de entrada de la lista de datos propiedad referencias Identificación:
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="baidu" value="http://www.baidu.com" />
<option label="tencent" value="http://www.qq.com" />
<option label="alibaba" value="http://www.alibaba.com" />
</datalist>
elemento keygen
keygen elemento que actúa para proporcionar una manera fiable para verificar el usuario.
elemento keygen es un generador de par de claves (generador de par de claves). Cuando se envía el formulario, genera dos claves, una clave privada, una clave pública.
clave privada (clave privada) se almacena en el cliente, la clave pública (clave pública) se envía al servidor. La clave pública se puede utilizar para verificar que el usuario después de que el certificado de cliente (certificado de cliente).
En la actualidad, el apoyo del navegador para este mal elemento no es suficiente para que sea una normas de seguridad útiles.
<form action="demo_form.php" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
elemento de salida
El elemento de salida para diferentes tipos de productos, tales como cálculo o script de salida:
<output id="result" onforminput="resCalc()"></output>
Propiedades HTML5 nueva forma
Las nuevas propiedades de formulario:
- autocompletar
- novalidate
Los nuevos atributos de entrada:
- autocompletar
- enfoque automático
- formar
- forma anulaciones (acción de formulario, formenctype, método de formulario, formnovalidate, formulario de destino)
- altura 和 ancho
- lista
- min, max 和 paso
- múltiple
- patrón (regexp)
- marcador de posición
- necesario
atributo autocomplete
autocompletar atributo especifica que el campo de formulario o de entrada debe tener autocompletar.
** Notas: ** autocompletar se aplica a <form>las etiquetas, así como los siguientes tipos de <input>etiquetas: texto, buscar, url, teléfono , correo electrónico, contraseña, datepickers, gama y color.
Cuando un usuario comienza a escribir en el campo de autocompletar, el navegador mostrará opciones para llenar el campo:
<form action="demo_form.php" method="get" 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>
** Nota: ** En algunos navegadores, puede que tenga que activar la función de autocompletar para recoger la propiedad.
El atributo autofocus
El atributo especifica el enfoque automático cuando se carga la página, el dominio se centran automáticamente.
** Notas: ** atributo de enfoque automático se aplica a todos los <input>tipos de etiquetas.
User name: <input type="text" name="user_name" autofocus="autofocus" />
atributos de formulario
Especifica de atributo un campo de formulario de entrada pertenece a una o más formas.
** Notas: ** propiedad de formulario se aplica a todos los <input>tipos de etiquetas.
La forma atributo debe hacer referencia a la identificación del propietario del formulario:
<form action="demo_form.php" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />
** Nota: ** referirse a más de una forma, usar una lista separada por espacios.
Formar la propiedad de reescritura
Formar la propiedad de reescritura (atributos de anulación de formulario) le permite anular algunos de los atributos establecidos para el elemento de formulario.
atributos forma de reescritura son:
- formAction - anula el atributo de acción del formulario
- formenctype - Modificaciones de la forma atributo enctype
- formmethod - anula el atributo de método de formulario
- formnovalidate - Modificaciones de la forma de propiedad novalidate
- formtarget - anula el atributo formulario de destino
** Nota: ** propiedades Formulario de reescritura se aplican a los siguientes tipos de <input>etiquetas: enviar e imagen.
<form action="demo_form.php" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.php" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>
** Nota: ** Estos atributos botón de envío es útil para crear diferentes.
atributos altura y anchura
La altura y los atributos de anchura para la altura de imagen predeterminada y la anchura de la imagen del tipo de entrada.
** Notas: altura ** y propiedades de anchura sólo se aplican al tipo de imagen <input>etiquetas.
<input type="image" src="img_submit.gif" width="99" height="99" />
lista de propiedades
La lista de datos lista de atributos predeterminado campo de entrada. campo de entrada de lista de datos es una lista de opciones.
** Notas: ** propiedades de la lista se aplican a los siguientes tipos de <input>etiquetas: texto, búsqueda, URL, teléfono , correo electrónico, selectores de fecha, cantidad, la variedad y color.
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="baidu" value="http://www.baidu.com" />
<option label="tencent" value="http://www.qq.com" />
<option label="alibaba" value="http://www.alibaba.com" />
</datalist>
min, atributos de max y de paso
min, y atributos de paso max para la definición (restricción) de tipos de entrada contiene números o fechas.
atributo max especifica el campo de entrada máxima permitida.
min atributo especifica el valor mínimo permitido para el campo de entrada.
El atributo paso especifica el intervalo de campo de entrada del número legal (si el paso = "3", los números legales -3,0,3,6 etc.).
** Nota: mínimo, máximo y atributos de paso ** para los siguientes tipos de <input>tags: selectores de fecha, número y variedad.
El siguiente ejemplo muestra un campo numérico, el campo acepta un valor entre 0 y 10, con un paso de 3 (números legales 0,3,6 y 9):
Points: <input type="number" name="points" min="0" max="10" step="3" />
múltiples propiedades
una pluralidad de seleccionable predeterminado campo de entrada de valor de atributo múltiple.
** Notas: ** múltiples propiedades se aplican a los siguientes tipos <input>: correo electrónico, y el archivo.
Select images: <input type="file" name="img" multiple="multiple" />
propiedad novalidate
disposiciones de propiedad NOVALIDATE no deben validar los campos de entrada de formulario o al presentar el formulario.
** Notas: ** novalidate propiedad se aplica a <form>y los siguientes tipos de <input>etiquetas: texto, buscar, URL, teléfono , correo electrónico, contraseña, selectores de fecha, rango y color.
<form action="demo_form.php" method="get" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
El atributo patrón
patrón de atributo para la verificación de un patrón de campo de entrada predeterminado (patrón).
Modo (patrón) es una expresión regular.
** Notas: ** propiedades de patrón se aplica a los siguientes tipos de <input>etiquetas: texto, búsqueda, URL, teléfono , correo electrónico y contraseña.
El siguiente ejemplo muestra una de tres letras que contiene campo de texto solamente (sin números o caracteres especiales):
Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />
El atributo marcador de posición
atributo marcador de posición proporciona una pista (pista), describen el valor esperado del campo de entrada.
** Notas: propiedades de marcador de posición ** Se aplican a los siguientes tipos de <input>etiquetas: texto, búsqueda, URL, teléfono , correo electrónico y contraseña.
Punta (pista) se muestra en el campo de entrada es empty aparece, desaparece cuando el campo se pone el foco:
<input type="search" name="user_search" placeholder="Search" />
atributos requeridos
Especifica los atributos necesarios que un campo de entrada debe ser llenado (no vaciar) antes de enviar.
** Notas: ** atributos requeridos para los siguientes tipos de <input>etiquetas: texto, búsqueda, URL, teléfono , correo electrónico, contraseña, selectores de fecha, número, casillas de verificación, de radio y de archivo.
Name: <input type="text" name="usr_name" required="required" />
HTML5 Propiedades globales
Añadido HTML5 propiedades.
| propiedad | descripción |
|---|---|
contenteditable |
Si las disposiciones del contenido de elementos se pueden editar. |
contextmenu |
Las disposiciones de los elementos del menú contextual. menú contextual aparece cuando el usuario hace clic en el elemento. |
data-* |
El almacenamiento de datos para la página personalizada privada o aplicación. |
draggable |
Si las disposiciones del elemento se pueden arrastrar. |
dropzone |
Especifica si se debe copiar, mover, o un enlace cuando se arrastra el ser arrastrado datos. |
hidden |
disposiciones todavía o ya no es relevante, no de los elementos. |
spellcheck |
Si las disposiciones de los elementos de la revisión ortográfica y gramatical. |
translate |
disposiciones si se deben traducir el contenido del elemento. |
HTML5 Eventos
ventana Propiedades del evento
objeto de ventana para el evento desencadenado (aplicado a la <body>etiqueta):
| propiedad | valor | descripción |
|---|---|---|
| onafterprint | guión | Scripts que se ejecutan después de la impresión de documentos. |
| OnBeforePrint | guión | El script se ejecuta antes de que se imprime el documento. |
| onbeforeunload | guión | escritura de documentos de desinstalación se ejecute antes. |
| onerror | guión | Secuencias de comandos que se ejecutan cuando se produce un error. |
| onhaschange | guión | Cuando el script se ejecuta cuando el documento ha cambiado. |
| onmessage | guión | Secuencias de comandos que se ejecutan cuando se activa el mensaje. |
| onoffline | guión | Cuando el script se ejecuta cuando el documento fuera de línea. |
| ononline | guión | Cuando el script se ejecuta cuando el documento está en la línea. |
| onpagehide | guión | Cuando el script se ejecuta cuando se oculta la ventana. |
| onpageshow | guión | Cuando el script se ejecuta cuando la ventana se hace visible. |
| onpopstate | guión | Cuando la ventana de instrucciones para cambiar la historia de la carrera. |
| onredo | guión | Cuando la ejecución de deshacer documento (rehacer) para ejecutar la secuencia de comandos. |
| onstorage | guión | Scripts que se ejecutan área de almacenamiento web después de la actualización. |
| OnUndo | guión | En las secuencias de comandos que se ejecutan cuando el documento de deshacer la ejecución. |
eventos de formulario
La acción del evento desencadenado en el formulario HTML (aplicado a casi cualquier elemento HTML, pero el elemento más común en el formulario):
| propiedad | valor | descripción |
|---|---|---|
| OnContextMenu | guión | Cuando las secuencias de comandos que se ejecutan cuando se activa el menú contextual. |
| onformchange | guión | Secuencias de comandos que se ejecutan cuando se cambia la forma. |
| onforminput | guión | Cuando la forma de obtener una secuencia de comandos para ejecutar cuando la entrada del usuario. |
| oninvalid | guión | Scripts que se ejecutan cuando el elemento no válido cuando. |
Los eventos de ratón
Desencadenada por un ratón o eventos de acción de usuario similar:
| propiedad | valor | descripción |
|---|---|---|
| ondrag | guión | Los elementos son secuencias de comandos que se ejecutan cuando se arrastra. |
| ondragend | guión | El final de la secuencia de comandos se ejecuta en la operación de arrastre. |
| OnDragEnter | guión | Cuando los elementos de un elemento eficaz ha sido arrastrado a arrastrar el script para ejecutar cuando el área. |
| OnDragLeave | guión | Cuando los elementos de la izquierda secuencias de comandos que se ejecutan cuando un destino de colocación válida. |
| ondragover | guión | Cuando el elemento de secuencia de comandos que se arrastra sobre el funcionamiento eficaz del destino de colocación. |
| ondragstart | guión | El guión empezó a correr en la operación de arrastre. |
| ondrop | guión | Cuando el guión está siendo arrastrado arrastre del elemento y operación de colocar. |
| onMouseWheel | guión | Cuando la rueda del ratón para desplazarse siendo Ejecutar secuencias de comandos. |
| onscroll | guión | Cuando el script se ejecuta cuando la barra de desplazamiento elemento de rodadura. |
medios de eventos
Por los medios de comunicación de eventos (tales como vídeo, imágenes y audio) activadas (se aplica a todos los elementos HTML, pero es común en el elemento de los medios de comunicación, tales como <audio>, <embed>, <img>, <object>y <video>):
| propiedad | valor | descripción |
|---|---|---|
| oncanplay | guión | Cuando el archivo de guión está listo para comenzar a correr de juego (al comienzo del buffer es suficiente). |
| oncanplaythrough | guión | 当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。 |
| ondurationchange | script | 当媒介长度改变时运行的脚本。 |
| onemptied | script | 当发生故障并且文件突然不可用时运行的脚本（比如连接意外断开时）。 |
| onended | script | 当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。 |
| onerror | script | 当在文件加载期间发生错误时运行的脚本。 |
| onloadeddata | script | 当媒介数据已加载时运行的脚本。 |
| onloadedmetadata | script | 当元数据（比如分辨率和时长）被加载时运行的脚本。 |
| onloadstart | script | 在文件开始加载且未实际加载任何数据前运行的脚本。 |
| onpause | script | 当媒介被用户或程序暂停时运行的脚本。 |
| onplay | script | 当媒介已就绪可以开始播放时运行的脚本。 |
| onplaying | script | 当媒介已开始播放时运行的脚本。 |
| onprogress | script | 当浏览器正在获取媒介数据时运行的脚本。 |
| onratechange | script | 每当回放速率改变时运行的脚本（比如当用户切换到慢动作或快进模式）。 |
| onreadystatechange | script | 每当就绪状态改变时运行的脚本（就绪状态监测媒介数据的状态）。 |
| onseeked | script | 当 seeking 属性设置为 false（指示定位已结束）时运行的脚本。 |
| onseeking | script | 当 seeking 属性设置为 true（指示定位是活动的）时运行的脚本。 |
| onstalled | script | 在浏览器不论何种原因未能取回媒介数据时运行的脚本。 |
| onsuspend | script | 在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。 |
| ontimeupdate | script | 当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。 |
| onvolumechange | script | 每当音量改变时（包括将音量设置为静音）时运行的脚本。 |
| onwaiting | script | 当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本 |
