Galactic Civilizations 3
Programmer en html - Les formulaires

Programmer en html - Les formulaires

Catégorie: Javascript.
Posté par le 28/05/2014.
Dernière mise à jour le 28/05/2014.

<<Tutoriel précédent 

Description

Dans ce tutoriel, vous apprendrez comment ajouter des formulaires dans votre page html.

Introduction

Ce tutoriel peut être réalisé à l'aide d'un simple éditeur de texte comme le « bloc notes ». Il ne nécessite aucun prérequis.

Les formulaires

Les formulaires sont utilisés pour recueillir des données entrées par un utilisateur. Ils peuvent être utilisés comme une interface pour une application web, par exemple, ou pour envoyer des données.

Tous seuls, les formulaires ne sont pas très utiles. Ils sont généralement utilisés conjointement avec un autre langage de programmation utilisés pour traiter les informations entrées par l'utilisateur. Par exemple: php ou java.

Les balises html de base utilisées pour créer des formulaires sont: form, input, textarea, select et option.

La balise form

La balise « form » définit le formulaire et son contenu. Si vous utilisez le formulaire pour envoyer et traiter les informations entrées par l'utilisateur l'attribut « action » est nécessaire pour spécifier où envoyer le contenu.

L'attribut « method » indique comment seront envoyées les données du formulaire. Par défaut c'est la méthode GET qui est utilisée.

La méthode http GET est utilisée pour les informations non sensibles et courte car celle-ci sont visible directement dans l'url.

La méthode http POST est utilisée pour les informations plus sensible et plus longue car elles sont placées dans le corps de la requête http où il n'y a pas de limite de caractère.

Voici un exemple de formulaire :

<form action="monScript.php" method="post">
</form>

les balises input

La balise « input » est la plus utilisée dans les formulaires. Elle peut prendre une multitude de formes, les plus courantes sont décrites ci-dessous:

  • <input type="text" /> ou simplement <input>: Représente une zone de texte standard. Elle peut aussi avoir un attribut de valeur « value », qui définit le texte initial dans la zone de texte.
  • <input type="password" />: Similaire à la zone de texte, mais les caractères tapés par l'utilisateur sera caché.
  • <input type="email" />: Similaire à la zone de texte, mais elle n'accepte que les adresses emails.
  • <input type="url" />: Similaire à la zone de texte, mais elle n'accepte que les urls.
  • <input type="checkbox" />: Représente une case à cocher, qui peut être activée ou désactivée par l'utilisateur. Elle peut aussi avoir un attribut « checked » si l'on veut qu'elle soit cochée par défaut.
  • <input type="radio" />: Similaire à une case à cocher, mais l'utilisateur ne peut sélectionner qu'un seul bouton radio dans un groupe. Elle peut également avoir l'attribut « checked ».
  • <input type="button" />: Représente un bouton. Elle peut aussi avoir un attribut de valeur « value » pour définir le texte du bouton.
  • <input type="submit" />: Représente le bouton de soumission du formulaire. Il possède les mêmes attributs qu'un simple bouton.
  • <input type="reset" />: Représente le bouton nettoyage du formulaire. Il possède les mêmes attributs qu'un simple bouton.

Notez que, comme les balises « img » et « br », la balise input ne nécessite pas de balise de fermeture.

Zone de texte

La balise html « textarea » est une zone de texte multi-ligne. Le nombre attendu de lignes et de colonnes peut être définie par les attributs « rows » et « cols », mais vous pouvez manipuler la taille au contenu comme bon vous semble en utilisant le CSS.

<textarea rows="5" cols="20">Tutoriel sur les formulaires html</textarea>

Tout texte placé entre la balise d'ouverture et de fermeture (dans ce cas "Tutoriel sur les formulaires html" ) sera la valeur par défaut de la zone de texte.

Liste déroulante

La balise « select » représente une liste déroulante. Elle fonctionne à l'aide de la balise « option » qui représente chaque champ de la liste déroulante.

