window.document.nom_formulaire.nom_element.value

Langages de l’Internet
http://sebastien.mavromatis.free.fr
Créer un formulaire
• Interagir avec l'utilisateur au-delà des simples liens de
navigation.
• Une fois le formulaire envoyé par le navigateur, il est
analysé par le serveur.
• Utilisations courantes :
•
•
•
•
Récupérer des informations sur l'utilisateur (nom, prénom, ...)
Procéder à des authentifications
Permettre à l'utilisateur de contribuer à un site (via des forums ...)
Opérer des recherches ou sélections sur le site
Créer un formulaire
• Plusieurs formulaires peuvent exister sur une
page.
• Il est interdit de les imbriquer.
• La balise de formulaire n'est qu'un délimiteur, elle
est destinée à recevoir des éléments de niveau
bloc et non du contenu dit "en-ligne".
•
Les éléments du formulaire sont regroupés à l’aide de <p>,
<li>, <div> ...
• Accessibilité
•
•
Donner des noms aux champs
Regrouper les champs par thème
Eléments d’interface
•
Boîtes de saisie de texte
•
Boîtes de saisie masquant le texte
•
Cases à cocher
•
Boutons radio
•
Sélecteur de fichier
•
Listes de choix
•
Listes menu
•
Champs de saisie
La balise <form>
• Permet de définir un formulaire
• Les attributs :
•
method="post / get" méthode de requête HTTP pour soumettre les données du
formulaire (post : variables “cachées” - get : variables dans l’url)
•
action="url" pour indiquer le script à exécuter quand on clique sur le bouton de
soumission
•
name nom du formulaire qui expédie les données vers le script, utilisé par le serveur et par
JavaScript
•
target="_blank / _top / _parent / _self" fenêtre où sera affiché le résultat
du script appelé
•
enctype="encodage" encodage des valeurs envoyées au serveur, par défaut :
application/x-www-form-urlencoded
La balise <input />
• Boîtes de saisie de texte : type="text"
<input type="text" size="x" maxlength="m" name="label" value="texte" />
•Attributs :
•
•
•
•
size longueur de la zone du texte
maxlength nombre de caractères maximal autorisé
name identification
value pour inscrire un texte dans le champ
La balise <input />
• Boîtes de saisie de texte masqué : type="password"
<input type="password" size="x" maxlength="m" name="label" value="texte" />
•Attributs :
•
•
•
•
size longueur de la zone du texte
maxlength nombre de caractères maximal autorisé
name identification
value pour inscrire un texte dans le champ
La balise <input />
• Cases à cocher : type="checkbox"
<input type="checkbox” name="label" checked value="texte" />
•Attributs :
•
•
•
name pour nommer les éléments de la case à cocher
value pour spécifier la valeur à envoyer, par défaut la valeur on est envoyée
checked positionne le bouton en mode validé
La balise <input />
• Boutons radio : type="radio"
<input type="radio" name="label_groupe" checked value="texte" />
•Attributs :
•
•
•
name pour nommer les éléments de la case à cocher
value pour spécifier la valeur à envoyer, par défaut la valeur on est envoyée
checked positionne le bouton en mode validé
La balise <input />
• Sélecteur de fichier : type="file"
<input type="file" name="label" value="texte"> accept="type MIME" />
•Attributs :
•
•
...
accept type des fichiers acceptés. Le joker “*” est de rigueur.
Par exemple : text/* pour tous les fichiers de type texte (... image, video, audio,
application ...)
NB : le type d’encodage du formulaire doit être : multipart/form-data
La balise <input />
• Soumission : type="submit"
<input type="submit” value="texte_du_bouton" />
Exécution du script défini dans la balise <form>
par l’attribut action="url" lorsqu’on clique sur le bouton
• Effacer le formulaire : type="reset"
<input type="reset” value="texte_du_bouton" />
•
La balise <input />
• Boutons : type="button"
<input type="button" name="label_groupe" value="texte_du_bouton" />
• Attributs :
•
•
name identifiant du bouton
value le texte dans le bouton
La balise <select>
• Liste de choix et menu :
<select name="label" size="n" multiple>
<option selected>choix1</option>
<option>choix2</option>
...
</select>
•Attributs :
• Pour SELECT :
•
•
•
name nom pour la donnée
size nombre de lignes affichées pour une liste multiple
multiple autorise la sélection simultanée de plusieurs items de la liste
• Pour OPTION :
•
•
•
value définit la valeur passée au script
selected pré-selection d’un item de la liste ou valeur par défaut du menu
width largeur du menu en pixels
La balise <textarea>
• Champ de saisie
<textarea name="label" rows="n" cols="m" wrap="virtual / off / physical">
texte dans le champ de saisie
</textarea>
•Attributs :
•
•
•
•
name nom de la donnée
rows nombre de lignes
cols nombre de caractères pour une ligne
warp passage à la ligne automatique dans le champ de saisie
•
•
off pas activé
virtual affiche le passage à la ligne mais n’envoie pas les retours à la ligne
au serveur
physical affiche te transmet les retours à la ligne au serveur
•
<html>
<head>
<title>
exemple de formulaire
</title>
</head>
<body bgcolor="#FFFFFF">
<div> <form method="post" action="">
<p>
Nom
<input type="text" size="20" maxlength="40" name="nom" value="Mavromatis" />
Pr&eacute;nom
<input type="text" size="20" maxlength="30" name="prenom" />
</p>
<p>
Mot de passe
<input type="password" size="6" maxlength="6" name="mot_de_passe" />
e-mail
<input type="text" size="30" maxlength="50" name="email" />
</p>
Vous souhaitez commander une laisse pour :
<ul>
<input type="checkbox" name="chien" value="yes" />
chien
<br />
<input type="checkbox" name="chat" value="yes" />
chat
<br />
<input type="checkbox" name="crocodile" value="no" />
crocodile
</ul>
</form> <div/>
</body>
</html>
Vérification des données
d’un formulaire
- JavaScript -
JavaScript
• Crée par Netscape (1997)
• Interprété par le client
•
•
Compatibilité :-(
•
<script type="text/javascript" src="nom_de_mon_fichier.js">
</script>
Evite de charger le traffic :-)
• Pas d’héritage entre les classes
• Le plus simple est d’utiliser un fichier séparé
JavaScript
• Basé sur le modèle objet
• Variables : objets complexes ayant des propriétés
(membres) et des fonctionnalités (méthodes)
• On accède au membre “titi” de l’objet “toto”
•
toto.titi
•
toto.tata(arguments)
• On utilise la méthode “tata” de l’objet “toto”
JavaScript et HTML
... un peu brute ...
• La balise <script>
<script language="nom" type="type-mime">
code JavaScript...
</script>
• Par exemple
<p> voici les 10 premières puissances de 2 : </p>
<script language="JavaScript">
var p=1;
for(var i=0;i<10;i++)
{
p*=2;
document.write(p + "<br />");
}
</script>
JavaScript et HTML
... mieux mais bon ...
• Dans l’en-tête
• Ce qui donne avant la balise de fermeture </head>
<script language="JavaScript">
function puissancesDe2(combien)
{
var p=1;
for(var i=0;i<combien;i++)
{
p*=2;
document.write(p + "<br />");
}
}
</script>
• Et dans le corps du document
<p> voici les premières puissances de 2 : </p>
<script language="JavaScript">puissancesDe2(10);</script>
Un petit formulaire de calcul
<html>
<head>
<title>test javascript 1 - formulaire</title>
<script language="JavaScript">
function main(formulaire)
{
var pu = formulaire.prix.value;
var q = formulaire.quantite.value;
var tot=pu*q;
formulaire.total.value = tot ;
}
</script>
</head>
<body>
<form name="monformulairecalcul">
<p>
prix unitaire :
<input type="text" size="10" name="prix" /><br />
quantité :
<input type="text" size="10" name="quantite" /><br />
prix total
<input type="text" size="10" name="total" value=" -------- " />
<input type="button" value="Calculer" onClick="main(monformulairecalcul)" />
</p>
</form>
</body>
</html>
Accès aux données d’un formulaire
•Accès aux textes des champs (text, password,
textarea ...)
• Lecture :
window.document.nom_formulaire.nom_element.value
Code du formulaire “commande” :
<input type="text" size="2" maxlength="2" name="nombre_personnes" />
Récupération du nb de personnes :
nbp = window.document.commande.nombre_personnes.value;
• Ecriture :
window.document.nom_formulaire.nom_element.value = texte
Code du formulaire “commande” :
<textarea name="adresse" rows="3" cols="40" wrap></textarea>
Affichage du texte “adresse non conforme” dans le widget TEXTAREA :
window.document.commande.adresse.value = "adresse non conforme";
• Lecture du texte par défaut :
window.document.nom_formulaire.nom_element.defaultValue
Accès aux choix “cochés”
• Eléments concernés : checkbox, radio
• Récupération d’une valeur (true /false)
window.document.nom_formulaire.nom_element[num_case].checked
window.document.nom_formulaire.nom_element[num_case].value
Code du formulaire “commande” :
Paiement par<br />
<input type="radio" name="paiement" value="carte_bleue" />Carte Bleue<br />
<input type="radio" name="paiement" value="visa" checked />Carte Visa<br />
<input type="radio" name="paiement" value="master_card"/>Master Card
Recherche de la case cochée : résultat --> radio = visa
with(window.document.commande){
for(i in paiement)
if(paiement[i].checked == true)
window.alert("radio = "+paiement[i].value);
}
Accès aux choix “cochés”
• Par exemple pour une “checkbox”
Code du formulaire “commande” :
<input
<input
<input
<input
type="checkbox"
type="checkbox"
type="checkbox"
type="checkbox"
name="assaisoner"
name="assaisoner"
name="assaisoner"
name="assaisoner"
value="huile" checked />huile piquante<br />
value="ketchup" />ketchup<br />
value="moutarde" checked />moutarde<br />
value="mayonnaise" />mayonnaise
Recherche des cases cochées : résultat --> checkbox = huile, moutarde
with(window.document.commande){
var liste="";
for(i in assaisoner)
if(assaisoner[i].checked == true)
liste += assaisoner[i].value + ", ";
window.alert("checkbox = "+liste);
}
Accès aux choix “cochés”
•Eléments concernés : checkbox, radio
•Cocher ou décocher un choix
window.document.nom_formulaire.nom_element[num_case].checked = true / false
Par exemple
with(window.document.commande){
for(i in assaisoner)
if(assaisoner[i].checked == true)
assaisoner[i].checked = false;
else
assaisoner[i].checked = true;
}
Résultat --> décoche huile et moutarde, coche ketchup, et mayonnaise
•Obtenir le choix coché par défaut
window.document.nom_formulaire.nom_element[num_case].defaultChecked
Accès aux choix dans une “liste de choix”
• Lire les choix
• true /false
• nom
• nombre de choix
• texte HTML associé
window.document.nom_formulaire.nom_element.options[num_case].selected
window.document.nom_formulaire.nom_element.options[num_case].value
window.document.nom_formulaire.nom_element.options[num_case].length
window.document.nom_formulaire.nom_element.options[num_case].text
Accès aux choix dans une “liste de choix”
• Code du formulaire
<select name="nourriture">
<option value="pizza">pizza</option>
<option value="poulet_frites">poulet / frites</option>
<option value="moules_frites">moules / frites</option>
</select>
• Instructions JavaScript
with(window.document.commande){
var liste = "";
for(i=0; i<nourriture.length; i++)
if(nourriture.options[i].selected == true)
{
liste += nourriture.options[i].value;
liste += " (texte HTML : "+nourriture.options[i].text+"), ";
}
window.alert("liste de choix = "+liste);
}
Résultat --> liste de choix = poulet_frites (texte HTML : poulet/frites),
Accès aux choix dans une “liste de choix”
• Pour une liste à choix unique
• Instructions JavaScript
window.document.nom_formulaire.nom_element.selectedIndex
with(window.document.commande){
choix = nourriture.options[nourriture.selectedIndex].value;
window.alert("choix selectionne = "+choix);
}
Résultat --> choix selectionne = poulet_frites
Accès aux choix dans une “liste de choix”
• Modifier les choix
• Code du formulaire (choix multiples)
window.document.nom_formulaire.nom_element.options[num_case].selected = true / false
<select name="nourriture" multiple>
<option value="pizza">pizza</option>
<option value="poulet_frites">poulet / frites</option>
<option value="moules_frites">moules / frites</option>
</select>
• Instructions JavaScript (bascule des sélections)
with(window.document.commande){
for(i=0; i<nourriture.length; i++)
if(nourriture.options[i].selected == true)
nourriture.options[i].selected = false;
else
nourriture.options[i].selected = true;
}
Accès au texte des boutons
• submit, reset, button ...
• Code du formulaire
• JavaScript
window.document.nom_formulaire.nom_element.value
<input type="button" value="Informations" name="binfo" />
texte = binfo.value; --> texte contient Informations
Accès par tableau
• Accès aux éléments du formulaire par l'intermédiaire du tableau forms[num_form]
Informations sur le formulaire :
window.document.forms[0].elements.length (nombre d'éléments dans le formulaire)
window.document.forms[0].elements[i].type (type de l'élément i)
Pour les types text, password, hidden, file, textarea :
window.document.forms[0].elements[i].name (nom donné à l'élément)
window.document.forms[0].elements[i].value (texte dans l'élément)
Pour les types radio, checkbox :
window.document.forms[0].elements[i].ckecked (pour savoir si l'élément est coché)
window.document.forms[0].elements[i].value (valeur de l'élément)
Pour les types select unique et multiple :
window.document.forms[0].elements[i].options[j].selected (pour savoir si une option est sélectionnée)
window.document.forms[0].elements[i].options[j].value (valeur de l'option)
Pour les types button, submit, reset :
window.document.forms[0].elements[i].value (texte sur l'élément bouton)
Affichage du texte des widgets
with(window.document.forms[0]) //pour eviter les repetitions
{
for (i=0; i<elements.length; i++) //pour tous les elements
{
type = elements[i].type; //recuperer le type de l'element i
switch (type)
{
//donnees textuelles
case "text" :
case "password" :
case "hidden" :
case "file" :
case "textarea" :
texte += "<BR>"+elements[i].name+" =
break;
"+elements[i].value;
//choix par cochage
case "radio" :
case "checkbox" :
if(elements[i].checked == true)
texte += "<BR>"+elements[i].name+" = "+elements[i].value;
break;
....
}}}
Accès par tableau
• Informations sur le formulaire
valeur de l'attribut action du formulaire numéro 0
•window.document.forms[0].action
valeur de l'attribut method du formulaire numéro 0
•window.document.forms[0].method
valeur de l'attribut name du formulaire numéro 0
•window.document.forms[0].name
valeur de l'attribut target du formulaire numéro 0
•window.document.forms[0].target
Evénements dans un formulaire
• Exécution de code JavaScript lorsqu’un “widget” est modifié
permet de :
• Généralement,
vérifier la validité des données entrées
•
• donner des informations (affichage d'un message dans la barre d'état lorsqu'on
clique dans un champ de formulaire)
• Les événements se placent dans l'élément de formulaire comme
des attributs, ils sont de la forme :
• nom_evenement = "code JavaScript",
• Le code JavaScript étant la plupart du temps un appel à une fonction JavaScript
définie plus haut dans la page
• Par exemple :
<input type="button" value="Informations" name="binfo" onClick="Info()" />
onClick : clic sur un élément
• Eléments concernés : checkbox, radio, submit, button, reset
• Par exemple pour un bouton d’information :
<html>
<head>...</head>
<script language="JavaScript">
function Info()
{
window.alert("Nos produits sont en general non perimes");
}
</script>
<body>
<form ...>
...
<input type="button" value="Informations" name="binfo" onClick="Info()" />
...
</form>
</body>
</html>
onClick : clic sur un élément
• Par exemple lorsqu’on clique sur un bouton “radio” :
function AffStatus(choix)
{
switch (choix)
{
case 1 : window.status = "avez-vous vraiment une carte bleue ?"; break;
case 2 : window.status = "avez-vous vraiment une carte visa ?"; break;
case 3 : window.status = "avez-vous vraiment une master card ?"; break;
default : ;
}
}
....
<input
Bleue
<input
<input
Master
type="radio" name="paiement" value="carte_bleue" onClick="AffStatus(1)" /> Carte
type="radio" name="paiement" value="visa" onClick="AffStatus(2)" /> Carte Visa
type="radio" name="paiement" value="master_card" checked onClick="AffStatus(3)" />
Card
....
--> Lorsqu’on clique sur le bouton “carte
est affiché dans la barre d’état
bleue”,
le texte “avez-vous
vraiment une carte bleue ?”
onChange : modification dans l’élément
• Eléments concernés : text, password, file, TEXTAREA, listes
• Par exemple :
<input type="password" size="6" maxlength="6" name="pwd"
onChange="window.status=this.value" />
--> lorsque le client à donné son code et qu'il quitte le champ,
son code apparaît en clair dans la barre d'état.
onFocus, onBlur : attribution/perte de focus
• Eléments concernés : text, password, file, TEXTAREA, listes
• Par exemple :
<input type="password" size="6" maxlength="6" name="pwd"
onFocus="window.status=”Entrez votre code” />
--> lorsque le client clique dans le champ, le message Entrez
votre code apparaît dans la barre d'état.
onSelect : sélection dans un champ
• Eléments concernés : text, password, file, textarea, listes
• Par exemple :
<input type="password" size="6" maxlength="6" name="pwd"
onSelect="status='champ password selectionne" />
--> lorsque le client sélectionne dans le champ, le message champ
password selectionne apparaît dans la barre d'état.
onReset, onSubmit
• Eléments concernés : Bouton “submit” ou “reset”
• Par exemple :
<form name="commande" action="script.php"
onSubmit="return Verif()">
--> lorsque le client clique sur le bouton Commander, une fonction
de vérification Verif() est appelée, si elle retourne la valeur true, le
formulaire est envoyé au serveur, sinon la soumission est annulée.
But :
vérification du formulaire
• Analyse du côté client => pas de connexion inutile
• Quelques exemples de vérification :
•
le champ ne doit pas être vide
• le champ doit comporter uniquement des chiffres
• le champ doit comporter uniquement des lettres
• la valeur du champ est un nombre compris entre deux bornes
• En général déclenchement à l’événement onSubmit
ou onChange
Envoyer un mail
<body> <div>
<form name="bondecommande" action="trait1.php" onSubmit=”return Poster()” method="post" >
Vous souhaitez commander :
<select name="nourriture">
<option value="pizza"> une pizza </option>
<option value="poulet_frites"> un poulet / frites </option>
<option value="moules_frites"> des moules / frites </option>
</select>
Pour <input type="text" size="2" maxlength="2" name="nombre_personnes" />
personnes<br />
Votre adresse :<br />
<textarea name="adresse" rows="5" cols="50" wrap></textarea>
Livraison &agrave;
<select name="heure_livraison">
<option value="20"> 20 heures </option>
<option value="21"> 21 heures </option>
<option value="22"> 22 heures </option>
</select>
<hr />
<div align="center">
<input type="submit" value="OK" />
</div>
<hr />
</form> </div> </body>
Envoyer un mail
function Poster() {
var subject="";
var i = 0;
with(window.document.bondecommande) { //objet par defaut pour le bloc
// verif que le champ adresse n'est pas vide
if (adresse.value.length == 0) {
alert("Entrez une adresse !");
return false;
}
// verif le champ nombre_personnes
if (isNaN(nombre_personnes.value) || nombre_personnes.value < 1) {
alert("Entrez un nombre en chiffres > 0 !");
return false;
}
// creation du sujet du mail
for(i=0; i < nourriture.length; i++)
if (nourriture.options[i].selected == true)
subject = nourriture.options[i].value;
// action du formulaire
action = 'mailto:[email protected]?content-type=text/html&subject=';
action += 'commande : '+subject ;
}
return true;
}