Mot-clef : formulaire.

HTML : form

L’ élément HTML form permet de créer des formulaires.
Il peut contenir des éléments input, des cases à cocher, des boutons radio, menus,…
On peut rajouter l’élément label afin de pointer directement vers son élément input.

<form action="" method="get">
  <h6>Identité</h6>
  <p>
    <label for="nom-1">Nom : </label>
    <input id="nom-1" type="text" name="nom-1" />
  </p>
  <p>
    <label for="prenom-1">Prénom : </label>
    <input id="prenom-1" type="text" name="prenom-1" />
  </p>
  <p>
    <input type="submit" value="Envoyer" />
  </p>
</form>

Attributs

Attribut : action

Spécifie l’adresse de destination du formulaire.

Exemple

HTML
<form action="" method="get">
  <h6>Identité</h6>
  <p>
    <label for="nom-1">Nom : </label>
    <input id="nom-1" type="text" name="nom-1" />
  </p>
  <p>
    <label for="prenom-1">Prénom : </label>
    <input id="prenom-1" type="text" name="prenom-1" />
  </p>
  <p>
    <input type="submit" value="Envoyer" />
  </p>
</form>
Identité



Attribut : method

Indique la forme d’envoi des réponses, 2 valeurs possibles :
- Post : correspond à un envoi de données stockées dans le corps de la requête
- Get : correspond à un envoi des données codées dans l’URL, et séparées de l’adresse du script par un point d’interrogation .

Exemple

HTML
<form action="" method="get">
  <h6>Identité</h6>
  <p>
    <label for="nom-2">Nom : </label>
    <input id="nom-2" type="text" name="nom-2" />
  </p>
  <p>
    <label for="prenom-2">Prénom : </label>
    <input id="prenom-2" type="text" name="prenom-2" />
  </p>
  <p>
    <input type="submit" value="Envoyer" />
  </p>
</form>
Identité



Attribut : enctype

Permet de définir le type de fichier à envoyer.
Il peut prendre 3 valeurs :
- application/x-www-form-urlencoded : valeur par défaut, tout les caractères sont encodés avant d’être envoyés.
- multipart/form-data : pas d’encodage, à utilisé lors d’upload de fichier.
- text/plain : les espaces sont remplacés par des + , mais il n’y pas d’encodage special

Exemple

HTML
<form action="" method="get" enctype="text/plain">
  <h6>Identité</h6>
  <p>
    <label for="nom-3">Nom : </label>
    <input id="nom-3" type="text" name="nom-3" />
  </p>
  <p>
    <label for="prenom-3">Prénom : </label>
    <input id="prenom-3" type="text" name="prenom-3" />
  </p>
  <p>
    <input type="submit" value="Envoyer" />
  </p>
</form>
Identité



Attribut : class

Permet de spécifier la classe css à utiliser sur le formulaire.

Exemple

HTML
<form action="" method="get" class="formulaire">
  <h6>Identité</h6>
  <p>
    <label for="nom-4">Nom : </label>
    <input id="nom-4" type="text" name="nom-4" />
  </p>
  <p>
    <label for="prenom-4">Prénom : </label>
    <input id="prenom-4" type="text" name="prenom-4" />
  </p>
  <p>
    <input type="submit" value="Envoyer" />
  </p>
</form>
CSS
.formulaire{
background-color:chocolate;
padding:5px;
}
Identité



Attribut : id

Permet de spécifier l’identifiant css à utiliser sur le formulaire.

Exemple

HTML
<form action="" method="get" id="formulaire">
  <h6>Identité</h6>
  <p>
    <label for="nom-5">Nom : </label>
    <input id="nom-5" type="text" name="nom-5" />
  </p>
  <p>
    <label for="prenom-5">Prénom : </label>
    <input id="prenom-5" type="text" name="prenom-5" />
  </p>
  <p>
    <input type="submit" value="Envoyer" />
  </p>
</form>
CSS
#formulaire{
background-color:yellow;
padding:5px;
}
Identité



Attribut : dir

Permet de spécifier le sens d’écriture du texte. Elle prend 2 valeurs :
- ltr : Left To Right : de gauche à droite(valeur par défaut).
- rtl : Right To Left : de droite à gauche.

