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/24 09:29]
luc 		html [2018/10/13 20:32] (Version actuelle)
Ligne 234: Ligne 234:
  
 ==== 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 ====
 +La validation d'un formulaire déclenche l'envoi des informations vers le serveur pour traitement.
 <code html5> <code html5>
-<input type="submit"/> bouton de validation et d'envoi du formulaire +<form> 
-<input type="reset"/> réinitialise le formulaire +    <!-- bouton de validation standard --> 
-<input type="image" src=""/> equivalent à submit, mais avec une image dont l'url est indiquée par src +    <input type="submit"/> 
-<input type="button" /> bouton générique, nécessite javascript pour effectuer une action sur la page +     
-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.1456306181.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