Programmation web BC2
Chapitre 4
Formulaire HTML & JavaScript
1. Formulaire HTML
exemples/ChapitreformulaireHTML&JavaScript/formulaire1.html
<html>
<head>
<link rel="stylesheet" href="./myStyle.css"/>
<title>Formulaire</title>
</head>
<body>
<h1>Formulaire HTML5 & JavaScript </h1>
<form name="form1" action="enregistrer.html">
<p><b> Nom:<input type="text" name="nom" size="20"> </b></p>
<p><b> Prénom:<input type="text" name="prenom" size="20"> </b></p>
<p><b> Age:<input type="text" name="age" size="20"></b></p>
<p><b>Mode de passe:<input type="password" name="motdepasse" size="20"></b></p>
<p><b>Confirmer mot de passe: <input type="password" name="confmotdepasse" size="20"></b></p>
<p><b>Adresse Email: </b><input type="text" name="adressmail" size="20"></p>
<p><b>Votre Licence:
<select size="1" name="bc">
<option selected value="0">choisir une licence</option>
<option value="1">BC1</option>
<option value="2">BC2</option>
ISAEG 2021/2022 1 Ali ZIDANII
Programmation web BC2
<option value="3" >BC3</option>
</select></b></p>
<p><b>Votre 2ème langue:</p>
<p> <input type="radio" name="langue" value="Francais"> </b>Français</p>
<p><input type="radio" name="langue" value="Anglais">Anglais</p>
<p><input type="radio" name="langue" value="Allemand">Allemand</p>
<p><b>Vos options:</p>
<p><input type="checkbox" name="option1" value="reseaux"> </b>Réseaux</p>
<p><input type="checkbox" name="option2" value="java"> Java</p>
<p><input type="checkbox" name="option3" value="web"> Web</p>
<p><input type="submit" value="Enregistrer" name="B1" style="font-weight: bold">
<input type="reset" value="Annuler" name="B2" style="font-weight: bold">
</p>
</form>
</BODY>
</HTML>
2. Fonction Vérification de formulaire en JavaScript
exemples/ChapitreformulaireHTML&JavaScript/formulaire2.html
<html>
<head>
<link rel="stylesheet" href="./myStyle.css"/>
<title>Formulaire</title>
<script language="javascript">
function verifier()
{
nom=document.form1.nom.value;
ISAEG 2021/2022 2 Ali ZIDANII
Programmation web BC2
prenom=document.form1.prenom.value;
age=document.form1.age.value;
mdp=document.form1.motdepasse.value;
cmdp=document.form1.confmotdepasse.value;
mail=document.form1.adressmail.value;
indice=document.form1.bc.options.selectedIndex;
if(nom=='')
{alert("le champ nom est vide"); return false;}
if(prenom=='')
{alert("le champ prenom est vide"); return false;}
if(age=='')
{alert("le champ age est vide"); return false;}
if(isNaN(age) || Number(age) <17 || Number(age)>55)
{ alert('Lage est doit erte un nombre entre 17 et 55');return false;}
if(mdp=='')
{alert("le champ mot de passe est vide"); return false;}
if(cmdp=='')
{alert("le champ confirmer mot de passe est vide"); return false;}
if(mdp!=cmdp)
{ alert('les deux champs password et confirme password ne sont pas identique '); return false;}
if(mail=='')
{alert("le champ mail est vide"); return false;}
if(mail.indexOf('.')==-1 || mail.indexOf('@')==-1)
{ alert('addresse email invalide'); return false;}
if(indice ==-1)
{alert('veuillez sélectionner une section SVP'); return false;}
test=false;
if(form1.langue[0].checked) test=true;
if(form1.langue[1].checked) test=true;
if(form1.langue[2].checked) test=true;
if(test==false)
{alert('veuillez choisir une seule 2ème langue'); return false;}
if(form1.option1.checked == false && form1.option2.checked == false && form1.option3.checked == false)
{alert('veuillez cocher au moins une option'); return false;}
}
</script>
</head>
<body>
<h1>Formulaire HTML5 & JavaScript </h1>
<form name="form1" action="enregistrer.html" onsubmit="return verifier()">
<center>
<table width="50%">
<tr><td width="50%"><p><b>Nom :: </b></p></td><td> <input type="text" name="nom" size="40"
placeholder="Saisir votre Nom"/></td></tr>
<tr><td><p><b>Prénom :: </b></p></td><td> <input type="text" name="prenom" /></td> </tr>
<tr><td><p><b>Age :: </b></p></td><td> <input type= int name="age" /></td> </tr>
<tr><td><p><b>Mode de passe :: </b></p></td><td> <input type="password" name="motdepasse"
size="20"></td> </tr>
<tr><td><p><b>Confirmer mot de passe :: </b></p></td><td> <input type="password"
name="confmotdepasse" size="20"></td> </tr>
ISAEG 2021/2022 3 Ali ZIDANII
Programmation web BC2
<tr><td><p><b>Adresse Email :: </b></p></td><td> <input type="text" name="adressmail" size="20"></td>
</tr>
<tr><td><p><b>Votre Licence :: </b></p></td><td> <select size="1" name="bc">
<option selected value="0">choisir une licence</option>
<option value="1"><b>BC1</b></option>
<option value="2"><b>BC2</b></option>
<option value="3" ><b>BC3</b></option>
</select></td>
</tr>
<tr><td><p><b> Votre 2ème langue :: </b></p></td>
<td><input type="radio" name="langue" value="Francais"> <b>Français</b>
<br><input type="radio" name="langue" value="Anglais"><b>Anglais</b>
<br><input type="radio" name="langue" value="Allemand"><b>Allemand </b></td>
</tr>
<tr><td><p><b> Vos options :: </b></p></td>
<td> <input type="checkbox" name="option1" value="reseaux"> <b>Réseaux</b>
<br><input type="checkbox" name="option2" value="java"> <b>Java</b>
<br><input type="checkbox" name="option3" value="web"> <b>Web</b></td>
</tr>
<tr>
<td><input type="submit" value="Enregistrer" name="B1" style="font-weight: bold; color : blue;"> </td>
<td><input type="reset" value="Annuler" name="B2" style="font-weight: bold ; color : blue;"></td>
</tr>
</table>
</form>
</BODY>
</HTML>
ISAEG 2021/2022 4 Ali ZIDANII
