daw - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-les-formulaires-1.pdf · élément ...
TRANSCRIPT
DAWDéveloppement Applications Web
Ouadfel Salima
Site du cours: http://salimaouadfel.e-monsite.com/
• 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
<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
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
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
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
Transport des données du formulaire
Après soumission
l’url
les formulaires/back_post.html
Exemple
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
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.
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
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.
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.
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
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
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 .
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.
Les différents type de input
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
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 @).
Les différents type de input
Si erreur dans la saisie
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:.
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éé.
Les différents type de input
Nombre
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
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
Les différents type de input
Exemple
• 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
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.
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
Les différents type de input
Input type = " checkbox"
Les différents type de inputLes différents type de input
Exemple
Les différents type de input
• Une case peut être cochée par défaut au chargement de la page avec l'attribut checked :
Les différents type de input
Une case peut être cochée par défaut avec l'attribut checked
Input type = "radio"
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
Les listes déroulantes• Optgroup: regrouper sémantiquement des options
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>
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 :
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">
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" />
Regrouper les éléments du formulaire: fieldset et legend
Mettre en forme un formulaire grâce au CSS
Notions de réseaux
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; }