¿Qué hay de nuevo con los formularios en 2022? | consejos CSS

Los navegadores agregan constantemente nuevas funciones de HTML, JavaScript y CSS. Aquí hay algunas adiciones útiles para trabajar con formularios que puede haber pasado por alto...

requestSubmit()

Safari 16 será el último navegador compatible requestSubmit.

antes de ver como .requestSubmit() funciona, recordemos cómo funciona el envío programático de un formulario con JavaScript cuando se usa .submit() método. Enviar un formulario con submit() no desencadena un evento de envío. Así que en el siguiente código se envía el formulario, preventDefault() no tiene efecto y no se registra nada en la consola:

const form = document.forms[0];
form.addEventListener('submit', function(event) {
  // code to submit the form goes here
  event.preventDefault();
  console.log('form submitted!');
});

document.querySelector('.btn').addEventListener('click', function() {
  form.submit();
})

.submit() también ignorará cualquier validación de formulario HTML. Dado el siguiente marcado, el formulario se enviará cuando la entrada esté vacía, incluso si la entrada tiene un required atributo:

<form>   
  <label for="name">Name</label>
  <input required name="name" id="name" type="text">
</form>

.requestSubmit() es otra forma de enviar un formulario usando JavaScript, pero a diferencia de .submit(), la validación del formulario HTML evitará que se envíe el formulario. Si todos los datos ingresados ​​en el formulario pasan la validación, el submit el evento se disparará, lo que significa "¡formulario enviado!" estaría conectado a la consola en el siguiente ejemplo:

form.addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('form submitted!');
});

document.querySelector('.btn').addEventListener('click', function() {
  form.requestSubmit();
})

Ya puede lograr esto haciendo clic programáticamente en el botón Enviar en el formulario, pero requestSubmit es quizás una solución más elegante.

submitter enviar propiedad de evento

los SubmitEvent.submitter La propiedad obtuvo soporte completo para todos los navegadores con el lanzamiento de Safari 15.4. Esta propiedad de sólo lectura especifica el <button> Dónde <input type="submit"> elemento que provocó el envío de un formulario.

<form>
  <button name="foo" value="bar" type="submit">Bar</button>
  <button name="foo" value="baz" type="submit">Baz</button>
</form>

Cuando tiene varios botones o entradas de envío, cada uno con un valor diferente, solo se enviará al servidor el valor del botón o entrada en el que hizo clic para enviar el formulario, en lugar de ambos valores. no es nuevo La novedad es que el detector de eventos para el evento de envío ahora tiene acceso a la event.submitter propiedad. Puede usarlo para agregar una clase al botón o entrada que activó el envío del formulario, por ejemplo, o para obtener su value o cualquier otro de sus atributos HTML.

document.forms[0].addEventListener('submit', function(event) {
  event.preventDefault();
  console.log(event.submitter.value);
  console.log(event.submitter.formaction);
  event.submitter.classList.add('spinner-animation');
})

formdata un evento

No es particularmente nuevo, pero solo ganó soporte para navegadores cruzados con el lanzamiento de Safari 15. El principal caso de uso del formdata El evento permite que los elementos personalizados participen en los envíos de formularios. Sin embargo, fuera de los componentes web, aún puede ser útil.

agregas un formdata detector de eventos del formulario con el que desea interactuar:

document.querySelector('form').addEventListener('formdata', handleFormdata);

El evento se desencadena tanto por el envío de un formulario HTML estándar como por la ocurrencia de new FormData(). event.formData contiene todos los datos enviados.

function handleFormdata(event) {
  for (const entry of event.formData.values()) {
    console.log(entry);
  }
}

La función de devolución de llamada para el formdata El detector de eventos se ejecuta antes de que los datos se envíen al servidor, lo que le brinda la posibilidad de agregar o modificar los datos enviados.

function handleFormdata(event) {
  event.formData.append('name', 'John');
}

Podrías haber cambiado o agregado el FormData dentro del controlador de eventos de envío pero formdata le permite separar la lógica. También es una alternativa al uso de entradas ocultas en el marcado de su formulario en los casos en que está enviando el formulario "a la antigua", es decir, confiando en la funcionalidad integrada de HTML para enviar el formulario en lugar de hacerlo con fetch.

showPicker() para elementos de entrada

showPicker() es compatible desde Chrome 99, Firefox 101 y en el próximo Safari 16. Para un elemento de entrada cuyo atributo de tipo es Fecha, Mes, Semana, Hora, datetime-localcolor o archivo, showPicker() proporciona una forma programática de mostrar la IU de selección. Para entradas de color y archivo, siempre ha sido posible mostrar el selector programáticamente llamando .click en entrada :

document.querySelector('input[type="color"]').click();

Este enfoque no funciona en las entradas de fecha, razón por la cual se agregó esta nueva API. .showPicker() también funcionará con entradas de color y archivo, pero no hay ningún beneficio real al usarlo en .click().

Selector de fechas abierto hasta agosto de 2022.

Atributo inerte

Siempre ha sido posible deshabilitar varias entradas a la vez envolviéndolas en un HTML fieldset y desactivar el fieldset:

Inerte es un nuevo atributo HTML. No es solo para formularios, pero los formularios son definitivamente un caso de uso clave. A diferencia del disabled atributo, inert puede aplicar a un form elemento en sí. Todo en el formulario será desenfocable y no se podrá hacer clic. Con respecto a las tecnologías de asistencia, inert es similar a establecer aria-hidden="true". A diferencia del disabled atributo, inert no aplica ningún estilo predeterminado, pero es fácil agregar el tuyo propio:

form[inert] {
  opacity: .2;
}

Hay mas por venir…

El grande es el estilo. <select> elementos que los desarrolladores han querido durante décadas. Parece que finalmente se hará realidad muy pronto con la introducción de selectmenu.

¡Pero eso es todo por ahora! Las actualizaciones recientes brindan soporte completo del navegador para las funciones de formulario que hemos estado esperando, lo que las hace ideales para el uso en producción.

Si quieres conocer otros artículos parecidos a ¿Qué hay de nuevo con los formularios en 2022? | consejos CSS puedes visitar la categoría Estilo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas