23 janvier 2014
Category:
HTML
Comments: 0

Formulaire HTML et champs

On utilise un formulaire HTML pour transmettre des données à un serveur. Ces formulaires HTML peuvent contenir différentes entrée comme du texte, des boutons radio ou cases à cocher … On peut également inclure des listes à sélections multiples, des zones de texte plus larges pour envoyer un message …

On commence par utiliser la balise <form> :

L’élément INPUT

L’un des champs les plus utilisé utilise la balise <input type= »text » > permettant de saisir des informations de son utilisateur. Cet élément varie de multiples manières en fonction de l’attribut « type » qu’on lui donne. Il peut être un champ de texte, une case à cocher, un mot de passe, un email, un bouton d’envoi …

Les « type » les plus courant pour cette balise sont décrits ci-dessous.

Champs texte
<input type= »text » > vous permets de définir un champs de saisie sur une ligne dans votre formulaire afin de saisir du texte.
Exemple :

Ce qui donnera dans un navigateur :

Prenom:
Nom:

Vous remarquerez ici que par défaut les champs texte affichent 20 caractères.

Champs mot de passe
<input type= »password » > permets la saisie d’un mot de passe, le texte est alors masqué par des astérisques ou de petits cercles.
Exemple :

Ce qui donne :

Mot de passe:

Boutons Radio
<input type= »radio » > vous permets d’afficher un bouton radio. Les boutons radio limitent l’utilisateur à UN SEUL choix.

Exemple:

Ce qui donne :

Mr
Mme

Cases à cocher
<input type= »checkbox » > affichera une case à cocher. A la différence des boutons radio, les cases à cocher peuvent permettre un choix multiple à son utilisateur.

Exemple:

Ce qui affichera dans votre formulaire HTML:

Contactez moi par Téléphone
Contactez moi par Mail

Bouton d’envois
<input type= »submit »> affiche un bouton d’envoi pour votre formulaire HTML. Ce bouton d’envoi vous permets d’envoyer les données contenu dans votre formulaire à un serveur. Les données sont alors envoyées à l’élément « action » de votre formulaire. Le fichier contenu dans action va alors traiter les éléments que vous lui transmettez pour effectuer une tâche (envoi de mail, inscription utilisateur …).

Exemple:

Ce qui affichera

Prénom:

Après avoir saisi du texte dans le premier champs, si vous cliquez sur le bouton « envoyer », votre navigateur va envoyer le texte contenu dans le premier champs à une page nommée « monaction.asp »

Quelques ressources pour vous aider à créer votre formulaire HTML / PHP :

Simple PHP Contact Form
Simple PHP Contact Form vous permets de créer facilement un formulaire de contact en PHP pour une page de votre site web.
simplephpcontactform
(Cliquez sur l’image pour plus d’infos)

Ajax Contact Form
Cette source vous permettra de mieux gérer vos formulaires HTML et les rendra autonome pour n’importe quel page de votre site, qu’il soit en HTML ou PHP. Il utilise 1 seul fichier pour valider votre formulaire, traiter les données et les envoyer.
ajaxcontactform
(Cliquez sur l’image pour plus d’infos)



Laisser un commentaire

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