Entre los elementos mejorados HTML5, el más notable es el elemento de forma. En HTML5, los formularios se han recortado enormemente, y algunas características que previamente requerían la codificación de JavaScript ahora se pueden implementar fácilmente sin codificar. Antes de comenzar la discusión, una cosa a tener en cuenta:
En HTML5, un control de forma puede estar fuera de una o más formas a las que pertenece. Por lo tanto, los controles de formulario, como el FieldSet, la etiqueta y la entrada, tienen todos los atributos de forma agregados para identificar la forma a la que pertenece el control de formulario. En html5 :1. El elemento de formulario en sí agrega dos nuevos atributos: autocompletar y novalidate. La propiedad de autocompletar se utiliza para habilitar la función de lista de sugerencias desplegables, y la propiedad Novalidate se utiliza para desactivar la función de validación de formulario, que es útil cuando se prueba.
2. El elemento FieldSet agrega tres nuevos atributos: deshabilitar, nombre y forma. La propiedad de deshabilitar se usa para deshabilitar el Fieldset, la propiedad de nombre se usa para establecer el nombre del FieldSet, y el valor de la propiedad de formulario es la identificación de una o más formas a las que pertenece el Fieldset. Como se mencionó anteriormente, cuando el FieldSet se coloca fuera del formulario, debe establecer la propiedad de formulario de la etiqueta FieldSet, para que el FieldSet pueda asociarse correctamente con uno o más formularios.
3. Además del atributo for, el elemento de etiqueta solo agrega el atributo de formulario. Vale la pena mencionar aquí que el atributo para el que nunca antes había prestado atención. El atributo for se utiliza para especificar el control de formulario conectado a la etiqueta. De esta manera, al hacer clic en esta etiqueta, el control de formulario adjunto ganará enfoque, como:
<form de acción = "demo_form.asp" id = "form1">
<etiqueta for = "name"> haga clic en mí </etiqueta> <input id = "name" type = "text"> </input>
<input type = "enviar" valor = "enviar" />
</form>
Haga clic en Haga clic en mí y el siguiente cuadro de entrada ganará foco.
4. El elemento de entrada introduce algunos tipos y atributos nuevos para mejorar la usabilidad de la forma. Estos nuevos tipos de entrada son muy útiles para organizar y clasificar los datos. Desafortunadamente, ningún navegador puede admitir bien todos estos tipos.
Además del botón original, texto, envío, casilla de verificación, radio, selección, contraseña, HTML5 agrega los siguientes tipos de entrada nuevos:
Color: colorVarias fechas: Fecha, DateTime, DateTime-Local, Mes, Semana, Hora
Correo electrónico: correo electrónico
Número: Número
Rango
Búsqueda: búsqueda
Teléfono: Tel
Tipo de URL: URL
Puede ejecutar el siguiente ejemplo para ver el estado de soporte de diferentes navegadores:
<form de acción = "demo_form.asp">
Seleccione su color favorito: <input type = "color" name = "favcolor" />
Cumpleaños: <input type = "date" name = "bday" />
Cumpleaños (fecha y hora): <input type = "DateTime" name = "bdaytime" />
Cumpleaños (fecha y hora): <input type = "DateTime-Local" name = "bdaytime" />
Cumpleaños (mes y año): <input type = "mes" name = "bdaymonth" />
Seleccione una hora: <input type = "time" name = "usr_time" />
Seleccione una semana: <input type = "week" name = "week_year" />
Cantidad (entre 1 y 5): <input type = "number" name = "cantidad" min = "1" max = "5" />
Cantidad (entre 1 y 10): <input type = "rango" name = "puntos" min = "1" max = "10" />
Buscar en Google: <input type = "search" name = "googleSearch" />
Teléfono: <input type = "tel" name = "usrtel" />
Agregue su página de inicio: <input type = "url" name = "HomePage" />
Correo electrónico: <input type = "correo electrónico" name = "usRemail" />
<input src = "submitButton.png" type = "Subt" />
</form>
Las siguientes son las propiedades de entrada recién agregadas:
Autocompletar : Muestre automáticamente la información ingresada previamente, con el valor encendido o apagado. Aplicable a texto, búsqueda, URL, Tel, correo electrónico, contraseña, datepickers, rango y tipos de color. Autococus : obtenga automáticamente el enfoque después de cargar la página. Formulario : Especifica la forma a la que pertenece la entrada, que puede ser múltiple. Formato : Especifica la página (URL) o el archivo que procesa esta entrada después de que se envía el formulario. FormencType : Especifica cómo se codifican los datos después de que se envía el formulario. FormMethod : especifica el método HTTP para enviar datos de formulario, que anulará el método HTTP del formulario correspondiente. Formnovalidate : la validez de los datos no se verifica antes del envío. FormTarget : especifica dónde mostrar el contenido del formulario después del envío. Altura, ancho : longitud y ancho del cuadro de entrada, solo aplicable a los tipos de imágenes. Max, Min : los valores máximos y mínimos del valor de entrada. Aplicable a un número significativo, rango, tipos de fecha. Múltiple : si se debe ingresar múltiples valores, adecuados para el correo electrónico y los tipos de archivos. Patrón : especifica la expresión regular para verificar el valor de entrada, aplicable a texto, búsqueda, url, tel, correo electrónico, contraseña. marcador de posición : la información rápida antes de la entrada, aplicable a texto, búsqueda, url, tel, correo electrónico, contraseña. Requerido : si es necesario, si no es necesario, el formulario no se puede enviar. Se aplica a texto, búsqueda, url, tel, correo electrónico, contraseña, seleccionadores de fecha, número, casilla de verificación, radio y tipos de archivos. Paso : Ingrese el valor de paso cuando se cultiva automáticamente, adecuado para el número, el rango, la fecha, la fecha y hora, la fecha y hora de locales, el mes, el tiempo y la semana. Lista : La lista candidata de elementos de entrada debe usarse junto con el elemento DataList. El atributo de la lista se puede utilizar en estos tipos: texto, búsqueda, url, tel, correo electrónico, fecha, número, rango y color. Se estima que es válido en Firefox. Ver un pequeño ejemplo:<FieldSet>
<legend> favoritos </legend>
<p>
<Tabel>
<input type = "text" name = "favoritos" list = "Opciones">
<dataList id = "opciones">
<opción valor = "a">
<opción valor = "b">
<opción valor = "c">
</shalist>
</seleting>
</p>
</fieldset>
El siguiente ejemplo intenta usar varias propiedades, que se pueden ejecutar en diferentes navegadores para ver el efecto real:
<form de acción = "demo_form.asp">
Correo electrónico: <input type = "correo electrónico" name = "correo electrónico" autocomplete = "on" />
Imagen: <input type = "image" src = "img_submit.gif"/>
Ingrese una fecha antes de 1980-01-01: <input type = "date" name = "bday" max = "1979-12-31">
Ingrese una fecha después de 2000-01-01: <input type = "date" name = "bday" min = "2000-01-02">
Cantidad (entre 1 y 5): <input type = "number" name = "cantidad" min = "1" max = "5" />
Seleccione imágenes: <input type = "file" name = "img" múltiple = "múltiple" />
Código de país: <input type = "text" name = "country_code" patrón = "[A-Za-Z] {3}" />
Nombre del primer: <input type = "text" name = "fname" placeHolder = "Nombre de primer lugar" />
UserName: <input type = "text" name = "usrname" required = "required" />
Número: <input type = "number" name = "puntos" step = "3" />
<input type = "enviar" />
<input type = "enviar" format = "demo_admin.asp" value = "Enviar como admin" />
<input type = "Subt" formulactype = "multipart/form-data" value = "Envíe como multipart/formy-data"/>
<input type = "Subt" Formula = "Post" Format = "Demo_Post.asp" Value = "Enviar usando Post" />
<input type = "enviar" formnovalidate = "formnovalididing" value = "Enviar sin validación" />
<input type = "enviar" formTarget = "_ blank" value = "Enviar a una nueva ventana" />
</form>
<form de acción = "demo_form.asp" id = "form1">
Nombre: <input type = "text" name = "fname" />
<input type = "enviar" valor = "enviar" />
</form>
Apellido: <input type = "text" name = "lname" form = "form1" />
Sugerencia: aunque no todos los navegadores admiten todos los tipos, todavía se le recomienda usar estos nuevos tipos, porque incluso si el navegador no lo admite, simplemente degenerará en un cuadro de entrada de texto simple. Referencia práctica: Tutorial W3C: http://www.w3schools.com/html5/default.aspGuía oficial de HTML5: http://dev.w3.org/html5/html-author/
Un sitio web de guía bastante buena: http://html5doctor.com/
HTML5 Tutorial chino: http://www.html5china.com/
Un buen blog delantero: http://www.pjhome.net/default.asp?cateid=1
Conocimiento relacionado sobre los formularios de operación JS: http://www.vevb.com/xugang/archive/2010/08/12/1798005.html