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:41]
luc 		html [2018/10/13 20:32] (Version actuelle)
Ligne 245: Ligne 245:
 <code html5> <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"
Ligne 293: Ligne 293:
  
 ==== 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.1456306863.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