HTML - Formulaires

  »   HTML  »   Tutoriel HTML - Créer des formulaires en HTML

Les formulaires sont parmi les outils les plus importants utilisés par un webmaster pour récolter d'importantes informations sur un utilisateur internet, de l'information tel qu'un e-mail, nom, adresse, téléphone ou n'importe quelle autre sorte d'information.

En cas de besoin l'information peut même être stockée dans un fichier, vous pouvez faire des statistiques, formulaires d'inscription ou de souscription à l'information présentée dans votre page internet, et pleins d'autres.

HTML - Champs de texte

Avant de rentrer dans les détails, nous devons exposer un peu les bases d'un formulaire. Les champs de texte ont quelques attributs qui doivent être mentionnés pour commencer:

  • type - établit le type de champ de texte. Par exemple: texte, envoi, ou mot de passe.
  • name - donne un nom au champ pour référence ultérieure.
  • size - définit la taille du champ.
  • maxlenght - la valeur maximale des caractères qui peuvent être tapés.
html<form method="post" action="mailto:votreemail@email.com">
	Name: <input type="text" size="10" maxlength="40" name="name" /><br />
	Password: <input type="password" size="10" maxlength="10" name="password" />
</form>

Demo

Name:
Password:

N'UTILISEZ PAS ce code. Les données du formulaire ne seront pas encryptées et ne seront pas sûres en terme de sécurité.

HTML - Email formulaires

Ajoutons le bouton d'envoi à présent. Généralement, le bouton d'envoi doit être le dernier et avoir l'attribut nommé 'Send', 'Submit', ou quelque chose comme ça.

Nous devons aussi spécifier une destination pour les données entrées dans le formulaire, tout comme le mode de transfert. Cela peut être fait en ajoutant les attributs de formulaires suivants:

  • method - Nous utiliserons le "post" method. Cela envoie le formulaire avec l'information insérée sans afficher les données de l'utilisateur.
  • action - Cela sera utilisé pour spécifier l'URL ou l'information sera envoyée.
html<form method="post" action="mailto:votreemail@email.com">.

	Name: <input type="text" size="10" maxlength="40" name="name" /><br />
	Password: <input type="password" size="10" maxlength="10" name="password" /><br />
	
	<input type="submit" value="Send" />
	
</form>

Demo

. Name:
Password:

Changez simplement ladresse e-mail en une existante pour que cela fonctionne!

HTML - Boutons Radio

Les boutons radio sont très populaires, utiles et faciles à utiliser. L'exemple le plus utilisé serait une question avec plus d'un choix de réponses. Les attributs que vous devez connaitre sont les suivants:

  • value - spécifie ce qui sera envoyé si l'utilisateur sélectionne un certain bouton. Seulement une valeur sera envoyée.
  • name - décide à quel ensemble de boutons appartient le bouton sélectionné.
html<form method="post" action="mailto:votreemail@email.com">
	<p>Quel type de chaussures vous portez ?</p>
	
	<label>Color:</label> <br />
	<input type="radio" name="color" value="sombre" /> Sombres <br />
	<input type="radio" name="color" value="clair" /> Claires <br />
	
	<label>Size:</label> <br />
	<input type="radio" name="size" value="petite" /> Petites <br />
	<input type="radio" name="size" value="moyenne" /> Moyennes <br />
	<input type="radio" name="size" value="grande" /> Grandes <br />
	
	<input type="submit" value="M'envoyer un Email" />
</form>

Demo

Quel type de chaussures vous portez ?


Sombres
Claires

Petites
Moyennes
Grandes

Si vous remplacez l'adresse email par la votre vous recevrez un email avec: 'size=(choisir) color=(choisir)'.

HTML - Case à cocher

En utilisant les cases à cocher l'utilisateur à la possibilité de choisir une, deux ou plus, variantes de réponses. Les attributs name et value sont utilisés de la même maniere que pour le bouton radio.

