Los navegadores agregan constantemente nuevas funciones de HTML, JavaScript y CSS. Aquí hay algunas adiciones útiles para trabajar con formularios que podría haber pasado por alto...
requestSubmit()
Safari 16 será el último navegador en agregar soporte para requestSubmit.
Antes de ver cómo .requestSubmit() funciona, recordemos cómo funciona el envío programático de un formulario con JavaScript cuando se usa el .submit() método. Enviar un formulario con submit() no desencadena un evento de envío. Entonces, en el siguiente código, se envía el formulario, preventDefault() no tiene ningún 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 aunque la entrada tenga un required atributo:
.requestSubmit() es una forma alternativa de enviar un formulario usando JavaScript, pero en contraste con .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 se activará el evento, lo que significa "¡formulario enviado!" se registraría en 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 podría lograr esto haciendo clic programáticamente en el botón de envío del formulario, pero requestSubmit es quizás una solución más elegante.
submitter propiedad del evento de envío
La SubmitEvent.submitter propiedad ganada soporte completo para navegadores cruzados con el lanzamiento de Safari 15.4. Esta propiedad de sólo lectura especifica el or elemento que provocó el envío de un formulario.
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 se hizo clic para enviar el formulario, en lugar de ambos valores. Eso no es nada nuevo. Lo que es nuevo es que el detector de eventos para el evento de envío ahora tiene acceso a la event.submitter propiedad. Puede usar esto 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 evento
Esto no es particularmente nuevo, pero sólo Compatibilidad entre navegadores logrados con el lanzamiento de Safari 15. El caso de uso principal para el formdata event permite que los elementos personalizados participen en los envíos de formularios. Sin embargo, fuera de los componentes web, aún puede ser útil.
Añades un formdata detector de eventos al formulario con el que desea interactuar:
document.querySelector('form').addEventListener('formdata', handleFormdata);El evento se desencadena tanto por un envío de formulario HTML regular como por una ocurrencia de new FormData(). event.formData contiene todos los datos que se envían.
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 oportunidad de agregar o modificar los datos que se envían.
function handleFormdata(event) {
event.formData.append('name', 'John');
}Podrías haber modificado o anexado 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 envía el formulario "a la antigua", es decir, confía en la funcionalidad integrada de HTML para enviar el formulario en lugar de hacerlo con fetch.
showPicker() para elementos de entrada
showPicker() ha sido apoyadas desde Chrome 99, Firefox 101 y en el próximo Safari 16. Para un elemento de entrada cuyo atributo de tipo sea Fecha, Mes, Semana, Hora, datetime-local, color o archivo, showPicker() proporciona una forma programática de mostrar la IU de selección. Para las entradas de color y archivo, siempre ha sido posible mostrar el selector mediante programación llamando .click en la entrada:
document.querySelector('input[type="color"]').click();Ese 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 una ventaja real en usarlo sobre .click().
Atributo inerte
Siempre ha sido posible deshabilitar múltiples entradas a la vez envolviéndolas en un HTML fieldset y deshabilitar el fieldset:
Inerte es un nuevo atributo HTML. No es solo para formularios, pero los formularios son ciertamente un caso de uso clave. A diferencia del disabled atributo, inert se puede aplicar a un form elemento en sí. Todo lo que esté dentro del formulario será no enfocable y no se podrá hacer clic en él. Cuando se trata de tecnologías de asistencia, inert es similar a establecer aria-hidden="true"A diferencia del disabled atributo, inert no aplica ningún estilo de forma predeterminada, pero es fácil agregar el tuyo propio:
form[inert] {
opacity: .2;
}Hay más por venir...
El grande es el estilismo elementos, algo que los desarrolladores han querido durante décadas. Parece que finalmente se hará realidad pronto con la introducción de selectmenu.
¡Pero eso es todo por ahora! Las actualizaciones recientes brindan soporte completo del navegador para formar las funciones que hemos estado esperando, lo que las convierte en las mejores para el uso en producción.