<select>
    <option>
html</option>
    <option
value="Option 2" >Formulaire</option>
    <option
value="Option 3" >Tutoriel</option>
</select>

Lorsque le formulaire est soumis, la valeur de l'option sélectionnée sera envoyée. Cette valeur sera le texte entre l'ouverture et la fermeture sélectionnée étiquette d'option, sauf si une valeur explicite est spécifiée avec l'attribut « value ».

Dans l'exemple ci-dessus, html, Option 2 et Option 3  sont les valeurs qui seront envoyées à l'application par l'intermédiaire du formulaire.

Pour sélectionner une option par défaut, vous pouvez rajouter l'attribut « selected ».

Toutes balises html mentionnées ci-dessus seront bien affichées sur la page, mais si vous connectez votre formulaire html à un script de traitement, elles seront tous ignorés lors de la soumission du formulaire. C'est parce que les champs du formulaire doivent avoir un nom (représenté par l'attribut « name »). Le nom de l'attribut doit donc être ajouté sur chaque champ. Par exemple:

<input type="text" name="nom">

Voici un exemple de formulaire complet:

<form action="script.php" method="post">
    <p>
Nom:</p>
    <p><input
type="text" name="nom" value="Votre nom"></p>
    <p>
Commentaires: </p>
    <p><textarea
name="commentaires" rows="5" cols="20">Vos commentaires</textarea></p>
    <p>Etes-vous:</p>
    <p><input
type="radio" name="sexe" value="homme">Un homme</p>
    <p><input
type="radio" name="sexe" value="femme">Une femme</p>
    <p><input
type="submit"></p>
</form>

NB: Sans le fichier script.php, le formulaire ne sera pas traité et rien ne se passera lors de la soumission du formulaire.

Tu as aimé ce tutoriel ?
Aide nous à améliorer le site ! Deviens partenaire officiel ou suis nous sur facebook !

<<Tutoriel précédent 

Commentaires[0]

Tu as aimé ce tutoriel ? Alors partage-le avec tes amis !
Partager sur Facebook Partager sur Twitter Partager sur Myspace Partager sur Stumbleupon Soumettre sur Reddit Partager sur Digg Ajouter à vos favoris Technorati Ajouter à vos favoris Live Ajouter à vos favoris Google Ajouter sur vos favoris Yahoo Voir le flux rss

Mots Clés: html HTML5 Programmer en html web

Veve :
(11/04/2013 - 17:19:44)
il faut juste mettre "sudo" à la place de "su" pour exécuter la commande en root

Veve :
(11/04/2013 - 17:18:56)
Salut tu peux aller lire ce tutoriel: http://www.tutorielsenfolie.com/tutoriels-63-installation-configuration-opennebula.html Il fonctionne aussi sous ubuntu

safa.souissi4 :
(10/04/2013 - 20:58:13)
s'il vous plait c urgent :(

safa.souissi4 :
(10/04/2013 - 20:56:25)
bonsoir,je cherche un tutos pour installer opennebula.org sous ubuntu 12.

Veve :
(18/03/2013 - 20:07:49)
oui, j'essaye de voir d'ou viens le problème.

sonde :
(18/03/2013 - 13:29:57)
re merci (j apprend un peu plus) je crois que j ai trouver pourquoi je peu pas poster si il y a ligne code impossible de poster lol

Veve :
(17/03/2013 - 21:34:49)
Salut, j'espère que ça t'a aidé.

sonde :
(17/03/2013 - 09:59:02)
pour ton aide

sonde :
(17/03/2013 - 09:57:36)
slt Veve impossible de laisser com

sonde :
(17/03/2013 - 09:56:55)
??

Demi-dieu :
(15/03/2013 - 18:41:13)
salut ^^

sonde :
(13/03/2013 - 14:49:35)
un petit coucou

Tanamoureuse :
(29/09/2011 - 06:11:08)
Je t'aime

Faire un don

Ma Publicité ici


Faire un don