Exemple

HTML
<form action="" method="get" dir="rtl">
  <h6>Identité</h6>
  <p>
    <label for="nom-6">اسم : </label>
    <input id="nom-6" type="text" name="nom-6" />
  </p>
  <p>
    <input type="submit" value="تقدم" />
  </p>
</form>
Identité


Attribut : style

Permet d’appliquer un style au formulaire directement dans le html, sans avoir besoin d’une feuille de style.

Exemple

HTML
<form action="" method="get" style="background:#ffaaaa;padding:5px;">
  <h6>Identité</h6>
  <p>
    <label for="nom-7">Nom : </label>
    <input id="nom-7" type="text" name="nom-7" />
  </p>
  <p>
    <label for="prenom-7">Prénom : </label>
    <input id="prenom-7" type="text" name="prenom-7" />
  </p>
  <p>
    <input type="submit" value="Envoyer" />
  </p>
</form>
Identité



Attribut : lang

Permet de spécifier la langue à l’intérieur du formulaire.

Exemple

HTML
<form action="" method="get">
  <h6>Identité</h6>
  <p>
    <label for="nom-8">Surname : </label>
    <input id="nom-8" type="text" name="nom-8" />
  </p>
  <p>
    <label for="prenom-8">Name : </label>
    <input id="prenom-8" type="text" name="prenom-8" />
  </p>
  <p>
    <input type="submit" value="Submit" />
  </p>
</form>
Identité



HTML : textarea

L’ élément HTML textarea permet de créer une zone de saisie de texte dans un formulaire. Il est utilisé avec l’élément form pour créer le formulaire.

<form>
<textarea>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</textarea>
</form>

Attributs

Attribut : disabled

Permet de bloquer la zone de saisie.

Exemple

HTML
<form>
<textarea disabled="disabled">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</textarea>
</form>

Attribut : readonly

Change la zone de saisie, en zone d’affichage seulement.

Exemple

HTML
<form>
<textarea readonly="readonly">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</textarea>
</form>

Attribut : name

Permet de récuperer les données de la zone de saisie.

Exemple

HTML
<form>
<textarea name="texte">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</textarea>
</form>

Attribut : cols

Permet de changer la largeur de la zone de saisie.

Exemple

HTML
<form>
<textarea cols="50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.</textarea>
</form>

Attribut : rows

Permet de changer la hauteur de la zone de saisie.

Exemple

HTML
<form>
<textarea rows="15">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.</textarea>
</form>

Attribut : class

Permet de spécifier la classe css à utiliser sur la zone de saisie .

Exemple

HTML
<form>
<textarea class="texte">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</textarea>
</form>
CSS
.texte{
background-color:chocolate;
}

Attribut : id

Permet de spécifier l’identifiant css à utiliser sur la zone de saisie.

Exemple

HTML
<form>
<textarea id="texte">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</textarea>
</form>
CSS
#corps{
background-color:yellow;
}

Attribut : title

Permet de mettre une infobulle sur le corps de la page HTML.

Exemple

HTML
<form>
<textarea title="zone de saisie">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</textarea>
</form>

Attribut : dir

Permet de spécifier le sens d’écriture du texte. Elle prend 2 valeurs :
- ltr : Left To Right : de gauche à droite(valeur par défaut).
- rtl : Right To Left : de droite à gauche.

Exemple

HTML
<form>
<textarea dir="rtl">أعلنت واندونيسيا،, الى حاملات الأمريكي، قد,</textarea>
</form>

Attribut : style

Permet d’appliquer un style à la zone de saisie directement dans le html, sans avoir besoin d’une feuille de style.

Exemple

HTML
<form>
<textarea style="background-color:grey">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</textarea>
</form>

Attribut : lang

Permet de spécifier la langue à l’intérieur de la zone de saisie.

Exemple

HTML
<form>
<textarea lang="en">
A person with Ubuntu is open and available to others, affirming of others, does not feel threatened that others are able and good, for he or she has a proper self-assurance that comes from knowing that he or she belongs in a greater whole and is diminished when others are humiliated or diminished, when others are tortured or oppressed.
</textarea>
</form>