Formulaire

LES FORMULAIRES

Formulaire

Comme vous le savez déjà un formulaire permet de récupérer des informations auprès de l'internaute qui sont transmises à un serveur pour divers traitements ( enregistrement de nouvel utilisateur, vérification d'identité, etc..). Pour simplifier la mise en forme, vous utiliserez la bibliothèque Bulma que vous placerez dans le dossier de votre projet ( cliquez-ici pour télécharger la bibliothèque) .

Vous ajouterez la ligne ci-dessous dans la balise head de la page html qui affiche votre formulaire:

Le but va être de réaliser un formulaire d'inscription, on enregistrera le contenu du formulaire dans une base de données. votre formulaire pourra ressembler à celui-ci:

Un formulaire doit être est placé entre des balises form, on placera le formulaire dans un div de la famille content

1. Placer le code ci-dessous dans la tuile enfant rouge après les paragraphes.

<form>

</form>

</div>

2. Placer ensuite le champ de saisie du nom:

<label for="nom"> Entrez votre nom : </label>

</div>

Le champ est en deux parties, il est placé dans un div de la famille field qui ajoutera un espacement correct entre les divers champs:

- le texte "Entrez votre nom" est entre des balises en paires label , l'attribut for="nom" associe le label et le champ de saisie placé à coté qui s’appelle nom.

- un champ de saisie est une balise orpheline input de type=text, on règle l'attribut name="nom" ce qui correspond à affecter une variable appelée nom qui contiendra ce que la personne va saisir dans le champ, on a aussi réglé deux autres attributs, l'attribut maxlength="20" qui veut dire que la saisie ne pourra pas avoir plus de 20 caractères, et l'attribut size=20 qui veut dire que la balise affiche un rectangle de saisie de taille 20 caractères, le code est placé entre les balises form:

Le rendu:

3. Placer ensuite le champ de saisie du prénom qui est très similaire:

<label for="prenom"> Entrez votre prénom : </label>

</div>

4. Ajouter un champ de saisie pour email ce qui se fait avec une balise orpheline input de type="email", on rajoutera une icône enveloppe à gauche dans le champ de saisie, ce qui demande placer le champ de saisie input dans une paire de balises div de la famille control has-icons-left, le champ de saisie sera de la classe input pour avoir une hauteur capable de contenir l’icône, un des effets de cette famille est de positionner l'élément à la ligne de celui qui le précède, ainsi le champ de saisie sera en dessous du texte "Entrez votre mail". L'icône est une balise en paire <i> ici de la famille "fas fa-envelope" pour afficher une enveloppe. Pour que l'icône soit bien placée dans le champ de saisie, il faut la mettre entre des balises span de la famille "icon is-small is-left". Une balise span est normalement une balise qui met son contenu ( ici l'icône) à la suite de l'élément précédent ( le champ de saisie), en jouant sur le positionnement du span, Bulma positionne l’icône dans le champ de saisie et à gauche.

<label for="mail" > Entrez votre e-mail : </label>

</span>

</div>

5. Ajouter trois boutons radios pour sélectionner un genre. Un bouton radio est une balise orpheline input de type="radio". On donnera trois choix possibles : F pour Femme, H pour Homme et A pour Autre, l'attribut name="genre" crée la variable genre qui se verra affectée la valeur choisie par l'utilisateur, la valeur dépend du bouton, elle est donnée par l'attribut value qui vaut F ou H ou A. Par exemple si l'utilisateur coche le bouton F de value="F", la variable genre="F"

Genre : F <input type="radio" name="genre" value="F" />

H <input type="radio" name="genre" value="H" />

A <input type="radio" name="genre" value="A" />

</div>

6. Ajouter le code ci-dessous qui permettra d'ajouter un calendrier pour sélectionner la date de naissance de l'utilisateur. Ce code n'est pas fonctionnel pour l'instant, on le rendra fonctionnel dans le chapitre JavaScript:

</p>

6. Ajouter le code qui permettra d'ajouter un champ lieu de naissance:

<label for="lieu"> Lieu de naissance: </label>

</div>

7. Ajouter le code qui permet d'envoyer le contenu du formulaire, il faut pour ça une balise input de type submit, le texte sur le bouton d'envoi est réglé avec l'attribut text="Envoyer":

</div>

Vous pouvez maintenant passer au chapitre JavaScript

Créé avec HelpNDoc Personal Edition: Créer des sites web d'aide facilement