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 HTML 5  - Cours 1  - Cours 2  - Cours 3  - Cours 4  - Cours 5  - Cours 6  - Cours 7  - Cours 8  - cours 9 
 Menu cours 6 HTML 5  - les formulaires  / méthode post et get  / balise input  / les type de input      ➥   datalist 
 Sous-menu : 
Menu input : type : - text  - password  - hidden  - radio  - checkbox  - button  - reset  - submit  - image  - file  - tel 
- url  - email  - search  - date  - time  - datetime  - datetime-local  - month  - week  - number  - range  - color 



Cours 6 HTML 5 avec LigneWeb
les formulaires.



 © LigneWeb  ... /HTML 5 : formulaires : input : type
© design : LigneWeb
© : alain jean deligne - LigneWeb



Cette page est réalisée en XHTML 1.0 transitionnel avec du CSS 2 et du CSS 3 ...
Cette page va être réalisée en parallèlle en HTML 5 et CSS 3 prochainement ...



Le logo de LigneWeb

Balises des formulaires :


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 




Des formulaires améliorés.

... Les formulaires possibles en HTML 4 et le XHTML sont très limités ..
... il est évident que d'autres valeurs pour input donneront une précision plus grande ...

... le formulaire sera toujours encadré par la balise ... form ...
... avec comme balise entrante ... <form> ...
... et comme balise sortante ... </form> ...

... cela nous donne ...

Méthode post et get .

... la balise form a des attributs ... style="color:black">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 ...




La balise input.

... contrairement à la manière d'écrire la balise input en XHTML ... <input _____ /> ...
... ici on ne marque pas la fin par le ... / ...
... la balise s'écrit en HTML 5 :
... <input type="" name=""> ...

... cela nous donne ...

... mais la balise input pourra aussi être dans certains cas ... à l'extérieur de ... form ...
... ce qui facilitera les prises de données sur une page pour ... les mobiles ...
... la page pour un mobile étant beaucoup plus petite ... une facilité d'encodage ...

Des précisions de contenu de la balise input :

... pour empêcher le navigateur de valider un formulaire sans le champ complété ...
... nous avons le terme ... required ... placé dans l'input ...
... le masque de saisie spécifiant la forme qu'elle doit prendre pour être valide ...
... nous avons le terme ... pattern ... placé dans l'input ...
... avec ... pattern="____" ... placé dans l'input ...
... un exemple : ... <input name="codepays" pattern="[A-Z]{3}"> ...
... pour permettre ou empêcher le remplissage automatique d'un input pour la sécurité ...
... nous avons le terme d'auto-complétion qui s'écrit ... auto-complete ...
... prenant la valeur active ...on ... ou désactive ... off ...
... avec ... auto-complete="off" ... par exemple pour la sécurité ...
... pour afficher un texte montrant un exemple de saisie demandée ... souvent en grisé ...
... nous avons le terme ... placeholder ...
... avec ... placeholder="le texte en question" ... ce texte disparaissant dès la saisie ...




Les différentes valeurs de input: type.


 Sous-menu : 

➥ ... nous pouvons voir ses différents input fonctionner sur certaines tablettes ...
... tous les input ne fonctionnent pas encore sur tous les navigateurs ...

Type : text.

... champ de texte ...
Votre nom :

Type : password.

... pour écrire le mot de passe : il n'est pas visible ...
Mot de passe :

Type : hidden.

... champ pour valeur invisible ...
... le champ n'apparait pas, mais il est là ...

Type : radio.

... bouton radio avec un seul choix ... il faut au minimum deux boutons ...
... on ne peut que cliquer un seul des deux boutons ...


Type : checkbox.

... cases à cocher .. elles sont indépendantes ...
... la deuxième checkbox est cochée grâce à checket ...


Type : button.

... un bouton ... permettant un contact en cliquant dessus ...
Exemple :

Type : reset.

... la remise à zéro du formulaire ...

Type : submit.

... bouton permettant la validation ou l'envoi du formulaire ...



Type : image.

... pour unr image cliquable ...
Cliquez sur le bouton :

Type : file.

... choisir un fichier ...
.. ceci est incomplet pour certains navigateurs ...

Type : tel.

... pour introduire un N° de téléphone ...
... fonctionne avec iOS sur iPhone ...
... une vérification avec php sur le serveur est nécessaire ...
Tél :

Type : url.

... zone texte pour inscrire l'adresse du site web ...
... fonctionne avec iOS sur iPhone ...
.. ceci est incomplet pour certains navigateurs ...
Votre site web :

... zone texte pour l'adresse Mail ...
... fonctionne avec iOS sur iPhone ...
.. ceci est incomplet pour certains navigateurs ...
Votre E-Mail :




Type : search.

... zone texte pour la recherche d'un terme ...
... fonctionne avec iOS sur iPhone ...
.. ceci est incomplet pour certains navigateurs ...
Recherche :

Type : date.

... pour donner la date du formulaire, par exemple ...
... fonctionne avec iOS sur iPhone ...
La date :

Type : time.

... zone texte pour entrer l'heure ...
... fonctionne avec iOS sur iPhone ...
.. ceci est incomplet pour certains navigateurs ...
L'heure :

Type : datetime.

... la date et l'heure d'un évènement ...
... fonctionne avec iOS sur iPhone ...
.. ceci est incomplet pour certains navigateurs ...
Anniversaire :

Type : datetime-local.

... zone de texte pour un rendez-vous, par exemple ... ave la date et l'heure ...
... fonctionne avec iOS sur iPhone ...
.. ceci est incomplet pour certains navigateurs ...
Date du rendez-vous :

Type : month.

... zone de texte pour indiquer le mois ...
... fonctionne avec iOS sur iPhone ...
.. ceci est incomplet pour certains navigateurs ...
Le mois :

Type : week.

... zone de texte pour inscrire la semaine ...
... fonctionne avec iOS sur iPhone ...
.. ceci est incomplet pour certains navigateurs ...
La semaine :

Type : number.

... zone de texte pour écrire l'âge ...
... fonctionne avec iOS sur iPhone ...
.. ceci est incomplet pour certains navigateurs ...
Votre âge :

Type : range.

... sélection d'une valeur numérique entre deux valeurs ...
.. ceci est incomplet pour certains navigateurs ...

Type : color.

... valeur des couleurs ou d'une couleur ...
.. ceci est incomplet pour certains navigateurs ...





Exemple d'un formulaire :

... un simple formulaire ... sans mise en forme par le fichier .css ...

Prénom :
Nom :
E-mail :
Date :
Votre URL :
Homme
Femme


... une mise en forme avec présenration sous forme d'un tableau ...



Prénom :
Nom :
E-mail :
Date :
Votre adresse web :
Homme :
Femme :


... design 3 D ...

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





 Menu HTML 5  - 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