¿Qué nuevas características de formulario HTML5 desea probar?

1 Nuevos tipos de entrada

Uno de los cambios más notables en los formularios HTML5 es la adición de nuevos tipos de entrada que pueden manejar diferentes tipos de datos, como correo electrónico, fecha, color, rango y número. Estos tipos de entrada pueden proporcionar validación, formato y elementos de interfaz de usuario que son nativos del explorador y del dispositivo. Por ejemplo, si utiliza <input type="date"> , el navegador mostrará un selector de calendario que se adapta a la configuración regional y las preferencias del usuario. También puede usar atributos como mínimo, máximo, paso y marcador de posición para controlar el rango de entrada y la apariencia.

2 Nuevos atributos de entrada

Otra forma de mejorar los formularios HTML5 es utilizar algunos de los nuevos atributos de entrada que pueden modificar el comportamiento y la funcionalidad de las entradas. Por ejemplo, puede utilizar el atributo requerido para indicar que una entrada es obligatoria y evitar que el formulario se envíe si está vacío. También puede utilizar el atributo pattern para especificar una expresión regular que el valor de entrada debe coincidir, como un número de teléfono o una contraseña. Otros atributos útiles incluyen autocompletar, enfoque automático, múltiple y deshabilitado.

3 Nuevos elementos de formulario

5 Eventos de nuevo formulario

Finalmente, también puede aprovechar algunos de los nuevos eventos de formulario que ofrece HTML5. Estos son eventos desencadenados por acciones del usuario o cambios en los elementos del formulario, como input, change, submit, reset y invalid. Puede usar estos eventos para agregar interactividad y funcionalidad a los formularios, como realizar cálculos, actualizar otros elementos, validar entradas o evitar acciones predeterminadas. También puede utilizar el objeto de evento para acceder y modificar las propiedades y métodos del elemento de destino.

6 Nuevos ejemplos de formularios

Ahora que ha aprendido algunas de las nuevas características de formulario HTML5, ¿por qué no probarlas en sus propios proyectos? Hemos creado algunos ejemplos simples para demostrar cómo usar estas características. Vea el código fuente y el resultado de estos ejemplos haciendo clic en los enlaces a continuación. Puedes modificarlos y experimentar con ellos como quieras. Por ejemplo, el ejemplo 1 es un formulario de contacto simple con nuevos tipos de entrada y atributos; El ejemplo 2 es un formulario de selección de color con una lista de datos y un elemento de salida; y el ejemplo 3 es un formulario de calculadora de IMC con una entrada de rango y un objeto FormData.

7 Esto es lo que más debe considerar

Este es un espacio para compartir ejemplos, historias o ideas que no encajan en ninguna de las secciones anteriores. ¿Qué más le gustaría añadir?