L'Aide Mémoire Informatisé du petit Luc

Outils pour utilisateurs

Outils du site

Piste:
html

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision 		Révision précédente
html [2016/02/23 13:01]
luc 		html [2018/10/13 20:32] (Version actuelle)
Ligne 171: Ligne 171:
          
     <tr>     <tr>
-        <!-- début nouvelle ligne --> 
  <td>contenu première cellule</td>  <td>contenu première cellule</td>
  <td>etc..</td>  <td>etc..</td>
Ligne 189: Ligne 188:
  
 ===== Les formulaires ===== ===== Les formulaires =====
 +Le concept de formulaire répond au besoin de l'utilisateur (client) d'envoyer des données au serveur, par exemple dans le cas d'un sondage.
 +
 +==== La balise form ====
 +Elle délimite le formulaire :
 +
 <code html5> <code html5>
-<form> délimite le contenu d'un formulaire + 
- <p> il doit obligatoirement contenir une balise <p> si on veut écrire du texte +<form  
- ... +   method="" indique comment les données vont être envoyées 
- </p>+   method="get" 255 carac max, par l'adresse http 
 +   method="post" ne transite pas par la barre d'adresse 
 +    
 +   action=""> indique l'adresse de la page qui se chargera de traiter les informations 
 +   <!-- contenu du formulaire -->
 </form> </form>
-<form method=""> inique comment les données vont être envoyées +
-method="get" 255 carac max, par l'adresse http +
-method="post" ne transite pas par la barre d'adresse +
-<form action=""> indique l'adresse de la page qui se chargera de traiter les informations+
 </code> </code>
  
 ==== Zone de texte à 1 ligne ==== ==== Zone de texte à 1 ligne ====
-<code> +La balise ''input'' permet à l'utilisateur de renseigner une information, par exemple de type texte : 
-<input type="text" /> zone de texte à une ligne + 
-<input type="text" name=".." /> donne un nom à cette zone de texte, pour etre exploitée par php +<code html5> 
-<form ..> <label> permet d'accoler une étiquette à notre champ de saisie + 
- <p> +<form> 
- <label>Votre pseudo</label> : <input /> + 
- </p>+    <input type="text" /> zone de texte à une ligne 
 +    <input type="text" name=".." /> donne un nom à cette zone de texte, pour être exploitée par php 
 + 
 +    <label>Etiquette collée à notre champ de saisielabel><input type="text" /> 
 +     
 +    <label for="x">for pointe sur id pour relier étiquette et champ de saisie</label> 
 +    ... 
 +    <input name="bla" id="x" /> 
 +    
 </form> </form>
-<label for="x">..</label><input name="bla" id="x" /> for pointant sur id permet de lier l'étiquette et la zone de saisie + 
-attribut de la balise <input /> : +<input  
-size="10" taille de l'écriture dans le champ +    size="10" taille de l'écriture dans le champ 
-maxlength="" limite la taille maxi du champ +    maxlength="" limite la taille maxi du champ en nbre de caractères 
-value="pré-remplissage" +    value="pré-remplissage" 
-placeholder="préremplissage qui disparait"+    placeholder="préremplissage qui disparait" 
 +/> 
 </code> </code>
  
 ==== Zone de texte multilignes ==== ==== Zone de texte multilignes ====
-<code> +<code html5> 
-<textarea></textarea> on peut mettre en les balises du texte par défaut (pas besoin de value)+ 
 +<textarea> 
 +on peut mettre du texte par défaut (pas besoin de value) 
 +</textarea> 
 </code> </code>
  
 ==== Types de texte particuliers ==== ==== Types de texte particuliers ====
-<code> +<code html5> 
-<input /> +<input  
-type="password" les caractères saisis ne sont pas visibles +    type="password" les caractères saisis ne sont pas visibles 
-type="email" indique au navigateur qu'une adresse mail doit être renseignée (forme, clavier spécifique sur mobile..) +    type="email" indique au navigateur qu'une adresse mail doit être renseignée (forme, clavier spécifique sur mobile..) 
-type="url" +    type="url" 
-type="tel" +    type="tel" 
-type="number" affichera des petites flèches sur le coté de la case +    type="number" affichera des petites flèches sur le coté de la case 
-min="" valable si type="number" +        min="" valable si type="number" 
-max="" valable si type="number" +        max="" valable si type="number" 
-type="range" renvoi un type numérique sélectionnable à l'aide d'un curseur +    type="range" renvoi un type numérique sélectionnable à l'aide d'un curseur 
-type="color" permet de saisir une couleur +    type="color" permet de saisir une couleur dans une belle palette 
-type="date/time/week/month/datetime" +    type="date/time/week/month/datetime" 
-type="search"+    type="search" 
 +/>
 </code> </code>
  
 ==== Eléments d'option - choix ==== ==== Eléments d'option - choix ====
