La proprietà document.forms di javascript
La proprietà document.forms di Javascript fornisce un modo per accedere a tutti i form presenti in un documento HTML.
document.forms.
Si tratta di una proprietà dell'oggetto document e del Document Object Model (DOM) che di interagire con i form presenti in una pagina web.
In pratica è un'interfaccia, una sorta di array chiamata HTMLCollection, che elenca tutte le informazioni sui form contenuti nella pagina.
A cosa serve? Mi permette di iterare su questa collezione, accedere a ciascun form tramite il suo indice o il suo nome, e manipolare i form e i loro elementi (come input, textarea, ecc.) utilizzando le proprietà e i metodi forniti da javascript, rendendo le pagine web interattive e reattive.
Ad esempio,supponiamo che la pagina HTML abbia un form di login, con un id "loginForm".
<html>
<body>
<form id="loginForm" name="login">
Username: <input type="text" name="username" />
Password: <input type="password" name="password" />
<input type="submit" />
</form>
<script>
// Accesso tramite il nome del form
var form = document.forms['login'];
// elaborazione dell'oggetto form
</script>
</body>
Lo script accede al contenuto della form "login" tramite la proprietà forms['login'] e lo assegna alla variabile "form" sotto forma di un oggetto HTMLFormElement.
Una volta ottenute le informazioni sulla form, posso elaborarle ed eventualmente impostare dei valori nei campi della form.
In alternativa, per accedere al contenuto della form avrei potuto usare questa sintassi più pulita
var form = document.forms.login;
oppure accedere all'oggetto tramite il suo id.
var form = document.getElementById('loginForm');
Esempio
Supponiamo di voler verificare che l'utente abbia effettivamente riempito entrambi i campi, username e password, prima di permettere l'invio del form.
Potrei fare qualcosa del genere:
<script>
document.forms['login'].onsubmit = function() {
var username = document.forms['login']['username'].value;
var password = document.forms['login']['password'].value;
if (!username || !password) {
alert('Per favore, inserisci sia username che password.');
return false; // Impedisce l'invio del form
}
// Altrimenti, permetti l'invio del form
return true;
};
</script>
In questo semplice esempio, sto assegnando una funzione all'evento "onsubmit" del form.
Per sapere quante form ci sono nel documento, invece, posso usare l'attributo length.
<script>
let num = document.forms.length;
document.getElementById("demo").innerHTML = num;
</script>
Questa funzione controlla se i campi username e password sono vuoti. Se uno dei due è vuoto, viene mostrato un messaggio di errore e l'invio del form viene bloccato.
E così via.
