Les formulaires - HTML5

Commencez. C'est gratuit
ou s'inscrire avec votre adresse courriel
Rocket clouds
Les formulaires - HTML5 par Mind Map: Les formulaires - HTML5

1. Compteur numérique

1.1. Number

1.2. Exemple

1.3. Renseigne une valeur numérique.

1.4. Attributs

1.4.1. min

1.4.1.1. valeur minimal du compteur

1.4.2. max

1.4.2.1. valeur maximal du compteur

1.4.3. step

1.4.3.1. L'avancement du compteur

1.4.4. value

1.4.4.1. Valeur de départ du compteur

2. Etiquetage

2.1. <label> </label>

2.2. Exemple

3. Les boutons

3.1. Cases à cocher

3.1.1. cheackbox

3.1.2. Exemple

3.2. bouton radio

3.2.1. radio

3.2.2. Attributs

3.2.2.1. checked

3.2.2.1.1. Présélectionne le bouton radio

3.2.3. Important

3.2.3.1. Mettre un name différent par groupe de bouton radio

3.2.4. Exemple

3.3. Envoyer

3.3.1. submit

3.4. Annulation

3.4.1. reset

4. Zone de texte

4.1. <textarea> </textarea>

4.1.1. Zone de texte de plusieurs lignes

4.2. Attributs

4.2.1. rows

4.2.1.1. Nombre de lignes visibles en hauteur de la zone

4.2.2. cols

4.2.2.1. Nombre de caractères visibles en largeur de la zone

5. Liste déroulante

5.1. select

5.2. Exemple :

5.3. selected

5.3.1. sélection par défaut

5.4. optgroup

5.4.1. créer des groupes

5.5. size

5.5.1. Définit le nombre d'éléments du menu

5.6. multiple

5.6.1. choix multiple dans une liste

6. Les input

6.1. email

6.1.1. Exemple

6.2. url

6.2.1. Exemple

6.3. tel

6.3.1. <input type="tel" name="tel" id="tel" />

6.4. nombre

6.4.1. <input type="number" name="number" id="number" />

6.4.2. Minimum-max

6.4.2.1. min="5" max="10"

6.4.3. Avancement

6.4.3.1. step="2"

6.4.4. Exemple

6.5. Curseur

6.5.1. range

6.5.2. Exemple

6.6. Saisir une couleur

6.6.1. color

6.6.2. Exemple

6.7. Transfert de fichiers

6.7.1. file

6.7.2. Exemple

6.8. Saisir une date

6.8.1. date

6.8.2. <input type="date" name="date" id="date"/>

6.9. Mot de passe

6.9.1. Exemple

6.10. Recherche

6.10.1. search

6.10.2. Exemple

6.11. Texte

6.11.1. taille du champ

6.11.1.1. size="4"

6.11.2. limite de caractères

6.11.2.1. maxlength="5"

7. Zones de saisie

7.1. Libellés

7.1.1. <label for="pseudo"> votre pseudo </label>

7.1.2. Exemple

7.2. Monoligne

7.2.1. Texte

7.2.1.1. <input type="text" name="pseudo">

7.2.1.1.1. Exemple

7.2.2. Les attributs

7.2.2.1. size="50"

7.2.2.1.1. nombre de caractères visibles

7.2.2.2. maxlength="10"

7.2.2.2.1. caractère maximal autorisé

7.2.2.3. value="texte"

7.2.2.3.1. Inscrit la valeur dans le champ

7.2.2.4. placeholder="votre prénom ici"

7.2.2.4.1. Renseigne sur le contenu à saisir

7.2.2.5. readonly

7.2.2.5.1. Valeur attribuée par defaut à la ligne

7.2.2.6. autofocus

7.2.2.6.1. Donne le focus "la saisie" sur la ligne sélectionnée

7.2.2.7. required

7.2.2.7.1. Rend le champ obligatoire à la saisie

7.2.2.8. pattern="[0-9] {5}

7.2.2.8.1. Encodage numérique obligatoire

7.2.2.8.2. Valeur comprise entre 0 et 9

7.2.2.8.3. La valeur doit contenir 5 chiffres

7.3. Multiligne

7.3.1. <textarea> </textarea>

8. Fondamentaux

8.1. Le construire

8.1.1. <form> </form>

8.2. L'organiser

8.2.1. <fieldset> </fieldset>

8.2.2. <legend> </legend>

8.2.3. Regrouper les éléments d'un fomulaire

8.2.4. Exemple

8.3. Regrouper les zones

8.3.1. <fieldset> </fieldset>

8.3.2. les identifier

8.3.2.1. <legend> groupe1 </legend>

8.4. Important :

8.4.1. pas de traitement de formulaire en HTML et CSS

9. L'auteur : Olivier Legrand

9.1. Formateur du Web

9.2. Olivier Legrand - Concepteur pédagogique multimédia

10. Les Attributs obligatoires

10.1. method

10.1.1. get

10.1.1.1. les données transitent par l'url

10.1.2. post

10.1.2.1. pour la majorité des cas

10.2. action

10.2.1. la redirection du formulaire

10.2.2. Attribut obligatoire pour une validation en W3C

10.3. Le code

10.3.1. <form method="post" action="traitement.php">