HTML5 fue iniciado por WhatWG (Group de trabajo de tecnología de aplicaciones de hipertexto web). El nombre inicial era la aplicación web 1.0. Este estándar absorbió el estándar Web Forms 2.0 y fue adoptado por las organizaciones W3C para fusionarse en la próxima generación del estándar HTML5.
Prefacio
Como el lenguaje con el lenguaje de programación más extenso en la actualidad, el lenguaje HTML tiene las características de la compatibilidad de plataforma fácil de usar, rápida y múltiple. Sin embargo, con el progreso de los tiempos, el estándar HTML se ha estancado. Esta vez, se puede decir que la actualización del estándar HTML5, que aún está en desarrollo, ha traído una nueva vitalidad a este lenguaje de marcado. Este artículo se centrará en los formularios web 2.0 en HTML5, es decir, la parte del formulario.
Los formularios son controles (conjuntos) comunes en las páginas web. Desde el registro e inicio de sesión en el sitio web hasta los sistemas de gestión de datos empresariales, hay básicamente formularios. La razón por la cual los formularios son tan importantes es principalmente porque son responsables de la tarea de actualizar e interactuar con una gran cantidad de usuarios y datos de fondo web. Se puede decir que los desarrolladores web aman y odian las formas web. Les encanta su función conveniente de recopilar y organizar datos, y odian sus funciones en gran medida. Algunas funciones que parecen ordinarias en los usuarios finales del sitio web, como verificación de tipo de entrada, verificación de formulario, indicaciones de error, etc., todos los desarrolladores deben gastar mucho esfuerzo para usar la programación JavaScript y DOM para cumplir con estos puntos funcionales naturalmente requeridos. Con la popularidad de AJAX, algunas bibliotecas de herramientas de JavaScript como Dojo, Yui, etc. han proporcionado convenientes widgets o API de JavaScript para reducir la carga de los desarrolladores.
HTML5 Web Forms 2.0 es una mejora integral en los formularios web actuales. Mientras mantiene las características simples y fáciles de usar, agrega muchos controles incorporados o atributos de control para satisfacer las necesidades de los usuarios y reduce la programación de los desarrolladores. En mi opinión, HTML5 ha mejorado principalmente el formulario web actual en los siguientes aspectos:
<input type = url> </input><input type = correo electrónico> </put>
<input type = date> </input>
<Seleccionar data = http: // domain/getMyoptions> </select>
<input type = text requerido> </put><Entrada tipo = número min = 10 max = 100> </input>
<Smisión><Field name = name index = 0> Peter </field>
<Field Name = Password Index = 0> Contraseña </field>
</2SMISION>
Usaré el nuevo sistema de formulario de HTML5 para hacer una interfaz de registro de usuario simple, incluido el nombre de usuario, la contraseña, la fecha de nacimiento, los problemas de confidencialidad, etc. El código es el siguiente:
<! DOCTYPE HTML> <HTML> <HEAD> <SLEY> PLABA {ancho: 180px; flotante: izquierda; Text-Align: Right; Right-right: 10px} table {margin-left: 80px} table td {border-bottom: 1px solid #cccccc} input.submit {margin-left: 80px} </style> </head> <body> <form action = '/registr' enctype = application/x-ww-form+xml Method Use el correo electrónico para registrarse) </etiqueta> <input name = 'name' requerido type = 'correo electrónico'> </put> </p> <p> <etiqueta for = 'contraseña'> contraseña </selete> <input name = 'contraseña' requerido type = 'contraseña'> </input> </p> <p> <label a = '`cuenta =' date de nacimiento </etlabe> <input type = 'name =' cumpleaños '/> <p> <p> <p> <p> <p> for = 'género'> nacionalidad </etiqueta> <select name = 'country' data = 'países.xml'> </select> </p> <p> <etiqueta for = 'photo'> personal de avatar personal </label> <input type = 'file' name = 'photo' acepta = 'image/*/> </p> <table> <thead> <td> <botin type = add template = cuestionid>+</button </button </buttony </> </p> <table> <thead> <td> <botte type = add Template = sateyid>+</button </button </buttony </> </p> <table> <thead> <td> <botte type = add Template = witheyid>+</button </button </buttone. Pregunta </td> <td> respuesta </td> <td> </td> </head> <tr id = cuestionId repetir = template repetir-start = 1 repetir-min = 1 repetir-max = 3> <td> <input type = text name = Preguntas [pregunta] .q> </td> <td> <input type = text name = Preguntas [Preguntas [Preguntas] .a> </td> <td> <td> type = eliminar> eliminar </boton> </td> </tr> </table> <p> <input type = 'subt' value = 'send' class = 'subt'/> </p> </form> </body> </html>Dado que el estándar HTML5 todavía está en desarrollo, los diferentes navegadores admiten características HTML5 bastante limitadas. Entre ellos, Opera lo admite mejor en forma. Este ejemplo se ejecuta normalmente en Opera9. Las representaciones son las siguientes:
Este ejemplo utiliza algunos nuevos elementos de formulario HTML5, como el cuadro de entrada de tipo de correo electrónico (ID) y el cuadro de entrada de tipo de fecha (fecha de nacimiento). Y se utiliza un modelo duplicado para guiar a los usuarios para llenar los problemas de confidencialidad. En la carga de avatares personalizados, restringiendo los tipos de archivos, los usuarios pueden elegir imágenes para cargar contenido que cumpla con los estándares. El cuadro de entrada de selección desplegable para la selección de la nacionalidad del usuario se utiliza en forma de una fuente de datos de divulgación. La fuente de datos de divulgación usa CoUTRIES.XML, y el contenido es el siguiente:
<Seleccione xmlns = http: //www.w3.org/1999/xhtml> <opción> China </opción> <opción> Japón </opción> <opción> Corea </opción> </select>
Y el enchado de formulario es la aplicación/x-www-form+xml, es decir, envío de XML HTML5. Entonces, una vez que se apruebe la verificación del formulario, el contenido del formulario se enviará en XML. También encontrará que si no hay ningún valor en el cuadro de entrada de ID, o si se ingresa una cadena de tipo de correo no emitido, una vez que intente enviar el formulario, habrá un mensaje de error, que está integrado en el navegador.
La actualización de HTML5 a los controles de formato es indudablemente muy emocionante. Este artículo describe algunas características nuevas de formularios, y algunas características nuevas también son muy emocionantes. Creo que con el desarrollo en profundidad de los estándares y la mejora adicional del soporte del navegador para HTML5, el trabajo de diseñar una forma simple y fácil de usar será muy fácil.