html<form method="post" action="mailto:votreemail@email.com">
	<p>Quelle couleur de chaussures vous préférez?</p>

	<input type="checkbox" name="shoes" value="noires" /> Simple Noires <br/>
	<input type="checkbox" name="shoes" value="blanches" /> Simple Blanches <br/>
	<input type="checkbox" name="shoes" value="grises" /> Nuances de gris <br/>
	<input type="checkbox" name="shoes" value="noires&blanches" /> Noires et blanches<br/>
	
	<input type="submit" value="M'envoyer un Email" />
</form>

Demo

Quelle couleur de chaussures vous préférez?

Simple Noires
Simple Blanches
Nuances de gris
Noires et blanches

HTML - D'autres types de formulares de liste

Un autre modèle de formulaire de liste est le suivant, dans lequel cas l'utilisateur sélectionne une certaine ligne qui sera envoyée comme l'option choisie.

html<form method="post" action="mailto:votreemail@email.com">
	<p>Préférences musicales</p>
	
	<select multiple name="musique" size="4">
		<option value="emo" selected>Emo</option> 
		<option value="metal/rock" >Metal/Rock</option> 
		<option value="hiphop" >Hip Hop</option> 
		<option value="ska" >Ska</option> 
		<option value="jazz" >Jazz</option> 
		<option value="country" >Country</option> 
		<option value="classique" >Classique</option> 
		<option value="alternative" >Alternative</option> 
		<option value="retro" >Retro</option> 
		<option value="techno" >Techno</option> 
	</select><br />
	
	<input type="submit" value="M'envoyer un Email" />
</form>

Demo

Préférences musicales


Un autre modèle de formulaire est le menu 'déroulant'. Cela sera affiché comme un champ, qui montrera ensuite une liste lorsqu'un clic aura été effectué dessus.

html<form method="post" action="mailto:votreemail@email.com">
	<p>Niveau d'éducation?</p>
	
	<select name="education">
		<option>Choisir</option>
		<option>Lycée </option> 
		<option>College</option>
		<option>Doctorat</option>
	</select><br />
	
	<input type="submit" value="M'envoyer un Email" />
</form>

Demo

Niveau d'éducation?


HTML - Formulaire d'Upload

Premièrement il doit être mentionné que ce formulaire est seulement l'interface, la partie visible avec lequel l'utilisateur sera capable de travailler. Pour créer un formulaire d'upload complet des connaissances et compétences en PHP et PERL, sans mentionner javascript, sont requises.

Un formulaire d'upload est composé de plusieurs parties. Nous commencerons par établir la taille du fichier qui sera uploadé. Cela est fait en utilisant un champ caché. Après cela, nous créérons le champ dans lequel l'utilisateur sera capable d'écrire l'adresse du fichier ou sera capable de le rechercher dans une fenêtre 'explorateur'.

html<input type="hidden" name="MAX_FILE_SIZE" value="100" /> <input name="file" type="file" />

Demo

HTML - Zones de Texte, commentaires

Généralement, les zones de texte sont utilisées pour envoyer des commentaires. Les blogs et forums sont les pages internet principales qui utilisent ce genre d'options. Néanmoins, il y a beaucoup de sites qui utilisent ces zones de texte pour découvrir l'opinion de leur utilisateur sur un certain sujet.

Pour créer une zone de texte nous spécifierons tout d'abord les attributs rows et cols à l'intérieur de la balise <textarea> . 'Rows' définira la hauteur du champ, et 'cols' sa longueur, en terme de caractères. Dans l'exemple suivant il y a 5 lignes de 20 caractères chacun. Aussi, nous devons spécifier les attributs de la balise warp, ceux-ci étant:

  • wrap=
    1. "off"
    2. "virtuel"
    3. "physique"
html<form method="post" action="mailto:votreemail@email.com">

	<textarea rows="5" cols="20" wrap="physique" name="commentaires">Ecrivez un commentaire</textarea><br />
	<input type="submit" value="M'envoyer un Email" />
	
</form>

Demo


Aussi, il est important de mentionner que tout ce que vous écrirez sera montré à l'intérieur de la zone de texte.