-<code> +<code html5> 
-<input type="checkbox" /> case à cocher + 
-checked attribut qui signifie que la case est par défaut cochée <input type="checkbox" name="" checked/> +<!-- case à cocher : --> 
-<input type="radio"/> choix unique parmi plusieurs cases à cocher, +<input  
-il est nécessaire que tous les choix aient le même nom (name="") pour que le navigateur sache parmi quels champs de saisie le choix unique doit être fait +    type="checkbox"  
-Il faut aussi mettre un champ value différent pour que php sache quelle valeur a été choisie +    name="case1" 
-<select name="" id=""> crée une liste déroulante permettant de selectionner un valeur parmi une liste définie par les balises <option> +    checked attribut qui signifie que la case est par défaut cochée 
- <option value="">..</option> +/> 
- <option value="" selected>..</option> selected permet de choisir la valeur par défaut+ 
 +<!-- choix unique parmi plusieurs cases à cocher --> 
 +<input 
 +    type="radio" 
 +    name="nomIdentique"         il est nécessaire que tous les choix aient le même nom 
 +    value="unique"              Il faut un champ value différent pour que php sache quelle valeur a été choisie 
 +/> 
 + 
 +<!-- liste déroulante pour sélectionner une valeur parmi une liste définie --> 
 +<select name="" id=""> 
 +    <option value="">OPTION 1</option> 
 +    <option value="" selected>OPTION 2</option>     selected permet de choisir la valeur par défaut
 </select> </select>
 <select> <select>
- <optgroup label="Europe"> permet de grouper des options (alinéa pour les options contenues+ <optgroup label="Europe"> 
 +            <!-- permet de grouper des options -->
  <option>..</option>  <option>..</option>
  <option>..</option>  <option>..</option>
  </optgroup>  </optgroup>
- <optgroup> les groupes ne peuvent pas être sélectionnés + <!-- les groupes ne peuvent pas être sélectionnés -->
- ... +
- </optgroup>+
 </select> </select>
 +
 </code> </code>
  
 ==== Envoi de fichiers ==== ==== Envoi de fichiers ====
-il suffit de rajouter l'attribut enctype="multipart/form-data" à la balise <form>, puis +C'est une méthode simple à l'ergonomie simple. On peut faire plus de nos jours en définissant des zones "draggable" (= où on peut glisser-déposer), il y a plein de snippets sur github. 
-<input type="file" />+<code html5> 
 +<form enctype="multipart/form-data"> 
 +    <input type="file" /> 
 +</form> 
 +</code>
  
 ==== Mise en page de formulaires ==== ==== Mise en page de formulaires ====
-<code> +<code html5> 
-<fieldset> permet de regrouper les différentes zones de saisie +<form> 
- <legend>..</legend> avec un titre +    <fieldset> 
- ... +    <!-- permet de regrouper les différentes zones de saisie (sémantiquement, mais aussi avec un joli cadre) --> 
-</fieldset> +        <legend>Un titre pour mon fieldset</legend> 
-<input autofocus/> sélectionne automatiquement un champ +     
-<input requiered/> rend un champ obligatoire+        <!-- sélectionne automatiquement un champ --> 
 +        <input autofocus/> 
 +         
 +        <!-- rend le champ obligatoire, on ne pourra pas submit s'il n'est pas rempli --> 
 +        <input requiered/> 
 +         
 +    </fieldset> 
 +</form>
 </code> </code>
  
 ==== Validation ==== ==== Validation ====
-<code +La validation d'un formulaire déclenche l'envoi des informations vers le serveur pour traitement. 
-<input type="submit"/> bouton de validation et d'envoi du formulaire +<code html5> 
-<input type="reset"/> réinitialise le formulaire +<form> 
-<input type="image" src=""/> equivalent à submit, mais avec une image dont l'url est indiquée par src +    <!-- bouton de validation standard --> 
-<input type="button" /> bouton générique, nécessite javascript pour effectuer une action sur la page +    <input type="submit"/> 
-value="" permet de modifier le texte à l'intérieur du bouton+     
 +    <!-- réinitialise le formulaire --> 
 +    <input type="reset"/> 
 +     
 +    <!-- equivalent à submit, mais avec une image dont l'url est indiquée par src --> 
 +    <input type="image" src=""/> 
 +     
 +    <!-- bouton générique, nécessite javascript pour effectuer une action sur la page --> 
 +    <input type="button" /> 
 +     
 +    <!-- attribut qui permet de modifier le texte à l'intérieur du bouton de type button ou submit ou .. -->  
 +        value="message personnalisé" 
 + 
 +</form>
 </code> </code>
  
 ==== Auto-validation ==== ==== Auto-validation ====
-<code>+<code html5>
 <form> <form>
-<select name='myfield' onchange='this.form.submit()'> onchange est un event de html5, il execute le script contenu entre guillemet + 
-  <option selected>Milk</option> +    <!-- onchange est un event de html5, il execute le script contenu entre guillemet --> 
-  <option>Coffee</option> +    <select name='myfield' onchange='this.form.submit()'> 
-  <option>Tea</option> +        <option selected>Milk</option> 
-</select> +        <option>Coffee</option> 
-<noscript><input type="submit" value="Submit"></noscript> la balise <noscript>..</noscript> cache ce qui est contenu si les scripts sont activés, sinon les affiche+        <option>Tea</option> 
 +    </select> 
 +     
 +    <!-- la balise <noscript>..</noscript> cache ce qui est contenu si les scripts sont activés, sinon les affiche --> 
 +    <noscript><input type="submit" value="Submit"></noscript>  
 +   
 </form> </form>
 </code> </code>
  
html.1456232490.txt.gz · Dernière modification: 2018/10/13 20:32 (modification externe)

Outils de la page

Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki