Les navigateurs ajoutent constamment de nouvelles fonctionnalités HTML, JavaScript et CSS. Voici quelques ajouts utiles à l’utilisation des formulaires que vous avez peut-être manqués…
requestSubmit()
Safari 16 sera le dernier navigateur à ajouter la prise en charge de requestSubmit.
Avant de voir comment .requestSubmit() fonctionne, rappelons-nous comment fonctionne la soumission par programmation d'un formulaire avec JavaScript lors de l'utilisation de .submit() méthode. Soumettre un formulaire avec submit() ne déclenche pas d'événement de soumission. Donc dans le code suivant, le formulaire est soumis, preventDefault() n'a aucun effet et rien n'est enregistré sur la console :
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() ignorera également toute validation de formulaire HTML. Étant donné le balisage suivant, le formulaire sera soumis lorsque l'entrée est vide même si l'entrée a un required attribut:
<form>
<label for="name">Name</label>
<input required name="name" id="name" type="text">
</form>.requestSubmit() est une autre façon de soumettre un formulaire en utilisant JavaScript, mais contrairement à .submit(), la validation du formulaire HTML empêchera la soumission du formulaire. Si toutes les données saisies dans le formulaire réussissent la validation, le submit l'événement sera déclenché, ce qui signifie « formulaire soumis ! » serait connecté à la console dans l'exemple suivant :
form.addEventListener('submit', function(event) {
event.preventDefault();
console.log('form submitted!');
});
document.querySelector('.btn').addEventListener('click', function() {
form.requestSubmit();
})Vous pouvez déjà y parvenir en cliquant par programme sur le bouton Soumettre du formulaire, mais requestSubmit est peut-être une solution plus élégante.
submitter propriété de l'événement de soumission
Les SubmitEvent.submitter propriété acquise prise en charge complète de tous les navigateurs avec la sortie de Safari 15.4. Cette propriété en lecture seule spécifie le <button> or <input type="submit"> élément qui a provoqué la soumission d’un formulaire.
<form>
<button name="foo" value="bar" type="submit">Bar</button>
<button name="foo" value="baz" type="submit">Baz</button>
</form>Lorsque vous disposez de plusieurs boutons ou entrées de soumission, chacun avec une valeur différente, seule la valeur du bouton ou de l'entrée sur laquelle vous avez cliqué pour soumettre le formulaire sera envoyée au serveur, plutôt que les deux valeurs. Ce n’est pas nouveau. Ce qui est nouveau, c'est que l'écouteur d'événement pour l'événement submit a désormais accès au event.submitter propriété. Vous pouvez l'utiliser pour ajouter une classe au bouton ou à l'entrée qui a déclenché la soumission du formulaire, par exemple, ou pour obtenir son value ou tout autre de ses attributs 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 événement
Ce n’est pas particulièrement nouveau, mais seulement support multi-navigateurs obtenu avec la sortie de Safari 15. Le principal cas d'utilisation du formdata L'événement permet aux éléments personnalisés de participer aux soumissions de formulaires. En dehors des composants Web, cela peut toujours être utile.
Vous ajoutez un formdata écouteur d'événements du formulaire avec lequel vous souhaitez interagir :
document.querySelector('form').addEventListener('formdata', handleFormdata);L'événement est déclenché à la fois par la soumission d'un formulaire HTML standard et également par une occurrence de new FormData(). event.formData contient toutes les données soumises.
function handleFormdata(event) {
for (const entry of event.formData.values()) {
console.log(entry);
}
}La fonction de rappel pour le formdata L'écouteur d'événements s'exécute avant que les données ne soient envoyées au serveur, vous donnant la possibilité d'ajouter ou de modifier les données envoyées.
function handleFormdata(event) {
event.formData.append('name', 'John');
}Vous auriez pu modifier ou ajouter le FormData à l'intérieur du gestionnaire d'événements de soumission mais formdata vous permet de séparer la logique. C'est également une alternative à l'utilisation d'entrées masquées dans le balisage de votre formulaire dans les cas où vous soumettez le formulaire « à l'ancienne » — c'est-à-dire en vous appuyant sur la fonctionnalité intégrée de HTML pour soumettre le formulaire plutôt que de le faire avec fetch.
showPicker() pour les éléments d'entrée
showPicker() a été soutenu depuis Chrome 99, Firefox 101 et dans le prochain Safari 16. Pour un élément d'entrée dont l'attribut type est soit Date, Mois, Semaine, Heure, datetime-local, couleur ou fichier, showPicker() fournit un moyen programmatique d’afficher l’interface utilisateur de sélection. Pour les entrées de couleur et de fichier, il a toujours été possible d'afficher le sélecteur par programme en appelant .click sur l'entrée :
document.querySelector('input[type="color"]').click();Cette approche ne fonctionne pas sur les entrées de date, c'est pourquoi cette nouvelle API a été ajoutée. .showPicker() fonctionnera également avec les entrées de couleur et de fichier, mais il n'y a aucun avantage réel à l'utiliser plutôt que .click().
Attribut inerte
Il a toujours été possible de désactiver plusieurs entrées à la fois en les encapsulant dans un fichier HTML. fieldset et en désactivant le fieldset:
Inerte est un nouvel attribut HTML. Il ne s’agit pas uniquement des formulaires, mais ceux-ci constituent certainement un cas d’utilisation clé. Contrairement au disabled attribut, inert peut être appliqué à un form élément lui-même. Tout ce qui se trouve dans le formulaire ne sera ni focalisable ni cliquable. Lorsqu'il s'agit de technologies d'assistance, inert est similaire au réglage aria-hidden="true". Contrairement à la disabled attribut, inert n'applique aucun style par défaut, mais il est facile d'ajouter le vôtre :
form[inert] {
opacity: .2;
}Il y a plus à venir…
Le plus important, c'est le style <select> éléments, quelque chose que les développeurs souhaitent depuis des décennies. Il semble que cela deviendra bientôt une réalité avec l’introduction de selectmenu.
Mais c'est tout pour l'instant ! Les mises à jour récentes apportent une prise en charge complète du navigateur pour former les fonctionnalités que nous attendions, ce qui les rend idéales pour une utilisation en production.
