Create your own awesome maps

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account?
Log In

Les formulaires - HTML5 by Mind Map: Les formulaires - HTML5
0.0 stars - 0 reviews range from 0 to 5

Les formulaires - HTML5

Compteur numérique

Number

Exemple

Renseigne une valeur numérique.

Attributs

min, valeur minimal du compteur

max, valeur maximal du compteur

step, L'avancement du compteur

value, Valeur de départ du compteur

Etiquetage

<label> </label>

Exemple

nom

Les boutons

Cases à cocher

cheackbox

Exemple

bouton radio

radio

Attributs, checked, Présélectionne le bouton radio

Important, Mettre un name différent par groupe de bouton radio

Exemple

Envoyer

submit

Annulation

reset

Zone de texte

<textarea> </textarea>

Zone de texte de plusieurs lignes

Attributs

rows, Nombre de lignes visibles en hauteur de la zone

cols, Nombre de caractères visibles en largeur de la zone

Liste déroulante

select

Exemple :

france maroc chine

selected

choisir un pays

sélection par défaut

optgroup

créer des groupes

size

  internet explorer firefox chrome safari

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

multiple

internet explorer firefox chrome safari

choix multiple dans une liste

Les input

email

Exemple

url

Exemple

tel

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

nombre

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

Minimum-max, min="5" max="10"

Avancement, step="2"

Exemple

Curseur

range

Exemple

Saisir une couleur

color

Exemple

Transfert de fichiers

file

Exemple

Saisir une date

date

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

Mot de passe

Exemple

Recherche

search

Exemple

Texte

taille du champ, size="4"

limite de caractères, maxlength="5"

Zones de saisie

Libellés

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

Exemple

Monoligne

Texte, <input type="text" name="pseudo">, Exemple

Les attributs, size="50", nombre de caractères visibles, maxlength="10", caractère maximal autorisé, value="texte", Inscrit la valeur dans le champ, placeholder="votre prénom ici", Renseigne sur le contenu à saisir, readonly, Valeur attribuée par defaut à la ligne, autofocus, Donne le focus "la saisie" sur la ligne sélectionnée, required, Rend le champ obligatoire à la saisie, pattern="[0-9] {5}, Encodage numérique obligatoire, Valeur comprise entre 0 et 9, La valeur doit contenir 5 chiffres

Multiligne

<textarea> </textarea>

Fondamentaux

Le construire

<form> </form>

L'organiser

<fieldset> </fieldset>

<legend> </legend>

Regrouper les éléments d'un fomulaire

Exemple

Regrouper les zones

<fieldset> </fieldset>

les identifier, <legend> groupe1 </legend>

Important :

pas de traitement de formulaire en HTML et CSS

L'auteur : Olivier Legrand

Formateur du Web

Olivier Legrand - Concepteur pédagogique multimédia

Les Attributs obligatoires

method

get, les données transitent par l'url

post, pour la majorité des cas

action

la redirection du formulaire

Attribut obligatoire pour une validation en W3C

Le code

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