El propósito de la nueva función HTML5 es mejorar el soporte de la incrustación, como el video y el audio, y proporcionar a los desarrolladores y usuarios finales programación simple y una mejor experiencia de usuario. Ahora el mundo de Internet está esperando, y el navegador puede admitir la nueva versión de HTML5 cuando se actualiza. HTML5 ha sido apoyado por muchos navegadores, como Safari, Chrome, Firefox, Opera, IE9. Es compatible hacia atrás, pero los navegadores de hoy no pueden ser completamente compatibles con HTML5.
La actualización de un sitio web a HTML5 es bastante fácil, ya que es compatible con HTML4. Solo necesita modificar su Doctype. Esta nueva actualización ayuda a simplificar las cosas, por lo que ahora puede actualizar todos sus sitios web y no se bloquearán porque todas las etiquetas HTML4 todavía son 100% compatibles en HTML5.
Los formularios HTML5 definen más de una docena de nuevos tipos y características de entrada, y estos nuevos elementos permiten a los programadores programar más fácilmente. Hablemos de estas nuevas características a continuación.
1. Marcador de posición de cuadro de entrada
En HTML4, los desarrolladores usan JavaScript y JQuery como marcadores de posición de cuadro de entrada, mientras que en HTML5, los desarrolladores pueden mostrar fácilmente un marcador de posición. ¿Qué son los marcadores de posición? El marcador de posición es el texto rápido que aparece en el cuadro de entrada. Cuando haga clic en el campo de entrada, desaparecerá automáticamente. Puede solicitar la muestra de texto que el usuario debe ingresar en el cuadro de texto. Más bien, hay un cuadro de entrada de correo electrónico donde puede configurar los poseedores de posición [email protected] y desaparecerá cuando haga clic en ellos.
IE FF Safari Chrome Opera iPhone Android
- 3.7+ 4+ 4+ 11+ 4+ -
2. Eventos de enfoque automático
HTML5 simplemente cargue una página web, y la página web moverá automáticamente el enfoque a un cuadro de entrada específico, al igual que JavaScript. ¿Cuál es la diferencia? Como ahora es solo una etiqueta HTML, los usuarios pueden deshabilitar fácilmente esta propiedad en su navegador. No todos los navegadores admiten el enfoque automático, pero los navegadores no simplemente ignoran esta propiedad. Si desea que todos los navegadores funcionen, simplemente agregue nuevas propiedades de enfoque automático HTML5 y luego verifique si el navegador admite enfoque automático. Si puede, no tiene que usar un script de enfoque automático. Si no tiene uno, debe agregar un script de enfoque automático.
FF IE Safari Chrome Opera iPhone Android
- 4+ 4+ 3+ 10+ - -
3. HTML Tipo de entrada recién definida
1. Correo electrónico
El primer cuadro de entrada que voy a decir es la dirección de correo electrónico. Los navegadores más antiguos que no admiten nuevos tipos también simplemente los tratan como un cuadro de texto, y el 99% de los usuarios no notarán este cambio hasta que envíen el formulario (habrá validación del formulario en este momento).
2. Sitio web
Hablemos del cuadro de entrada de URL. Si necesita ingresar una URL, espera ingresarlo como http://www.vevb.com. Ahora en el cuadro de entrada de tipo URL, aparecerá un teclado virtual variable en el iPhone. Los usuarios pueden ingresar fácilmente las barras y .com. Del mismo modo, los usuarios desconocen estos antes de enviar el formulario.
3. Números
Para obtener números coincidentes en HTML4, debe usar scripts jQuery para ayudar con la verificación. HTML5 agrega tipos numéricos. Algunas propiedades adicionales (opcional): Min: Especifica el número de entrada mínimo que puede ser aceptado por el cuadro de entrada. MAX: ¿Se permite ingresar el número máximo? Paso: El intervalo legal para el dominio de entrada de atributos, el valor predeterminado es 1.
Como se muestra en la figura anterior, solo se permiten números (en la mayoría de los casos, estos no se notarán hasta que se solicite un error al enviar), solo 0, 2, 4 son legales (6 es ilegal porque el paso es 10 y legal es 0, 10, 20 ...).
4. Slider digital
HTML5 le permite usar un nuevo tipo llamado Range, y el cuadro de entrada se convierte en un control deslizante. El formulario de su sitio web puede usar un control deslizante. Su etiqueta de atributo es la misma que el tipo de número, simplemente cambie el tipo de configuración de tipo = 'Número' a type = 'rango'.
5. Calendario
Las mejores adiciones nuevas hasta la fecha, los tipos de selección de fecha nombrados Fecha y DateTime (hay otros tipos de fecha/hora adicionales, como tiempo, semana, mes y calendario local). Muchos marcos de JavaScript, como JQuery UI y YIU, ya tienen estos controles, pero agregar un selector de calendario es bastante molesto. HTML5 define un nuevo selector de fecha local que no tiene que incluir el uso de scripts en la página. A partir de ahora, Opera es el único que admite plenamente esta función, y para otros navegadores, puede hacer un script alternativo en caso de que el navegador no lo admita. Sin embargo, en última instancia, todos los navegadores se actualizarán.
6. Buscar
HTML5 agrega tipo de cuadro de entrada de búsqueda. Esto no es nada, pero es un buen cambio para algunos usuarios. Simplemente puede rodear los bordes del cuadro de entrada automáticamente, y cuando comience a escribir, habrá una pequeña X a la derecha. No todos los navegadores lo admiten actualmente.
7. Color
HTML5 también define el color del tipo, que le permite seleccionar un color y devolver el valor hexademático. Opera11 es el único navegador que admite este tipo de navegador. Sin embargo, no debería haber muchas personas que usen este tipo, por lo que no es un gran problema no apoyarlo.
8. Verificación de forma
La nueva característica más emocionante es la verificación de forma. La mayoría de los desarrolladores hacen validación de formulario, ya sea cliente o servidor. Tal vez el validador de formulario de HTML5 no pueda reemplazar su verificación del lado del servidor, pero ciertamente eventualmente reemplazará su verificación del lado del cliente. El problema con la verificación de JavaScript es que es fácil para los usuarios omitirlo, se puede evitar fácilmente simplemente deshabilitando JavaScript. Ahora que HTML5 está preocupado, no tiene que preocuparse por esto. Los errores son todas las indicaciones nativas de HTML5 y JavaScript no se usa.
IE FF Safari Chrome Opera iPhone Android
- 4+ 5+ 10+ 9+ - -
9. Campos requeridos
La validación de formulario de HTML5 no se limita al tipo de campo de verificación, también permite llamar una nueva etiqueta adicional, requerida. Esta nueva propiedad permite a los desarrolladores verificar que el cuadro de entrada se complete sin usar JavaScript.
Resumen: Las actualizaciones anteriores son cruciales para acortar los ciclos de desarrollo y mejorar la experiencia del usuario. Una vez que todos los navegadores acepten HTML5, la próxima generación de sitios web superará las expectativas de cualquier persona. HTML5 no es una molestia, ayudará enormemente a los desarrolladores y mejorará la experiencia del usuario.