DAW Développement Applications Web Ouadfel Salima Site du cours: http://salimaouadfel.e-monsite.com/
Les formulaires 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.
Déclaration du formulaire <form> </form> peut contenir les attributs suivants : 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,..) <form method= "post action= script.php"> détermine la méthode d envoi des données vers le serveur " get " fichier qui est chargé de traiter les données du formulaire côté serveur
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 Exemple 4
Transport des données du formulaire Après soumission Exemple? Séparation entre l url et = Séparation entre le les données champ et sa donnée & Séparation entre les champs des données
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) Exemple 6
Transport des données du formulaire Après soumission les formulaires/back_post.html Exemple l url
Contenu du formulaire 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 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> Attributs supplémentaires 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.
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. Optionnel. Un clic sur le label sélectionne le champ de saisie 14
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 Input type = " tel" 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. Exemples de pattern http://html5pattern.com/ Un numéro de tel de la forme 031-45-23-00 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 input Input 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éé.
Nombre Les différents type de input
Les différents type de input Input type = "range" Une autre manière pour les nombres Par défaut la valeur min=0 et la valeur max=100
Les différents type de input Input type = "range" Dans ce type les nombre saisies ne sont pas visibles pour l internaute. On peut utiliser oninput et output pour les visualiser. Le calcul de la valeur du champ x Nom du champ résultat Exemple C est le nom du champ à partir duquel le résulat est calculé
Les différents type de input Exemple
Les différents type de input input type= color Le type color permet de saisir une couleur à partir d une palette présentée par le navigateur
Champ de saisie en lecture seulement On 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 Input type=hidden 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" /> Exemple
Les différents type de input Input type = " checkbox"
Les différents type de input Les 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 Input type = "radio" Une case peut être cochée par défaut avec l'attribut checked
Les listes déroulantes select Exemple 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
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 CSS La 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; }