DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément ...
Transcript of DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément ...
![Page 1: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/1.jpg)
DAWDéveloppement Applications Web
Ouadfel Salima
Site du cours: http://salimaouadfel.e-monsite.com/
![Page 2: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/2.jpg)
• Permettent aux auteurs de pages Web de doter leur page web d'éléments interactifs permettant par exemple un dialogue avec les internautes,.
• L’internaute saisit des informations en remplissant des champs ou en sélectionnant des choix, puis appuie sur un bouton de soumission (submit) pour l'envoyer .
Les formulaires
![Page 3: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/3.jpg)
<form> </form> peut contenir les attributs suivants :
<form method= "post“ action=“script.php">
" get " fichier qui est chargé de traiter les données du formulaire côté serveur
• name : Un nom qui permet de distinguer les différents formulaires.
method : La méthode de transmission des valeurs par le formulaire
: get (par défaut) ou post.
action : L’URL du document chargé du traitement du formulaire (html, php,..)
détermine la méthode d’envoi des données vers le serveur
Déclaration du formulaire
![Page 4: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/4.jpg)
Transport des données du formulaire• La méthode get: Les noms des éléments du formulaire et
leurs valeurs sélectionnées sont présentés au serveur selon la forme: url?nom-champ1=valeur & nom-champ2=valeur
4
Exemple
![Page 5: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/5.jpg)
Transport des données du formulaire
Après soumission
? Séparation entre l’url et
les données& Séparation entre les
champs des données
= Séparation entre le
champ et sa donnée
Exemple
![Page 6: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/6.jpg)
Transport des données du formulaire
• La méthode post: Les noms des éléments du formulaire et leurs valeurs sélectionnées sont présentés au serveur selon la forme: url(présente dans la partie action)
6
Exemple
![Page 7: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/7.jpg)
Transport des données du formulaire
Après soumission
l’url
les formulaires/back_post.html
Exemple
![Page 8: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/8.jpg)
L'internaute va saisir ses informations soit en remplissant
• des champs de saisie
– monoligne : nom, prénom (input).
– multilignes: commentaires( textarea)
• une liste déroulante (select).
• une case à cocher (radio, checkbox).
• Des boutons (submit, reset, button)
Contenu du formulaire
![Page 9: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/9.jpg)
Contenu du formulaire
Les zones de saisie ont comme attributs essentiels:
• Name: nom de la zone
• Value: valeur initiale(par défaut)
valeur saisie par l’internaute.
![Page 10: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/10.jpg)
champ de saisie multilignes: <textarea>
• L'élément <textarea> permet de définir une zone de saisie de texte qui s'étend sur plusieurs lignes.
• Attributs– rows="nombre" : nombre de lignes de la zone
– cols="nombre": nombre de colonnes de la zone.
– Name: nom de la zone
– Value: contenu de la zone
<textarea name=" commentaire" rows="3" cols="30>
value="Vous avez une zone de texte. Vous pouvez effacer
ce contenu ou y ajouter du texte ! "
</textarea>
10
![Page 11: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/11.jpg)
Champ de saisie monoligne <input>
• Exemple :
<input type="text" name="nom" value="" size="5" />
• type définit la forme de la balise <input>, donc pour une zone de texte simple c'est "text".
• name est très important puisque c’est associé un nom à la zone de saisie.
• value définit le contenu du champ. Il sert aussi à initialiser le champ de saisie.
• size correspond à la largeur du champ.
![Page 12: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/12.jpg)
Champ de saisie monoligne:<input>Attributs supplémentaires• maxlength indique la taille maximum de la zone ;• Placeholder: Donne une indication sur le contenu de la zone. Cette
indication disparaîtra dès que le visiteur aura cliqué à l'intérieur du champ.
• required: indique qu’un champ doit être rempli avant la soumission du formulaire.
![Page 13: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/13.jpg)
Champ de saisie monoligne:<input>
• autofocus : permet de focaliser sur un champ dans la page.
• autocomplete (on /off): permet de compléter le champ à partir de valeurs passées. Par défaut elle est à on.
Attributs supplémentaires
![Page 14: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/14.jpg)
Etiquette des champs de saisie: <label>
• Permet d'associer une étiquette à un champ de saisie.
• Le champ de saisie doit être nommé avec l'attribut id.
• L'attribut for spécifie l’id du champ de saisie auquel est associée l'étiquette.
• Si on clique sur l'étiquette, le champ de saisie prend le focus.
14
Optionnel. Un clic sur le label
sélectionne le champ de saisie
![Page 15: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/15.jpg)
Les différents type de input
Input type = "text"
La valeur text va nous permettre de créer un
champ de saisie mono-ligne dans lequel
l’utilisateur entrera des données quelconques .
![Page 16: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/16.jpg)
Les différents type de input
Input type = "password"
permet de créer un champ de saisie « sécurisé »
pour par exemple demander un mot de passe
aux utilisateurs.
Lorsque l’utilisateur écrit dans le champ, ce qu’il
écrit n’est pas affiché en clair mais est remplacé
par des astérisques ou des points.
![Page 17: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/17.jpg)
Les différents type de input
![Page 18: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/18.jpg)
Les différents type de input
Permet de saisir un numéro de tel mais aucun contrôle ne peut être fait.
On peut utiliser l’attribut pattern qui permet de donner une expression régulière validant l’entrée saisie.
Input type = " tel"
Un numéro de tel de la forme
031-45-23-00
Exemples de pattern
http://html5pattern.com/
EXEMPLE
![Page 19: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/19.jpg)
Les différents type de input
Input type = "email"
Permettre de créer un champ de formulaire
devant recevoir une adresse email.
Ainsi, certains navigateurs récents vont tester la
valeur rentrée dans le champ par l’utilisateur afin
de s’assurer que celle-ci a bien la forme d’un
email (présence d’un @).
![Page 20: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/20.jpg)
Les différents type de input
Si erreur dans la saisie
![Page 21: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/21.jpg)
Les différents type de inputInput type = "url"
permettre de créer une zone de saisie
acceptant une URL par le protocole http:// ou
ftp:// ou mailto:.
![Page 22: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/22.jpg)
Les différents type de input
Input type = " number"
La valeur number de l'attribut type va nous
permettre de créer une zone de saisie
n’acceptant que les nombres.
Selon le navigateur utilisé, une barre de
défilement de nombres va apparaître à droite du
champ créé.
![Page 23: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/23.jpg)
Les différents type de input
Nombre
![Page 24: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/24.jpg)
Les différents type de input
• Une autre manière pour les nombres
Input type = "range"
Par défaut la valeur min=0 et la valeur max=100
![Page 25: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/25.jpg)
Les différents type de input
• Dans ce type les nombre saisies ne sont pas visibles pour l’internaute.
• On peut utiliser oninput et output pour les visualiser.
Input type = "range"
Nom du champ résultat
C’est le nom du champ à partir duquel le
résulat est calculé
Le calcul de la valeur du champ x
Exemple
![Page 26: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/26.jpg)
Les différents type de input
Exemple
![Page 27: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/27.jpg)
• Le type color permet de saisir une couleur à partir d’une palette présentée par le navigateur
input type=“color”
Les différents type de input
![Page 28: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/28.jpg)
Champ de saisie en lecture seulementOn ajoute au champ l’un de ces attributs:
• readonly : le champs est en lecture uniquement (ne peut pas être modifié). – Son contenu valeur est specié dans l'attribut value.
• disabled : le champ est desactivé (couleur grise par défaut).– Le champ parait mais on ne peut pas y saisir des donnée.
– Son contenu valeur est specfié dans l'attribut value.
![Page 29: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/29.jpg)
Les différents type de input
• Définit un champs caché. L'usager ne le voit pas mais il existe dans le code HTML.
• On l'utilise pour stocker des valeurs que le serveur envoie au navigateur
<input type="hidden" name="Identifiant" value="AOB12345" />
Input type=hidden
Exemple
![Page 30: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/30.jpg)
Les différents type de input
Input type = " checkbox"
![Page 31: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/31.jpg)
Les différents type de inputLes différents type de input
Exemple
![Page 32: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/32.jpg)
Les différents type de input
• Une case peut être cochée par défaut au chargement de la page avec l'attribut checked :
![Page 33: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/33.jpg)
Les différents type de input
Une case peut être cochée par défaut avec l'attribut checked
Input type = "radio"
![Page 34: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/34.jpg)
Les listes déroulantes
Une option peut être sélectionnée par défaut, avec l'attribut selected
Plusieurs options peuvent être sélectionnées avec l’attribut multiple
select
Exemple
![Page 35: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/35.jpg)
Les listes déroulantes• Optgroup: regrouper sémantiquement des options
![Page 36: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/36.jpg)
Les listes déroulantes
datalist: réfère à une liste (avec l'élément <datalist>) qui présente une liste de choix.
<form action="traitement.php" >
Choisissez un des OS: <input list="systeme">
<datalist id="systeme">
<option value="Windows 8">
<option value="Windows 7">
<option value="Linux">
</datalist>
</form>
![Page 37: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/37.jpg)
Les boutons
Bouton button
• L'élément HTML <button> est utilisé afin de créer un contrôle interactif ayant la forme d'un bouton.
• Avant html5 <input type=« button »>
Exemple :
![Page 38: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/38.jpg)
Les boutons
Bouton Envoyer
• Une fois que votre visiteur a fini de remplir le formulaire, il faut qu'il puisse vous l'envoyer. Pour cela il lui faudra cliquer sur un bouton dont la balise correspondante est
<INPUT TYPE="submit"> dont l'attribut VALUE a pour valeur le texte affiché sur le bouton.
• Syntaxe :
• <INPUT TYPE="submit" VALUE="texte_à_afficher">
• Exemple :
• <INPUT TYPE="submit" VALUE="Envoyer">
![Page 39: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/39.jpg)
Les boutons
Bouton Effacer
• L'internaute pourra aussi vouloir effacer toutes les réponses qu'il aura donné. L'utilisation de la balise <INPUT TYPE="reset"> fera apparaître un bouton qui permet d'initialiser le formulaire.
• Syntaxe :
• <INPUT TYPE="reset" VALUE="texte_à_afficher" />
• Exemple :
• <INPUT TYPE="reset" VALUE="Effacer" />
![Page 40: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/40.jpg)
Regrouper les éléments du formulaire: fieldset et legend
![Page 41: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/41.jpg)
Mettre en forme un formulaire grâce au CSS
Notions de réseaux
![Page 42: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément pour lequel la validation du contenu échoue par rapport au type de donnée](https://reader033.fdocuments.net/reader033/viewer/2022060611/606171b70ef7243e0440cbf0/html5/thumbnails/42.jpg)
Formulaire et CSSLa pseudo-classe :invalid cible tout
élément <input> pour lequel la validation du
contenu échoue par rapport au type de donnée
attendu.
Ceci permet de mettre en forme les champs non
valides pour aider l'utilisateur à identifier et à
corriger les erreurs.
input:invalid { background-color: #ffdddd; }
input:valid { background-color: #ddffdd; }