Espace cours avec LigneWeb.net ... cours 8 XHTML
© LigneWeb ... Optimisé pour Safari, Chrome. ... © : alain jean deligne ... /les formulaires.
Les formulaires en XHTML
... recherche sur ligneweb.net ...
Un formulaire avec plein de demandes :
... un formulaire existe pour récolter des informations permettant le contact, ...
... pour exprimer un avis, recevoir une Newsletter, devenir membre , ... un lien important ...
... le formulaire va être traité par un script pour être envoyé par E-mail ...
... ou bien pour être envoyer dans une base de donnée ...
... il peut aussi être vérifié pour la sécurité, ... ( E-mail correct, etc. ) ...
La balise form :
... pour dire au navigateur que débute un formulaire, on va utiliser la balise ... form ... avec ...
... <form> ... la balise entrante ... et ... </form>: ... la balise sortante ...
... entre ces deux balises vont se mettre la ou les différents éléments constitutifs du formulaire ...
... le style sera défini dans la feuille de style à l'extérieure ...
... cette balise a donc des champs, un champ par demande ...
Méthode post et get
... la balise form a des attributs ... method ... qui permettent de dire au serveur de quelles manière sont passés les informations ...
... et ... action ... qui permet de dire au serveur quel script sera utilisé pour traiter les informations codées ...
... pour la method, il existe deux valeurs possibles ... get ... ou ... post ...
... la method ... spécifie la méthode http qui sera utilisée pour traiter les données du formulaire ...
... get : ... ... les donnnées sont rajoutées à l'URI par l'attribut action
... (avec un séparateur: ?) ...
... donc visibles ... à résrever pour des données non sensibles ...
... les données sont transmisent de l'ordinateur au serveur ...
... post :... ... les données sont incluses dans le formulaire ...
... donc invisibles ... à réserver pour des données sensibles ...
... les données dont on se sert sont déjà sur le serveur ... elles ne sont pas transmisent ...
... pour l'action, on précise le type de script qui va traiter l'information ...
... notre manière d'envoi se fait par
E-Mail ... avec un script en JavaScript ...
... cela nous donne pour cette action l'écriture suivante ...
...
<form action="mailto:moi@monsite.com?subject=Titre%20du%20message" method="post" enctype="text/plain" name="formulaire1"> ...
</form> ...
... avec l'E-Mail ... moi@monsite.com ... comme exemple ...
... qui est précédé de ...
mailto: ...
... le nom de la fonction du script est : ...
formulaire1 ...
...
ce script ... permet la vérification de l'E-Mail ...
Les champs :
La balise input :
... à l'intérieur du formulaire, il y a ... des ... champs ... qui seront remplis ou cochés ...
... la balise pour un champ est ... <input /> ... balise unique ... pour du texte, radio, bouton, checkbox, ...
La balise textarea :
... la balise textarea ... zone de texte plus ou moins grande pour écrire ...
... avec ... <textarea> ... balise entrante et ...</textarea> ... balise sortante ...
... cette balise textarea demande un nom : ... name="..." ...
... une largeur : ... cols="..." ... nombre de caractères ...
... et une hauteur ; ... rows="..." ... nombre de lignes ...
... dans notre deuxième exemple ci-dessous, nous avons : ...
... name="texte" cols="30" rows="4" ...
La balise select :
... une liste déroulante avec la balise select, permettant la sélection entre des option ...
... la balise ... <select> ... la balise entrante et ... </select> ... la balise sortante ...
La balise option :
... la balise intérieur est la balise ... <option> ... permettant de remplir une liste déroulante ...
... la balise <option> ... la balise entrante ... et
... la balise </option> ... la balise sortante ...
Les attributs de input :
type et name :
... la balise input a un attribut ... type=" " ... qui permettrat de préciser le type de champ que le naviguateur doit montrer ...
...les valeurs sont : text, radio, checkbox, hidden, password, submit, reset ...
... pour nommer un champ on utilise l'attribut ... name=" " ... nom qui permettra à un programme ...
... de récupérer les informations encodées par l'utilisateur ...
text :
... pour une balise de type text ... avec un champ de 10 caractères pouvant accepter 25 caractères ... et comme nom : nomutilisateur ...
... la balise input devient ...
... <input type="text" size="10" length="25" name="nomutilisateur" /> ...
password :
... pour une balise de type password ... avec un champ de 10 caratères avec un maximum de 15 caractères (non lisibles) ...
... la balise input devient ...
... <input type="password" name="motdepasse" size="10" maxlenght="15" /> ...
radio et chekbox / value :
... pour une balise de type ... radio ... ou de type ... checkbox ... avec l'attribut ... value ... qui donne le nom à cocher ou à pointer ...
... la balise input devient ...
... <input type="radio" name="sexe" value="Homme" /> ...
... <input type="checkbox" name="matos" value="Graveur" checked /> ...
... la précision checked coche cette valeur parmis toutes celles présentées ...
submit et reset / value :
... pour une balise de type ... submit ... ou de type ... reset ... avec l'attribut ... value ... qui donne le nom inscrit dans le bouton ...
... la balise input devient ...
... <input type="submit" name="submit" value="Envoyer" /> ...
... <input type="reset" name="reset" value="Initialiser" /> ...
La structure :
Cela nous donne :
...l'E-mail est factice, il faut y mettre le bon E-Mail ...
... le ...&20... est écrit pour représenter un espace...
...c'est à respecter absolument dans ce cas-ci ainsi que le point d'interrogation ...
Nous pouvons le rendre plus beau en mettant le formulaire dans un tableau ...
Cela nous donne :
Remarque : ... avec Effacer au lieu de Réinitialiser ...
Vous pouvez expérimenter ce formulaire en le remplissant ...
... lorsque vous cliquez sur le bouton envoyer ... votre logiciel mail s'ouvre et présente votre Mail avec les données inscrites ...
... les navigateurs ont déjà la procédure définie en eux ... oufti ...
... nous voyons dans le code ... le bouton radio ... avec la femme qui est déjà pointé ...
... ce n'est pas nécessaire mais peut être envisagé ... et pour le réaliser, on utilise ...
... l'expression ... checked ... ajouté ... mais non existant pour l'homme ...
... un seul bouton radio peut être déjà pointé, ... au choix ... évidemment ...
... Transparence avec ombrage : ... CSS 3.0 ...
... tout ne respecte pas le W3C ... site d'expérimentation ...
![[Valid RSS]](valid-rss-rogers.png "Validate my RSS feed")
