Fiche Javascript : les formulairesObjet de la fiche :État de la fiche
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Attributs | Commentaire | Syntaxe |
|---|---|---|
| size |
|
size ="2" |
| multiple | Possibilité de sélectionner plusieurs options : | multiple = "multiple" |
Les propriétés
En JavaScript, la structure d'un élément de type SELECT en d'hors des attributs HTML courants type "id", "name" etc met à notre disposition les éléments suivant :
| Propriétés | Commentaires | Compléments | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| selectedIndex | Initialise ou retourne l'indice de la ligne sélectionnée (Attention : ligne 1 : indice=0) |
|
||||||||||
| options | Tableau des lignes |
|
Exemples d'utilisation des propriétés
| Exemple | Résultat | Code utilisé |
|---|---|---|
|
|
|
Note : Lors de l'envoi du formulaire c'est en priorité la valeur de l'option qui est envoyée avec les données de formulaire. Si la valeur n'est pas définie c'est le texte de l'option qui sera envoyé.
Ajouter un élément à une liste :
Syntaxe
var nouvelleOption = new Option(texte, valeur, defaultSelected, selected);
"objet select".options.add (nouvelleOption);
Exemple
Note : La syntaxe ci-dessus n'étant pas comprise par tous les navigateurs nous utiliserons la méthode suivante :
|
Liste de référence |
|
| Nombre d'options 1 |
Supprimer un ou plusieurs éléments de la liste
La méthode remove()
Syntaxe
var x = document.getElementById("mySelect");
x.remove(x.selectedIndex);
Exemple
|
Liste de référence (Sélectionnez le ou les éléments à Supprimer) |
Supprimer le ou les éléments sélectionnés Restaurer toutes les options |
| Nombre d'options 20 |
La mise à NULL de la ou des options sélectionnées
Syntaxe
var x = document.getElementById("mySelect");
x.options[i] = null;
Exemple
L'exemple est strictement identique au précédent. On remplace simplement x.remove(i) par x.options[i] = null;
|
Liste de référence (Sélectionnez le ou les éléments à Supprimer) |
Supprimer le ou les éléments sélectionnés Restaurer toutes les options |
| Nombre d'options 20 |
Les cases à cocher de type checkbox
Syntaxe : <input name="nom" type= "checkbox" />
Une case à cocher peut admettre deux états : checked (coché) et unchecked (non coché). Lorsque la case est cochée la paire nom/valeur envoyée au serveur.
Lorsque vous voulez proposer plusieurs choix qui ne s'excluent pas mutellement vous devez utiliser ce type de bouton. Chaque checkbox est indépendante des autres checbox de la liste, de cette façon la sélection d'une option ne désélectionne pas les autres.
Une checkbox toute seule est utilisée pour valider ou dévalider une action.
Les boutons de type radio
Lorsque vous voulez proposer plusieurs choix qui s'excluent mutellement vous devez utiliser ce type de bouton qui limite automatiquement le choix à une option unique.
Le champ textarea
Généralités
<textarea> définit un champ de texte multiligne au nombre de caractères illimité ,où l'utilisateur peut saisir du texte.
La taille d'affichage d'une text area peut être spécifiée par les attributs cols et rows, ou de meilleure façon au travers des propriétés height et width de CSS.
Syntaxe :
Remarques importantes
-
Déclaration : un point particulier est à noter : l'ouverture et la fermeture de la balise <textarea> doivent être sur la même ligne:
- <textarea placeholder="Texte invite" name="nom" rows=x cols=y /></textarea> est correct
- <textarea placeholder="Texte invite" name="nom" rows=x cols=y /> </textarea> est incorrect car le navigateur considère l'espace comme un caractère et placeholder ne sera pas affiché.
-
<textarea placeholder="Texte invite" name="nom" rows=x cols=y />
</textarea>
est incorrect car le navigateur considère cela comme une nouvelle ligne et placeholder ne sera pas affiché, de plus le curseur sera mal positionné au focus. -
<textarea placeholder="Texte invite" name="nom" rows=x cols=y />
bla bla bla
bla bla bla
.........
</textarea>
est correct car le texte est correctement interprété par le navigateur.
- Style : Initialisez la directive de style resize à none (resize:none) pour ne pas autoriser le redimensionnement automatique.
Les champs cachés de type hidden
Syntaxe : <input type="hidden" name="nom" value= "les données cachées" />
On peut définir des champs dans un formulaire qui ne seront pas visibles par l'utilisateur. Ce type de champ avec l'attribut hidden bien que non visible peut se manipuler de façon classique par du javascript. Son contenu (attribut value) sera transmis avec les autres informations lors de l'envoi du formulaire.
Mais que met-on comme informations dans ce type de champ ?
- Toutes informations concernant l'utilisateur et qui ne peuvent être connues par le serveur lors des échanges comme par exemple la taille de l'écran ou sa résolution, la valeur d'un cookie etc.
- Une combinaison login/Mot de passe encrytée à envoyer au serveur.
Les boutons de type submit, reset, image
Syntaxe
- <input type="submit" name="nom" value="texte" /> où value donne le texte du bouton.
- <input type="reset" name="nom" value="texte" /> où value donne le texte du bouton.
Notes
-
Un submit est la plus part du temps déclenché en appuyant sur le bouton de type submit, mais il peut aussi être déclenché à l'intérieur d'un script ou lors d'un évènement quelconque (onclick, onfocus etc) par la méthode submit() référencée par rapport au formulaire.
Ainsi :
- La même remarque que précédemment peut être appliquée au bouton de type reset. La méthode dans ce cas est reset() référencée par rapport au formulaire.
Exemple de réalisation d'un formulaire de base
Vérifier et/ou Manipuler les données avant l'envoi
Pour cela on utilisera l'évènement onsubmit de la balise form. Lorsque l'utilisateur appuiera sur le bouton "Envoyer" l'évènement onsubmit sera déclenché et on pourra exécuter du code javascript pour vérifier ou manipuler les données avant qu'elles ne soient envoyées. En fin d'exécution de ce code les données seront envoyées à l'adresse définie par l'attribut action="" de la balise form.
La méthode
Si la fonction testDonnées() retourne false action="..." ne sera pas activé. Dans l'autre cas action="..." sera activé.
Exemple de vérification
Notes sur le code
- La valeur des selections "Genre" et "Préférences" n'ont pas à être testées car ils ne peuvent être modifiés en d'hors des sélections proposées.
- Les pattern utilisés pour tester le format des champs de texte pourraient être aussi inclus comme attribut de l'input.
- Le champ mail s'autoteste du fait de son type="email".
- Dans ce formulaire le programme de test retourne false même si toutes les données vérifiées sont conformes, afin de ne pas propager l'évènement et recharger la page.
Comment envoyer les données du formulaire
Les données sont envoyées à l'adresse définie dans l'attribut action lorsque l'utilisateur clique sur le bouton submit.
2 méthodes sont possibles avec l'attribut method de la balise form.
-
La méthode GET (method = "get") est la valeur de méthode par défaut.
Avec cette méthode, les données du formulaire sont encodées dans une URL qui est composée du nom de la page ou du script à charger avec les données de formulaire (référencées par leur attribut name) empaquetée dans une chaîne de caractères. Les données sont séparées de l'adresse de la page pas le caractère ? et entre elles par le caractère &.Exemple :
http://monwebfacile.free.fr/Tutoriaux/JVS/Demos/JVS_Demo_Formulaires_02A.htm?n_genre=Mr&n_nom=Boubil&n_prenom=Maxime&n_mail=boubil.maxime%40orange&n_telFixe=0101020304&n_telMobile=0612131415&n_fichier=
- http://monwebfacile.free.fr/Tutoriaux/JVS/Demos/JVS_Demo_Formulaires_02A.htm est la page serveur définie dans l'attribut action
- ?n_genre=Mr&n_nom=Boubil&n_prenom=Maxime&n_mail=boubil.maxime%40orange&n_telFixe=0101020304&n_telMobile=0612131415&n_fichier= sont les données du formulaire référencées par leur attribut name
Limitations :
- les données de formulaire doivent être uniquement des codes ASCII.
- La taille d'une URL est limitée par le serveur à environ 2000 caractères, en comprenant les codes d'échappement.
- Les informations sont disponibles en clair dans l'URL
-
La méthode POST (method = "post") est indispensable pour la transmission des codes non ASCII, des données de taille importante, des fihiers et pour les données sensibles. Les données (toujours référencées par leur attribut name) transférées ne sont pas visible dans l'URL.
Limitations :
Avec la méthode POST, on doit intégrer du code PHP (ou autre langage) dans la page destinatrice.
Comment récupérer les données du formulaire
Quelque soit le mode, les données transférées et reçues sont référencées par leur attribut name.
Données envoyées par la méthode "get"
Généralités
Comme on a vu précédemment les données reçues au travers d'une URL se présentent sous la forme suivante :
http://monwebfacile.free.fr/Tutoriaux/JVS/Demos/JVS_Demo_Formulaires_02A.htm?n_genre=Mr&n_nom=Boubil&n_prenom=Maxime
Ou
- Page qui reçoit les formulaire => http://monwebfacile.free.fr/Tutoriaux/JVS/Demos/JVS_Demo_Formulaires_02A.htm
- Début des données => ?
- Donnée 1 => n_genre=Mr
- Séparateur de donnée => &
- Donnée 2 => n_nom=Boubil
- Séparateur de donnée => &
- Donnée 3 => n_prenom=Maxime
- ..................
Méthode de récupération
Pour faciliter la récupération de ces informations voici une petite fonction (ne comportant que des instructions connues) permettant d'extraire les données de l'URL, même si celle ci contient plusieurs choix pour un même <select>.
Note sur la fonction et le mode de récupération
-
Dans le cas de paramètre unique il suffit d'exécuter paramURL("n_nom") pour récupérer le paramètre référencé par n_nom (n_nom=Malèdré Maurin).
var nom = paramURL("n_nom"); -
Dans cas de plusieurs paramètres avec une même référence (cas de liste multiples par exemple), il faut récupérer et exploiter le tableau des paramètres. Par exemple &n_preferences=Croisières&n_preferences=Randonnées :
var reference1 = paramURL("n_preferences")[0];
var reference2 = paramURL("n_preferences")[1];
Note sur decodeURIComponent()
Lorsqu'on saisie une URI(Uniform Resource Identifier), c'est à dire une adresse internet avec des paramètres telle que celle définie dans l'exemple suivant :
JVS_Demo_Formulaires_03.htm?n_genre=Mr&n_nom=Malèdré Maurin&n_prenom=Joël&n_preferences=Croisières
&n_preferences=Randonnées
On reçoit coté serveur une chaine équivalente dont tous les caractères spéciaux (accents, espaces etc) sont remplacés par leur équivalent hexa en utf-8. Par exemple é sera remplacé par %C3%E8, espace sera remplacé par %20 etc.
JVS_Demo_Formulaires_03.htm?n_genre=Mr&n_nom=Mal%C3%A8dr%C3%A9%20Maurin&n_prenom=Jo%C3%ABl&n_preferences=Croisi%C3%A8res&n_preferences=Randonn%C3%A9es
decodeURIComponent() permet de retrouver la chaine initiale, afin de pouvoir l'exploiter normalement.
Remarques :
- La méthode decodeURI() retourne aussi une URI décodée, mais cette méthode ne décode pas la présence des caratères suivant : ":", "/", ";", et "?".
- Ces méthodes font partie d'un ensemble de méthodes avec entre autres encodeURI(), encodeURIComponent(), decodeURI().
| Exemples URL | Résultat encodeURI() | Résultat decodeURI() |
|---|---|---|
| http://web.toto.fr?us=télé&pas=Dd %?r##deb | ||
| Résultat encodeURIComponent() | Résultat decodeURIComponent() | |
Exemple de récupération
Note : Pour faciliter la démonstration les données du formulaire sont renvoyées sur la même page HTML. Si des données reçues sont détectées lors de l'appel de la page , elles seront affichées dans un cadre spécifique.
Données envoyées par la méthode "post"
Généralités
Avec la méthode POST, on doit intégrer du code PHP (ou autre langage) dans la page destinatrice. Si vous voulez accéder à des donnéees de formulaires à l'aide d'une page de type maPage.html ou maPage.htm vous obtiendrez le résultat suivant :
Erreur 405 : Méthode utilisée par le client non acceptée par le serveur.
Si votre page est hebergée sur un serveur pouvant exécuter du PHP, il faut que la page réceptrice soit de type PHP et que le code PHP qu'elle contient puisse récupérer les données de l'URL. On verra dans le chapitre suivant (PHP) comment fonctionne ce mécanisme.
Méthode de récupération façon PHP
Par $_POST[] qui est un tableau associatif des valeurs passées au script courant via le protocole HTTP et la méthode POST lors de l'utilisation de la chaîne application/x-www-form-urlencoded ou multipart/form-data comme en-tête HTTP Content-Type dans la requête.
Par $_FILES[][] qui est un tableau (référencé par l'attribut 'name' du formulaire) qui reçoit les données des fichiers transférés.
Exemple
Note : Pour faciliter la démonstration les données du formulaire sont renvoyées sur la même page php. Si des données reçues sont détectées lors de l'appel de la page , elles seront affichées dans un cadre spécifique.
Note : htmlspecialchars() est une fonction PHP qui s'assure que tous les caractères spéciaux HTML sont proprement encodés afin d'éviter des injections de balises HTML et de Javascript dans vos pages.
Personnaliser le formulaire
Vous trouverez ici quelques idées pour rentre un formulaire un peu plus funny.
Le bouton de type file
Généralités
Ce bouton est de base assez austère et ne se prête pas beaucoup aux personnalisations de type CSS.
Un exemple simple à mettre en oeuvre
|
Un élément <label> peut être utilisé pour styliser trés simplement et trés rapidement une sélection de fichier. Vous pouvez alors utiliser des styles à votre convenance sur l'élément <label>. |
|
Un exemple plus sophistiqué
Construction de base
| La première chose à faire est de définir le bouton dans un div pour lequel on va préciser des dimensions de largeur et de hauteur à notre convenance ainsi que les valeurs de style que l'on désire lui donner. On peut ne pas définir de hauteur dans le div et dans ce cas sa hauteur sera celle du input. |
|
| La seconde chose est de donner à input les même dimensions que définies pour le div. Lorsque la hauteur de l'élément input est définie il est préférable de ne plus définir la hauteur du div car cela se fera alors automatiquement. De plus il faut masquer le bouton d'origine et pour cela lui affecter une opacity de 0. Maintenant si vous cliquez sur le carré sombre vous obtiendrez le même résultat (accés aux fichiers) qu'avec le bouton classique. |
|
Rajouter du texte
| On va rajouter un div conteneur du texte à afficher et régler saposition sur le bouton. |
Sélection
|
Rajouter une image
En background du divOn va utiliser background-image:url('../Images/telechargeFichiers.jpg') dans le contener général pour déclarer l'image. |
Sélection |
A l'intérieur du divIl suffit d'insérer une image en position absolute (top 0px, left 0px) à l'intérieur du div. Il n'est même pas nécessaire de préciser les dimensions du div : l'image prendra automatiquement sa place et dimensionnera le div en conséquence. Border-radius est reporté au niveau de l'image. On notera le z-index pour mettre le texte au-dessus de l'image, et cursor:pointer au niveau du div pour couvrir à la fois l'image et le texte. |
Sélection 
|
Survol du bouton
| Les actions applicables sont toutes celles permisses par CSS et les styles appliquées à l'élément div. L'exemple qui est donné ci-dessous offre une diminution d'opacité du bouton lors de son survol. |
Sélection
|
Afficher le fichier sélectionné
| Il s'agit d'un affichage classique avec mise à jour de l'information par un innerHTML sur un onchange de input. |
Sélection
Nom du fichier séléctionné |
Le bouton select : Liste avec barre de scrolling horizontale
Souvent un select se présente sous la forme suivante : mais on peut aussi en jouant avec l'attribut "size" afficher plusieurs lignes de façon à proposer une liste de sélection.
Que faire lorsque l'affichage des options dépasse la taille de la sélection ?
En effet une liste de sélection propose nativement un ascenceur vertical lorsque le nombre d'article à afficher dépasse le nombre d'articles défini par l'attribut size mais rien lorsque l'affichage horizontal des articles dépasse la largeur définie par l'attribut width pour la sélection. Nous allons voir comment résoudre ce petit problème à l'aide d'un exemple.
|
1. Voici un exemple de liste de sélection avec le libellé de l'un des champ trés grand. Sans autre spécification sur la liste cette dernière occupera l'espace correspondant à l'article le plus long. |
|
|
|
|
| 2. Dans un formulaire comportant beaucoup de champs, occuper un tel espace peut poser des problèmes de présentation. On va donc donner une taille limite à notre liste de sélection ( style="width:150px"). Mais bon c'est plus joli mais pas trés pratique car on ne peut voir l'ensemble des informations relatives à l'option3. | |
|
|
|
| 3. On va d'une part utiliser la propriété overflow |
|
|
|
|
Le bouton select : quelques exemples de style
| Standard | Style options | Arrière plan/optiongroup |
|---|---|---|
|
|
|
|
|
|
|
|
| Nouvelle flèche | Base div/javascript | |
|
|
|
|
|
|
|
Le bouton select et placeholder
Définition et utilisation de l'attribut placeholder
Cet attribut spécifie une courte information qui décrit la valeur attendue d’un champ d’entrée (p. ex., une valeur d’échantillon ou une brève description du format prévu).
L'information est affichée dans le champ d’entrée avant que l’utilisateur n’entre une valeur.
Cet attribut fonctionne avec les types d’entrée suivants : texte, recherche, url, tel, email et mot de passe.
Comme on peut le voir cet attribut trés pratique n'est pas disponible pour le bouton select. Nous allons voir comment le simuler.
Méthode
| HTML | Résultat | Commentaires |
|---|---|---|
|
|
(Ctrl + F5 pour réinitialiser)
|
Les boutons de type radio ou checkbox
| CSS | HTML | Résultat |
|---|---|---|
|
|
|
Cliquer sur le bouton pour sélectionner ou désélectionner.
|
