Formulaire HTML

Imaginez vous un site commercial sans formulaire de contact ? Nous allons voir comme construire un formulaire de contact en HTML.

Les balises et leurs attributs

Pour construire notre formulaire nous utiliserons les balises form et input.

La balise FORM

Un formulaire se construit impérativement avec la balise <form>. A l’intérieur de cette balise nous ajouterons les champs qui permettrons d’y saisir des informations.

<form>
//déclare un espace de formulaire
</form>

La balise INPUT

<input> déclare un champ ce champ peut contenir différentes type d’informations. Pour différencier les informations il est nécessaire d’utiliser les attributs afin de rendre le formulaire efficace.

Les attributs d’INPUT

La balise INPUT ne suffit donc pas à créer un formulaire, l’attribut permet de définir le types d’informations qui doit être récupéré, tout en proposant différents mode de saisie.

Dans un premier temps nous allons aborder les attributs fondamentaux avant d’observer des attributs plus spécialisés.

Text Input

<input type="text"> défini un champ de texte en une ligne. Il est différent de “textarea” qui permet de saisir du texte et d’utiliser plusieurs lignes.

<form>
  Pseudo :<br>
  <input type="text" name="nom"><br>
  Présentation :<br>
  <input type="text" name="bio">
</form>
Pseudo :

Présentation :

 

Radio Button Input

<input type="radio"> Permet de mettre en place sélection unique parmi plusieurs choix.

<form>
  <input type="radio" name="test" value="1" checked> 1<br>
  <input type="radio" name="test" value="2"> 2<br>
  <input type="radio" name="test" value="3"> ou 3
</form>
1
2
ou 3

Input Submit

C’est bien jolie d’avoir un formulaire mais encore faut-il pouvoir l’envoyer. Nous nous concentrons ici sur l’envoi des données par le formulaire, le traitement des données se fera avec le PHP.

A lire  Background-clip Appliquer un dégradé sur vos titres

<input type="submit" value="Submit"> doit etre utiliser avec <form action="/action_page.php">, il faut définir la page qui va devoir traiter les données du formulaires avant de les envoyer.

<form action="/action_page.php">
 Pseudo :<br> 
 <input type="text" name="nom"><br>
 Présentation :<br> 
 <input type="text" name="bio"> 
 <input type="radio" name="test" value="1" checked> 1<br>
 <input type="radio" name="test" value="2"> 2<br>
 <input type="radio" name="test" value="3"> ou 3<br>
 <input type="submit" value="Submit">
</form>
Pseudo :

Présentation :

1
2
ou 3

L’exemple n’est pas fonctionnel mais en temps normal le formulaire renvoi les informations dans l’url d’appel défini par l’attribut action.

/action_page.php?nom=Mickey&bio=description&test=3

Pour la suite c’est au PHP de prendre la reléve ce que nous verrons dans un autre article.

 

SELECT

Permet de créer une liste déroulante

<select name="code">
  <option value="html">Html</option>
  <option value="css">Css</option>
  <option value="php">Php</option>
  <option value="sql">Sql</option>
</select>

Par défaut c’est le premier élément de la liste qui est sélectionné. Mais vous pouvez définir vous même la valeur par défaut.

<select name="code">
  <option value="html">Html</option>
  <option value="css" selected>Css</option>
  <option value="php">Php</option>
  <option value="sql">Sql</option>
</select>

Ou encore le nombre d’option à afficher dans la liste.

<select name="code" size="2">
  <option value="html">Html</option>
  <option value="css" selected>Css</option>
  <option value="php">Php</option>
  <option value="sql">Sql</option>
</select>

On peut aussi choisir le nombre d’option sélectionnable

<select name="code" size="4" multiple>
<option value="html">Html</option>
<option selected="selected" value="css">Css</option>
<option value="php">Php</option>
<option value="sql">Sql</option>
</select>

Method

Maintenant que nous avons créer le formulaire, il est nécessaire de définir la page qui traitera l’action et la méthode qui nous permettra de transmettre et de manipuler les données transmissent.

Pour ce faire nous allons définir l’attribut method à notre balise form.

© 2018 Occitaweb formation WordPress et média sociaux