Home > Developpement Web > HTML5 – Les formulaires

HTML5 – Les formulaires

Lorsque nous travaillons sur des pages HTML la notion de formulaire vient souvent sur le tapis. Le formulaire permet, couplé avec du PHP, de rendre interactif votre site en permettant a l’utilisateur de remplir des informations. En clair avec les formulaires vous pouvez par exemple créer une page de contact, faire un questionnaire, une page de connexion / inscription, un champs de recherche etc…

Dans un premier temps je vais vous présenter l’architecture d’un formulaire :

<form id="monFormulaire" method="POST" action="maPage.php">
    <fieldset>
        <legend>Mon formulaire de contact</legend>
        <label for="nm">Nom</label>
        <input name="nom" type="text" id="nm" ><br>
        <label for="pr">Prénom</label>
        <input name="prenom" type="text" id="pr" ><br>
        <label for="ms">Message</label>
        <textarea id="ms" name="message"></textarea><br>
        <input type="submit" value="Envoyer">
    </fieldset>
</form>

Nous allons maintenant voir en détails les diverses balises que je viens d’utiliser :

<form> :

La balise formulaire permet de regrouper l’ensemble des champs vous permettant de recueillir des informations auprès de l’utilisateur. L’attribut method vous permet de définir la méthode utilisée pour transmettre les informations de votre formulaire (GET ou POST). L’attribut action vous permet de définir la cible de votre formulaire.

<fieldset> :

Fieldset (Groupe de champs) vous permet de regrouper les champs traitant du même thème afin d’améliorer la compréhension de l’utilisateur. 

<legend> :

Cette balise est obligatoirement associée a un <fieldset>, elle vous permet de créer une légende et d’améliorer l’accessibilité.

<label> :

Le label est une étiquette que vous associez a un <input> a l’aide de l’attribut for qui lui se rapportera a l’attribut id du champs en question. 

<input> :

La balise <input> correspond à votre élément interactif pour votre formulaire. Vous devez définir un attribut type :
 
  • text
  • password
  • checkbox
  • radio
  • submit
  • reset
  • file
  • hidden
  • image
  • button
  • datetime
  • datetimelical
  • date
  • month
  • time
  • week
  • number
  • range
  • email
  • url
  • search
  • tel
  • color

<textarea> :

Cette balise correspond un champs texte multiligne, vous pouvez ajouter l’attribut wrap permettant d’insérer des sauts de ligne, ou l’attribut soft qui lui ne le permet pas.
Comme vous avez pu le constater je n’ai évidement pas utilisé toutes les balises possibles et leurs attributs dans cet exemple… Donc voici la liste de ce que vous pouvez utiliser pour vos formulaires.

<button> :

 Cette balise vous permet de créer comme son nom l’indique un bouton. Vous pourrez lui ajouter des actions en javascript.
 
<button>Mon bouton</button>

<select> :

Un select vous permet de créer des listes, couplé a des <optgroup> et / ou <option>.
 
<select name="Sexe">
	<option value="H">Homme</option>
	<option value="F">Femme</option>
</select>

<option> :

Option dans la liste <select>, retournant la value de l’élément sélectionné lors de l’envoie du formulaire. Vous pouvez ajouter l’attribut selected afin de définir l’élément sélectionné par défaut.

<optgroup> :

Cette balise permet d’englober plusieurs <option> sous l’attribut label.

<output> :

Cette balise est une balise de contenu vous permettant d’afficher le résultat d’une opération définie en JavaScript. L’attribut for reçoit les différents id des champs concernés séparés par un espace.
 
<form onsubmit="return false;" oninput="out.value = parseInt(a.value) + parseInt(b.value);">
	<input name="a" id="a" type="number"> +
	<input name="b" id="b" type="number"> =
	<output name="out" for="a b"></output>
</form>

<progress> :

Comme son nom l’indique représente une barre de progression manipulable avec javascript.
 
<progress max="100" value="50" id="progress"><span>50</span>%</progress>
<script>document.getElementById('progress').value=75</script>

<meter> :

Vous pouvez représenter des jauges avec cette balise. cela vous permet de refléter un état.
 
<meter min="0" max="100" value="40"> 40 sur 100</meter>

<datalist> :

Cette balise vous permet de lier une liste de suggestion a un <input> elle permet de définir une auto-suggestion ou auto-complétion.
 
<input list="list" name="moteurRecherche">
<datalist id="list">
	<option label="Google" value="google" >
	<option label="Bing" value="bing" >
	<option label="Yahoo!" value="yahoo" >
</datalist>

<keygen> :

Générateur de clés de type keytype (rsa, …)
 
<keygen keyvalue="rsa"></keygen>

Je vous invite a visiter l’article HTML5- Introduction qui traite de l’architecture et de la hiérarchisation de vos pages.

Mots clefs menant à cette page :

About Thomas Ferney

Thomas Ferney
Etudiant en 5eme année d'informatique, Co-créateur d'horizonduweb, Auto entrepreneur passionné par le Web et les nouvelles technologies.

Voir aussi

Hack, le nouveau PHP par Facebook

Facebook a annoncé sur son blog développeurs la sortie de Hack : un nouveau langage ...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Afin de vous remercier, Horizon Du Web utilise KewordLuv. Entrez votre_Nom@vos Mots Clefs dans le champ "Nom" pour bénéficier de cette option. Les commentaires constructifs, utiles et de plus de 400 caractères seront mis en dofollow.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Lire les articles précédents :
Comment sublimer vos développements avec Sublime Text – 1ère partie

Les éditeurs de textes, tout un programme ! En effet, chacun y va de sa ...

Fermer