Mot-clef : form.

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 : select

L’ élément HTML select permet de créer un menu déroulant dans un formulaire.
Il est utilisé avec l’élément form pour créer le formulaire, et l’ élémentoption pour la liste d’options. 

<form>
<select>
<option>ipsum</option>
<option>dolor</option>
<option>sit amet</option>
</select>
</form>

Attributs

Attribut : disabled

Permet de bloquer le menu déroulant.

Exemple

HTML
<form>
<select disabled="disabled">
<option>ipsum</option>
<option>dolor</option>
<option>sit amet</option>
</select>
</form>

Attribut : selected

Sélectionne le champs par défaut à utilisé.

Exemple

HTML
<form>
<select>
<option selected="selected">ipsum</option>
<option>dolor</option>
<option selected="selected">sit amet</option>
</select>
</form>

Attribut : mutiple

Permet de faire plusieurs sélections.

Exemple

HTML
<form>
<select multiple="multiple">
<option>ipsum</option>
<option>dolor</option>
<option>sit amet</option>
</select>
</form>

Attribut : size

Permet de définir le nombre d’option visible.

Exemple

HTML
<form>
<select size="2">
<option>ipsum</option>
<option>dolor</option>
<option>sit amet</option>
</select>
</form>

Attribut : tabindex

Permet de spécifier l’ordre de tabulation des liens, celui qui possède le plus petit chiffre sera tabulé en premier.

Exemple

HTML
<form>
<select tabindex="2">
<option>ipsum</option>
<option>dolor</option>
</select><br />
<select tabindex="1">
<option>Lorem</option>
<option>sit amet</option>
</select>
</form>

Attribut : class

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

Exemple

HTML
<form>
<select class="menu">
<option>ipsum</option>
<option>dolor</option>
<option>sit amet</option>
</select>
</form>
CSS
.menu{
background-color:chocolate;
}

Attribut : id

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

Exemple

HTML
<form>
<select id="menu">
<option>ipsum</option>
<option>dolor</option>
<option>sit amet</option>
</select>
</form>
CSS
#corps{
font-weight:bolder;
background-color:yellow;
}

Attribut : title

Permet de mettre une infobulle sur le menu.

Exemple

HTML
<form>
<select title="menu">
<option>ipsum</option>
<option>dolor</option>
<option>sit amet</option>
</select>
</form>

Attribut : dir

Permet de spécifier le sens d’écriture des textes du menu. 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>
<select dir="rtl">
<option>أعلنت واندونيسيا،, الى حاملات الأمريكي، قد, </option>
<option>معركة المدنيون بـ أخر.</option>
</select>
</form>

Attribut : style

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

Exemple

HTML
<form>
<select style="font-style:italic; background-color:red;">
<option>ipsum</option>
<option>dolor</option>
<option>sit amet</option>
</select>
</form>

Attribut : lang

Permet de spécifier la langue du menu.

Exemple

HTML
I use :
<form>
<select lang="en">
<option>Windows</option>
<option>Linux</option>
<option>my hands</option>
</select>
</form>

I use :