Modulo form pagina Html con controllo dei campi in Javascript (per la classe III E SIA)
Esercizi su HTML e JavaScript
Esercizio 1 (a) Scrivere un documento HTML contenente una form contenente i seguenti campi:
• cognome (casella di testo editabile lunga 40 caratteri)
• nome (casella di testo editabile lunga 30 caratteri)
• matricola (casella di testo editabile lunga 12 caratteri)
• regione di residenza (da scegliere da un menu che riporta le 20 regioni italiane) • email (casella di testo editabile lunga 30 caratteri)
• telefono (casella di testo editabile lunga 15 caratteri)
• richieste particolari (area di testo editabile di 12 righe per 60 colonne) • bottone di invio
• bottone di reset
(b) Aggiungere al documento HTML una funzione JavaScript che esegue i seguenti controlli:
• verifica che il cognome non sia vuoto;
• verifica che il nome non sia vuoto;
• verifica che la matricola sia un numero;
• verifica che sia stata selezionata una regione;
• verifica che o l’email o il telefono siano non vuoti.
Inoltre, fare in modo che, nel documento HTML, tale funzione JavaScript venga eseguita quando l’utente invia la form.
(a) Documento HTML contenente la form richiesta:
<html>
<head>
</head>
<body>
<form action="" method="post" name="registr">
cognome:
<input type="text" name="cognome" size="40" maxlength="40">
<br>
nome:
<input type="text" name="nome" size="30" maxlength="30">
<br>
matricola:
<input type="text" name="matricola" size="12" maxlength="12">
<br>
regione:
<select name="regione">
<option value="nessuna" selected></option>
<option value="valdaosta">Val d’Aosta</option>
<option value="piemonte">Piemonte</option>
<option value="liguria">Liguria</option>
<option value="lombardia">Lombardia</option>
<option value="veneto">Veneto</option>
<option value="trentino">Trentino Alto Adige</option>
<option value="friuli">Friuli Venezia-Giulia</option>
<option value="emilia">Emilia-Romagna</option>
<option value="toscana">Toscana</option>
<option value="marche">Marche</option>
<option value="umbria">Umbria</option>
<option value="lazio">Lazio</option>
<option value="abruzzo">Abruzzo</option>
<option value="molise">Molise</option>
<option value="campania">Campania</option>
<option value="basilicata">Basilicata</option>
<option value="puglia">Puglia</option>
<option value="calabria">Calabria</option>
<option value="sicilia">Sicilia</option>
<option value="sardegna">Sardegna</option>
</select>
<br>
email:
<input type="text" name="email" size="30" maxlength="30">
<br>
telefono:
<input type="text" name="tel" size="15" maxlength="15">
<br>
richieste particolari:
<br>
<textarea name="richieste" cols="60" rows="12"></textarea>
<br>
<input type="submit" value="Invia">
<input type="reset" value="Reset">
</form>
</body>
</html>
(b) Documento HTML contenente, oltre alla form, la funzione Javascript richiesta:
<html>
<head>
<script type="text/javascript" language="javascript">
function validaForm() {
if (document.registr.cognome.value=="") {
alert("Inserire cognome");
return false;
}
if (document.registr.nome.value=="") {
alert("Inserire nome");
return false;
}
if (document.registr.matricola.value=="") {
alert("Inserire matricola");
return false;
}
var v=parseInt(document.registr.matricola.value);
if (isNaN(v)) {
alert("La matricola deve essere un numero");
return false;
}
if (document.registr.regione.value=="nessuna") {
alert("Selezionare una regione");
return false;
}
if ((document.registr.email.value=="")&&(document.registr.tel.value=="")) {
alert("Inserire o l’email o il numero di telefono");
return false;
}
alert("Dati inseriti correttamente");
return true;
}
</script>
</head>
<body>
<form action="" method="post" name="registr" onSubmit="return validaForm();">
cognome:
<input type="text" name="cognome" size="40" maxlength="40">
<br>
nome:
<input type="text" name="nome" size="30" maxlength="30">
<br>
matricola:
<input type="text" name="matricola" size="12" maxlength="12">
<br>
regione:
<select name="regione">
<option value="nessuna" selected></option>
<option value="valdaosta">Val d’Aosta</option>
<option value="piemonte">Piemonte</option>
<option value="liguria">Liguria</option>
<option value="lombardia">Lombardia</option>
<option value="veneto">Veneto</option>
<option value="trentino">Trentino Alto Adige</option>
<option value="friuli">Friuli Venezia-Giulia</option>
<option value="emilia">Emilia-Romagna</option>
<option value="toscana">Toscana</option>
<option value="marche">Marche</option>
<option value="umbria">Umbria</option>
<option value="lazio">Lazio</option>
<option value="abruzzo">Abruzzo</option>
<option value="molise">Molise</option>
<option value="campania">Campania</option>
<option value="basilicata">Basilicata</option>
<option value="puglia">Puglia</option>
<option value="calabria">Calabria</option>
<option value="sicilia">Sicilia</option>
<option value="sardegna">Sardegna</option>
</select>
<br>
email:
<input type="text" name="email" size="30" maxlength="30">
<br>
telefono:
<input type="text" name="tel" size="15" maxlength="15">
<br>
richieste particolari:
<br>
<textarea name="richieste" cols="60" rows="12"></textarea>
<br>
<input type="submit" value="Invia">
<input type="reset" value="Reset">
</form>
</body>
</html>
Esercizio 2 (a) Scrivere un documento HTML contenente una form contenente i seguenti
campi:
• cognome e nome (casella di testo editabile lunga 50 caratteri)
• sesso (selezionabile tramite due bottoni radio)
• ateneo (da scegliere da un menu che riporta le 3 universit romane)
• CAP (casella di testo editabile lunga 5 caratteri)
• studente lavoratore (selezionabile tramite checkbox)
• descrizione del lavoro svolto (casella di testo editabile lunga 80 caratteri) • bottone di invio
• bottone di reset
(b) Aggiungere al documento HTML una funzione JavaScript che esegue i seguenti controlli: • mentre l’utente edita i campi della form:
• CAP (casella di testo editabile lunga 5 caratteri)
• studente lavoratore (selezionabile tramite checkbox)
• descrizione del lavoro svolto (casella di testo editabile lunga 80 caratteri) • bottone di invio
• bottone di reset
(b) Aggiungere al documento HTML una funzione JavaScript che esegue i seguenti controlli: • mentre l’utente edita i campi della form:
-
– subito dopo che l’utente ha editato il campo CAP, deve verificare che tale campo
sia un numero di 5 cifre;
-
– subito dopo che l’utente ha editato il campo nome e cognome, deve verificare che
tale campo non sia un numero;
• al momento dell’invio del messaggio:
-
– verifica che il cognome e nome non sia vuoto;
-
– verifica che il sesso sia stato selezionato;
-
– verifica che sia stato selezionato un ateneo;
-
– se l’utente ha dichiarato di essere uno studente lavoratore, la descrizione del lavoro svolto non può essere vuota.
Soluzione
(a) Documento HTML contenente la form richiesta:
<html> <head> </head> <body> <form action="" method="post" name="eseform"> cognome e nome:<input type="text" name="nome" size="50" maxlength="50"> <br> sesso: <input type="radio" name="sesso" value="M">M<input type="radio" name="sesso" value="F">F <br> ateneo: <select name="ateneo"><option value="nessuno" selected></option> <option value="sapienza">La Sapienza</option> <option value="torvergata">Tor Vergata</option> <option value="romatre">Roma Tre</option> </select>
<br>
CAP:
<input type="text" name="cap" size="5" maxlength="5">
<br>
sono uno studente lavoratore
<input type="checkbox" name="lavoratore">
<br>
descrizione lavoro:
<input type="text" name="descr" size="80" maxlength="80">
<br>
<br>
<input type="submit" value="Invia">
<input type="reset" value="Reset">
</form>
</body>
</html>
(b) Documento HTML contenente, oltre alla form, le funzioni Javascript richieste (e le loro
invocazioni all’interno del documento):
<html>
<head>
<script type="text/javascript" language="javascript">
var valoreSesso=null;
function controllaCAP() {
if (document.eseform.cap.value.length!=5) {
alert("Il CAP deve contenere 5 cifre");
return false;
}
var v=parseInt(document.eseform.cap.value);
if (isNaN(v)) {
alert("Il CAP deve essere un numero");
return false;
}
return true;
}
function controllaNome() {
var v=parseInt(document.eseform.nome.value);
if (!isNaN(v)) {
alert("Il cognome e nome non può essere un numero");
return false;
}
return true;
}
function validaInvio() {
if (document.eseform.nome.value=="") {
alert("Inserire cognome e nome");
6
return false;
}
if (valoreSesso==null) {
alert("Selezionare il sesso");
return false;
}
if (document.eseform.ateneo.value=="nessuno") {
alert("Selezionare un ateneo");
return false;
}
if ((document.eseform.lavoratore.checked)&&(document.eseform.descr.value=="")) {
alert("Hai dichiarato di essere uno studente lavoratore: devi
compilare il campo descrizione lavoro");
return false;
}
alert("Dati inseriti correttamente");
return true;
}
</script>
</head>
<body>
<form action="" method="post" name="eseform" onSubmit="return validaInvio();">
cognome e nome:
<input type="text" name="nome" size="50" maxlength="50"
onChange="return controllaNome();">
<br>
sesso:
<input type="radio" name="sesso" value="M" onClick="valoreSesso=this.value;">M
<input type="radio" name="sesso" value="F" onClick="valoreSesso=this.value;">F
<br>
ateneo:
<select name="ateneo">
<option value="nessuno" selected></option>
<option value="sapienza">La Sapienza</option>
<option value="torvergata">Tor Vergata</option>
<option value="romatre">Roma Tre</option>
</select>
<br>
CAP:
<input type="text" name="cap" size="5" maxlength="5" onChange="return controllaCAP();">
<br>
sono uno studente lavoratore
<input type="checkbox" name="lavoratore">
<br>
descrizione lavoro:
<input type="text" name="descr" size="80" maxlength="80">
<br>
<br> <input type="submit" value="Invia"> <input type="reset" value="Reset"> </form> </body> </html>
Commenti
Posta un commento