Cookies acceptés.
bouton pour découvrir notre choix
bouton de redirection: haut
bouton de redirection: home
bouton de redirection: bas
bouton de redirection: explication des cookies
Création de sites web 3 D.   Webmaster, webdesign - Conseil.

Votre site web 3D, ... pour une autonomie.

Un espace francophone artisanal et pédagogique.
Logo de LigneWeb

la communication web
... JavaScript indispensable ... code utf-8 ... -  © design : LigneWeb

- Site expérimental en XHTML 1.0 et CSS 2.0 avec CSS 3.0 -


 •   Plan du site 
Avec des cours et des conseils.
  Notre Blog :  La ligne papyrus 
 MENU XHTML   info xhtml  - cours 1  - cours 2  - cours 3  - cours 4  - cours 5  - cours 6  - cours 7  - cours 8  - cours 9 
 Menu cours 8 XHTML  - balise form  - méthodes post et get  - input  - textarea  - select  - option  - type et name  - text 
- password  - radio et chekbox/value  - submit et reset/value 



Cours 8 XHTML : les formulaires



 © LigneWeb  ... /les formulaires.
© design : LigneWeb
© : alain jean deligne - LigneWeb
Le logo de LigneWeb

Les formulaires en XHTML


Suivez-nous.









Remarque : ... en CSS2 et CSS3 ... :

pour cette page et non visible ... :
le fichier ...  ligne21.css  ... qui mélange du CSS 2 avec du CSS 3 ...
... et ceci grâce aux sélecteurs spécifiques ... expliqués au ...  Cours CSS 3 




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 :

Formulaire à remplir :

Prénom :
Nom :
E-mail :
Homme
Femme



...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 :

Formulaire à remplir :



Prénom :
Nom :
E-mail :
Homme :
Femme :
Objet à choisir :
Action : !! NON fonctionnel-                       
 Ne regarder que l'extérieur de la structure ... il ne peut fonctionner. 



Vous pouvez expérimenter le premier formulaire en le remplissant ...
... lorsque vous cliquez sur le bouton envoyer ...
... votre logiciel mail s'ouvre normalement comme plus haut ...
... et présente votre Mail avec les données inscrites ...
... ce dernier formulaire ne peut fonctionner, comme précisé...
... la fonction d'envoi est déjà utilisée par le premier formulaire ...
... la fonction effacer interne au formulaire fonctionne ...
... 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 ...

... vous pouvez voir deux applications de formulaires …  à la page contact  ...
... vous pouvez également voir une autre forme de formulaire sur …  la page du site de Furnis  ...



... design 3 D ...

...  fenêtre sur l'univers  ...             © design : LigneWeb - © Apple





 MENU XHTML   info xhtml  - cours 1  - cours 2  - cours 3  - cours 4  - cours 5  - cours 6  - cours 7  - cours 8  - cours 9 
  Essentiel :   - Accueil  - Offres  - Site photo  - Projet  - Historique  - Historique RSS  - Réalisations  - Création 
- Cours  XHTML  - Cours CSS 2  - Création site  - Cours HTML 5  - Cours CSS 3  - Cours jQuery 
- Programmes JS  - Liens - © - cookies  - Contact  - Plan du site 

Chaque enfant compte. Plan Belgique     Valid XHTML 1.0 Transitional     [Valid RSS]     CSS Valide !     Le logo de LigneWeb

... tout ne respecte pas le W3C ... site d'expérimentation ...

le titre du site web
©  Copyright :  "LigneWeb" (2008-2017) Tous droits réservés.  Légal  Design, Artisan web: mathalan 
 LigneWeb :   BE 0843 356 602. (2012-2017)   Conditions d'utilisation  Création: masterligne  • Qui sommes nous? 

Réinstaller le Bien en soi ... pour réinstaller le Bien sur terre ... et changer le monde.
© LigneWeb  Utilisation de cookies