Maintenant que nous avons vu comment ajouter des boutons à notre page Web.
Dans cet exercice, nous allons examiner les formulaires et comment nous pouvons ajouter des formulaires à
notre page Web et également styliser ces éléments de formulaire en utilisant les classes Bootstrap.
Pour revenir à la page contactus.html,
faites défiler vers le bas jusqu'à ce que vous voyez ce commentaire appelé « Formulaire va ici ».
Nous allons remplacer ceci par le formulaire de cette page web.
Donc, supprimons cela et construisons
le formulaire à cet emplacement particulier à l'intérieur de la div là-bas.
Pour commencer avec le formulaire,
je vais utiliser la balise HTML de formulaire et construire le formulaire dans cette balise HTML.
Donc, dans cette balise de formulaire,
ajoutons dans les éléments de rayon de notre formulaire.
Donc, à l'intérieur de ce formulaire,
je vais diviser ce formulaire en plusieurs rangées là-bas.
Pour diviser votre formulaire en lignes,
vous pouvez simplement utiliser un div avec la classe = « form-group », puis lui appliquer la classe de ligne.
Donc, avec cela, nous allons ajouter dans deux groupes de formulaires ici.
Je vais copier ceci et puis le coller ci-dessous ici.
Donc, vous pouvez voir que je vais ajouter deux lignes à ce formulaire ici.
Donc, pour ajouter un élément dans ce formulaire,
nous allons à cette div et ensuite je vais commencer par utiliser une balise d'étiquette ici.
Et pour les étiquettes d'étiquette,
donc j'aurai deux lignes ;
une permettant à l'utilisateur de remplir son prénom,
et la seconde pour son nom de famille.
Donc, c'est là que nous allons utiliser cette étiquette pour spécifier la classe là-bas.
Maintenant, En outre, Bootstrap nous permet d'utiliser la grille Bootstrap
pour spécifier comment ces formulaires vont être disposés annonce donc je vais appliquer le col-md-2.
Vous pouvez voir que j'ai appliqué les classes de colonne md-2 à cet élément particulier.
Donc, cet élément dans le formulaire occupera deux colonnes.
Donc, à l'intérieur de cet élément de formulaire,
nous avons divisé chaque ligne en 12 colonnes.
Donc, parce que nous avons déjà utilisé la ligne pour la div,
donc cela nous fournira 12 colonnes à l'intérieur de la div là-bas.
En outre, je dois appliquer l'étiquette de formulaire de classe col à cela.
Donc, c'est ce qui me permet de spécifier une étiquette ici.
Donc, pour cette étiquette,
je vais remplir l'étiquette comme prénom, puis fermer la balise étiquette étiquette.
Donc, cette balise d'étiquette me permet de donner une étiquette,
qui occupera deux colonnes de gauche dans cette ligne particulière.
Du côté droit, je vais utiliser un autre div que la classe appliquée en tant que col-md-10.
Notez que l'étiquette précédente utilisait le col-md-2 là.
Donc, pour cette div,
je vais appliquer le col-md-10 là-bas.
Et puis à l'intérieur de cette div,
je vais appliquer un élément d'entrée,
qui est du texte de type.
Donc, si vous êtes familier avec les formulaires à partir de HTML,
vous verrez que nous utilisons les éléments de formulaire à partir de HTML pour
créer ce formulaire ici donc la zone de saisie ici est du type texte.
Maintenant, c'est là que nous allons appliquer les classes Bootstrap à cela
et la classe Bootstrap correspondante pour cela
est le contrôle de formulaire et ensuite je peux spécifier
un ID pour cela comme prénom.
Donc, notez que cet ID correspond à cette étiquette pour div.
Donc, prénom, puis nom comme
prénom et aussi je vais spécifier
un espace réservé pour cela donc laissez-moi utiliser la ligne suivante ici,
espace réservé car, je suis sûr que d'après votre connaissance du HTML,
vous comprenez comment cette spécification est faite ici.
Donc, avec cela, nous avons maintenant créé notre premier élément de forme dans notre forme.
Jetons un coup d'oeil à la page web.
Aller à notre page Web, vous pouvez maintenant voir comment l'ajout dans les éléments de formulaire a créé
cette zone de texte d'entrée et l'étiquette sur le côté gauche.
Maintenant, je vais ajouter une autre ligne avec le nom de famille.
Pour revenir à mon contactus.html,
laissez-moi simplement copier cette partie, puis collez-la dans la deuxième div ici,
puis allez dans et éditez cela.
Du prénom, je change ça en nom de famille.
Assurez-vous d'effectuer toutes les modifications correctement.
Même une modification incorrecte manquante,
fera en sorte que votre formulaire ne fonctionne pas correctement, alors assurez-vous que
toutes les choses de prénom ici sont remplacées par mon nom de famille.
Donc, le nom de famille, le
contrôle de formulaire de texte md-10.
L' ID ici doit être le nom de famille et le nom doit également
être le nom de famille et l'espace réservé
à nouveau le nom de famille afin que cela puisse ajouter dans une deuxième ligne avec le nom de famille.
Aller à votre page Web,
vous pouvez voir maintenant le formulaire
se mettre lentement en forme afin que vous ayez le prénom et le nom de famille.
Maintenant, nous pouvons ajouter ensuite dans un des éléments d'entrée.
Nous verrons comment cela fonctionne lorsque nous ajoutons dans le code.
Passant maintenant à la partie suivante de l'exercice,
nous allons ajouter ici deux champs supplémentaires dans
notre formulaire pour entrer le numéro de téléphone et l'ID e-mail.
Puisque la structure de base du code est similaire
au prénom et au nom que vous avez déjà ajoutés au formulaire,
donc je vais juste copier le code à partir du prénom et
du nom, puis le coller ici et puis modifier le code en conséquence.
Donc, j'ai collé le code du prénom et du nom ici.
Continuons et modifions maintenant ceci pour le transformer en champs qui permettent
à l'utilisateur d'entrer le numéro de téléphone et l'ID e-mail.
Donc, pour le numéro de téléphone,
donc ici nous avons déjà le prénom et le nom de famille ci-dessus.
Donc, le troisième, je vais changer ça pour étiqueter « telnum ».
Donc, c'est à partir du numéro de téléphone et puis des classes,
je vais appliquer une classe de col-12 à ce dicton que cette étiquette sera dans
son propre tirage lorsque le formulaire est affiché sur des tailles d'écran extra petites à petites.
Et puis, pour la taille d'écran moyenne à supérieure,
cela serait affiché dans deux colonnes
de cette ligne particulière ici donc c'est le changement que nous allons y apporter.
Et puis aussi, l'étiquette elle-même,
laissez-moi changer cela pour contacter numéro de téléphone, contacter Tel.
Maintenant, le numéro de téléphone lui-même,
nous allons laisser l'utilisateur le saisir en deux parties ; l'une,
qui est l'indicatif régional et la seconde,
qui serait le numéro de téléphone réel.
Donc, je vais prendre cette partie du code,
qui était le champ d'entrée que nous avions pour
le prénom, puis en créer une autre ci-dessous,
que je vais utiliser pour le numéro de téléphone lui-même.
Et maintenant, nous allons transformer ce premier dans le champ pour entrer l'indicatif régional.
Vous pouvez également l'utiliser par exemple,
pour le code de pays si c'est ce que vous souhaitez mettre dans le formulaire.
Donc, pour le code régional lui-même,
je vais postuler pour le div,
les classes="col-5 col-md-3 ici ».
Donc, notez que pour l'écran moyen,
nous avons deux colonnes occupées par l'étiquette,
trois colonnes occupées par l'indicatif régional lui-même et
les sept colonnes restantes je vais le donner au champ de texte ici.
Donc, de même, pour l'indicatif régional, je dis col 5.
Donc, pour les écrans extra petits à petits, cela occupera
cinq colonnes, puis pour les sept colonnes restantes,
nous laisserons le numéro de téléphone se nourrir lui-même occupé à.
Laisse-moi changer le prochain en col-7 et col-md-7 ici.
Maintenant, ce champ je vais changer ceci en tel,
type d'entrée tel pour le numéro de téléphone et la classe est le contrôle de formulaire,
l'ID est l'indicatif régional et le nom est l'indicatif régional et puis l'espace réservé,
je vais changer cela en indicatif régional.
Et la partie suivante,
nous allons changer ce type aussi tel et ID est telnum,
le nom est telnum et l'espace réservé,
lui-même, serait le numéro de téléphone.
Ainsi, cela formera le champ du numéro de téléphone,
qui sera entré en deux parties :
l'indicatif régional et le numéro de téléphone.
Donc, nous utilisons, encore une fois,
les classes de colonne afin de structurer
la façon dont les deux parties du champ d'entrée sont affichées dans le formulaire là-bas.
Maintenant, le dernier, bien sûr,
ce serait pour l'ID e-mail donc l'étiquette,
je le transforme en ID e-mail et puis l'étiquette elle-même
est e-mail et le type d'entrée est e-mail.
Maintenant, nous changeons le type en email,
ce qui est autorisé en HTML de sorte que plus tard si nous avons besoin de faire la validation de formulaire,
alors nous savons que ce champ devrait contenir
seulement un type d'e-mail d'entrée là-bas, et l'ID,
lui-même, l'ID e-mail et le nom email ID et l'espace réservé.
E-mail. C'est ça.
Sauvegardons les modifications et allons jeter un oeil au formulaire mis à jour.
Aller au formulaire dans le navigateur,
vous voyez maintenant deux lignes supplémentaires ajoutées dans notre formulaire.
Le prénom et le nom de famille doivent être ajoutés dans la partie précédente de l'exercice.
Donc, ici, nous avons le numéro de téléphone de contact,
qui est divisé en l'indicatif régional et le numéro de téléphone.
Notez comment nous avons utilisé les classes de colonne pour positionner ces deux dans
le formulaire lui-même, puis le champ e-mail ici.
Jetons un coup d'oeil à la même chose sur un très petit écran.
Ainsi, lorsque vous allez à une taille d'écran extra petite,
vous remarquerez comment le formulaire lui-même est disposé.
Vous verrez que l'étiquette est en haut, puis le champ lui-même en bas.
Donc prénom, nom de famille.
Notez comment les
champs d'entrée de numéro de téléphone de contact sont positionnés à l'aide des classes de colonne,
donc l'indicatif régional ici,
et le numéro de téléphone,
puis l'ID e-mail ici.
Maintenant, nous allons continuer avec l'exercice.
En continuant à l'étape suivante,
nous allons ajouter une case à cocher, puis nous allons ajouter dans une sélection deux ou quatre.
Pour ajouter une case à cocher,
copions simplement ce groupe de formulaires ici afin que nous l'ajoutions comme une autre ligne ici,
puis ajouterons dans le groupe de formulaires div ici,
puis fermez le div ici.
Et puis à l'intérieur de cette ligne de groupe de formulaires,
donc cela nous donne une autre ligne dans le formulaire.
Donc, à l'intérieur de cette ligne de groupe de formulaires,
permettez-moi d'ajouter en premier la case à cocher.
Donc, pour ce faire, nous allons ajouter un div avec la classe ="col-md-6"
afin que vous verrez que cela va occuper
six colonnes dans la taille de l'écran moyen à extra grand,
puis offset-md-2, donc cela va le décaler vers
la droite par deux colonnes, puis afficher la case à cocher dedans.
Maintenant, à l'intérieur ici, pour ajouter une case à cocher,
nous allons dire div avec la classe ="form-check » et
à l'intérieur de cette classe form-check nous allons ajouter un type d'entrée ="checkbox »
et la classe ="form-check-input », puis laissez-moi passer à la ligne suivante et
dire ensuite name="approuver » et l'
id="approuver » et la valeur est une chaîne vide là.
Et à cette case à cocher,
ajoutons une étiquette.
Donc, pour ajouter une étiquette,
nous allons ajouter dans label
class="form-check-label » et puis cette étiquette
est pour cette case à cocher que nous venons d'ajouter.
Donc, c'est pourquoi nous allons dire pour="approuver » alors notez que pour la case à cocher,
nous avons donné le nom et l'ID comme approbation, donc c'est pourquoi ici,
nous allons être sauvegardés pour l'étiquette pour approbation.
Et puis à l'intérieur de cette étiquette,
nous indiquerons le contenu comme « Pouvons-nous vous contacter ? »
Et puis sauvegardez les changements et allons-y jeter un oeil à notre formulaire.
Aller à la page Web,
vous pouvez maintenant voir que nous avons ajouté dans une case à cocher avec une étiquette ici et remarquez
que cette étiquette est en gras à cause de l'utilisation de la balise « forte » là,
et nous avons fait offset-md-2.
C' est pourquoi nous poussons cette case à cocher jusqu'ici.
Cela n'a pas d'étiquette ici mais au lieu de cela est poussé ici,
donc c'est la raison pour utiliser offset-md-2 ici,
et celui-ci occupe md-6 donc six colonnes ici.
Nous n'en avons pas encore fini.
Je vais ajouter dans la partie suivante ici,
qui est une boîte de sélection là-bas.
Donc, je vais appliquer un div de plus ici avec
la classe ="col-md-3 offset-md-1" ici.
Et à l'intérieur de cette div,
je vais définir une sélection.
Donc, encore une fois, à partir de votre connaissance du HTML,
vous savez ce qu'un select fait pour vous.
Maintenant, la sélection appliquera
le contrôle de formulaire de classes donc c'est la classe Bootstrap que j'applique à la sélection ici,
et fermera la sélection.
Et à l'intérieur ici, je dois donner les options pour la sélection.
Donc, j'utilise une sélection simple ici,
et donc le premier est une option
pour téléphone ou e-mail et fermer l'option.
Donc, cela crée un élément select dans mon formulaire,
qui a deux options ;
téléphone et e-mail, donc,
sauvegardons les modifications. En
regardant notre page Web,
vous pouvez maintenant voir comment la case de sélection du téléphone et de l'e-mail est maintenant créée ici, donc cela
me permet de sélectionner lequel faire et ensuite vous pouvez également cocher la case comme ceci.
Donc, cela termine la rangée suivante.
Ajoutons une ligne de plus,
ce qui permettra à l'utilisateur de taper réellement ses commentaires.
Donc, je vais utiliser une zone de texte pour le formatage.
Pour la prochaine, je vais utiliser une zone de texte.
Donc, ce que je vais faire, c'est juste que je vais monter et copier cette partie email de celui-ci.
Je suis trop paresseux pour continuer à taper tout le temps.
Donc, j'ai tendance à couper et coller dans la mesure du possible, mais pour celui-ci,
l'étiquette devrait être des commentaires et l'étiquette du formulaire de colonne,
puis le texte réel est, « Vos commentaires ici ».
C' est donc l'étiquette.
Et puis, ici, le second,
je vais formater celui-ci.
Au lieu du type d'entrée,
je vais changer cela en une zone de texte,
et puis je n'ai pas besoin du type là.
Zone de texte, la classe est toujours le contrôle de formulaire et l'ID est la rétroaction. Le
nom est un commentaire et l'espace réservé n'est pas nécessaire
ici et au lieu de le changer pour combien de lignes je
veux donner à partir des commentaires pour la zone de texte ?
Donc, je vais dire 12 lignes et puis fermer le texte.
Donc, remarquez comment j'ai inclus la zone de texte dans mon formulaire.
Enregistrez les modifications.
Jetez un oeil. Aller à ma page web,
maintenant vous voyez mon formulaire prendre sa forme complète ici.
Vous avez le prénom, le nom de famille,
le téléphone, l'e-mail, puis les commentaires.
Zone de texte de 12 lignes.
Maintenant, vous aurez besoin d'un bouton sur lequel l'utilisateur doit cliquer pour soumettre ses commentaires.
Donc, nous ajoutons un bouton de soumission à ce formulaire.
Pour revenir au formulaire à nouveau,
créez une ligne de plus ici en utilisant
la div ici avec la ligne du groupe de formulaires ici,
et à l'intérieur ici je vais ajouter un bouton ici.
Donc, je dirais, div
class="offset-md-2" parce que je veux que mon bouton soit
positionné juste en dessous de tous les champs que j'
ai ici donc les deux colonnes gauche sont utilisées pour l'étiquette.
Donc, le bouton de soumission n'a pas besoin d'étiquette donc je vais juste le
pousser vers la droite ici et puis je
dirais « col-md-10" donc cela occuperait les 10 colonnes restantes là-bas.
Et puis à l'intérieur de ces div,
je vais ajouter un bouton là.
Ainsi, lorsque vous ajoutez un bouton à votre formulaire,
utilisez la balise bouton ici avec un type soumettre.
Donc, c'est le bouton de soumission pour votre formulaire là-bas et la classe.
Rappelez-vous les classes de bouton, bouton primaire,
donc cela créerait un bouton bleu foncé dans votre formulaire,
puis fermez le bouton là,
et puis je vais simplement entrer et à l'intérieur du bouton,
je vais donner le nom comme « Envoyer des commentaires », puis enregistrer les changements.
Maintenant, notre formulaire est complet.
Jetons donc un coup d'oeil à la version finale de notre formulaire.
En accédant à notre page Web,
vous pouvez maintenant voir le formulaire rempli.
Tous ces champs que nous avons déjà vu,
le bouton en bas avec le libellé « Envoyer des
commentaires » et le bouton de couleur bleu foncé en raison de l'utilisation du bouton « primaire ».
Donc, cela complète le formulaire que nous voulions créer sur notre page web.
Avec cela, nous terminons cet exercice,
où nous avons vu comment nous pouvons construire un formulaire et l'inclure dans notre page Web.
Vous travaillerez avec des formulaires dans certains
des exercices ultérieurs, y compris votre deuxième affectation.
C' est un bon moment pour vous de faire un bon commentaire avec les formulaires de message.