Scribd
Importer
170 vues4 pages

Chapitre 4 Formulaire HTML & JavaScript

MANIPULER DES APGES WEBB CONTENANT DES FORMULAIRES CONTROLES AVEC JAVASCRIPT

Transféré par

zidani
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
170 vues4 pages

Chapitre 4 Formulaire HTML & JavaScript

MANIPULER DES APGES WEBB CONTENANT DES FORMULAIRES CONTROLES AVEC JAVASCRIPT

Transféré par

zidani
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 4

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>&nbsp;&nbsp;Nom:<input type="text" name="nom" size="20"> </b></p>
<p><b>&nbsp;Prénom:<input type="text" name="prenom" size="20"> </b></p>
<p><b>&nbsp;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:&nbsp; </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

Vous aimerez peut-être aussi