Quoi de neuf ?
Bienvenue !

Rejoignez-nous maintenant pour accéder à toutes nos fonctionnalités. Une fois inscrit et connecté, vous pourrez créer des sujets, publier des réponses aux discussions existantes, donner de la réputation à vos collègues, obtenir votre propre messager privé, et bien plus encore. C'est aussi rapide et totalement gratuit, alors qu'attendez-vous ?

HTML Formulaires en HTML | TP

Maxime66410

Super Administrateur
Membre du personnel
Inscrit
4/7/20
Messages
70
Points
8
Exercice 1 :

Dans un premier lieu, la première ligne du code sert à ajouter un petit titre en <h2>.

Après ce petit titre, il y a un formulaire <form> du nom “Fiche_inscription”, qui représente une section d'un document qui contient des contrôles interactifs permettant à un utilisateur d'envoyer des données à un serveur web, dans ce formulaire il y a plusieurs plusieurs <input>, ce qui permet d’écrire un texte dans une box prédéfinie à l'emploie, exemple : Nom, Prénom, Mot de passe…

Différence entre un texte normal et un texte avec un type en password :



Dans <input> on peut ajouter type=”” donc dans cette petite option on peut faire en sorte de dire si c’est un mot de passe, un texte écrit etc..

Il y a aussi dans le type un “radio” ils sont généralement utilisés pour construire des groupes d'options parmi lesquelles on ne peut choisir qu'une valeur

La part exemple nous pouvons sélectionner au choix une seul option :


Dans la deuxième partie du code, on peut voir qu’il y a un <select> qui représente un contrôle qui fournit une liste d'options parmi lesquelles l'utilisateur pourra choisir.

<option> permet d'ajouter une option dans un tableau.

On peut voir que dans la suite, il y a encore un <input> ajouter.

Leur type sont “checkbox” qui permet d'afficher sous la forme de boîtes à cocher qui sont cochées lorsqu'elles sont activées. Elles permettent de sélectionner une ou plusieurs valeurs dans un formulaire.

Dans la suite du code nous avons <textarea> qui représente un contrôle qui permet d'éditer du texte sur plusieurs lignes.

Si nous ajoutons les attributs “rows” et “cols” permettent de définir la taille exacte qui doit être occupée par le <textarea>.

Puis à la fin du code html nous avons encore un <input> avec un type de “RESET” et “SUBMIT”, reset permet de réinitialiser le formulaire et submit pour envoyer les informations de la fiche de renseignements.

Ce que le navigateur comprend et nous montres :



Je vais donc ajouter l’âge sur ma page de renseignement.

Donc voici le bout du code :



Dans type=”” je peux ajouter date a la place de text, ce qui permet de demander la date de naissance, mais pour l’instant je vais le laisser comme ceci.

J’ai aussi ajouté required minlength="1" maxlength="2" qui me permettra que l’utilisateur ne puisse qu'écrire 2 caractères au maximum et 1 caractère au minimum.

je vais donc maintenant ajouter le genre, pour ajouter le genre j’aurais besoin de 3 input du type radio.

Pour initialiser la première valeur je vais mettre checked dans “Homme”.



Ce que la navigateur nous traduit pour que ça nous soit compréhensible de tous :




Exercice 2 :

Je vais créer une page d’enregistrement d’utilisateur.








Voici ce que le navigateur nous traduit pour que nous puissions comprendre :



Exercice 3 :

J’ai donc repris mon code de l’exercice 2 et j’ai fait en sorte que quand on clique sur “Envoyer” ça envoie les informations à un mail prédéfinie.

Tout ce que j’ai affaire c’est modifier <form> dans mon code html, je vais donc ajouter enctype c’est quoi enctype ?

Il permet de voir comment les données de formulaire doivent être codées lors de leur soumission au serveur.

Je vais donc par la suite aussi ajouter method, il spécifie comment envoyer les données de formulaire.

Et pour finir, je vais utiliser action suivie de mailto, “action” nous spécifie où envoyer les données de formulaire lorsqu'un formulaire est soumis, donc je vais ajouter comme prévu mailto pour définir à quelle mail il doit l’envoyer.

Ce qui me devais faire ceci :



Et maintenant lorsque j’appuie sur envoyer mon formulaire s’envoie par mail.




Exercice 4 :















Avec quelque CSS :




Ce qui me donne :


Quand je veux envoyer mon mail ça m’ouvre mon envoyer un mail qui s'ouvre sous cette forme.

pasted image 0 (3).png


pasted image 0 (2).png


pasted image 0 (1).png

Version non tronqué par GMAIl :

pasted image 0.png
 
Haut