CLIN

Apprendre le HTML et le CSS créer un formulaire de contact

25/11/2020

Bonjour, Bonsoir à tous.
Vous êtes au rendez vous d'un nouvel article aujourd'hui dans le quel nous allons découvrir à utiliser ces 4balises très importantes.
Il s'agit de la balise form, fieldset,legend et table.
Vous l'aurez peut être deviné, nous allons donc réaliser notre formulaire de contact sur notre site web.
Pour cela je vous recommande de reprendre notre page web de base que nous avons créer lors de nos deux premiers articles.
Je veux plus le reprendre dans c'est article car vous pouvez toujours le récupérer à tout moment sur les deux articles cités ci haut.
Ce que je vous recommande de faire est de mettre une page contact.html sur le quel va pointer le menu conctact une fois le visiteur clic sur le menu contact comme sur le code ci dessous.

<li><a href="contact.html"></a></li>

En suite créer la page contact.html, vous savez déjà comment créer une page je sais courage j vous fait confiance et sinon pas de panique je suis là pour vous.
Copier tout le code de notre page web qui est disponible sur les articles précédent et colle le sur la nouvelle page contact.html qu'on venait de créer.
Placez vous dans notre div du milieu qu'on avait donné la classe .contenu et mettez y le code suivant comme dans le code ci dessous.
<div class="contenu">
<form class="form">
<table class="table">
<fieldset class="myfield">
<legend>Nous contacter</legend>
<tr>
<td>Name:</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Phone:</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Email:</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Subject:</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Message:</td>
<td>
<textarea >
</textarea>
</td>
</tr>
<tr>
<td>
<input class="submit" type="submit" value="Envoyer">
</td>
</tr>
</fieldset>
</table>
</form>
</div>

Après avoir fait ça nous allons maintenant styliser notre page nous écrirons le code ci-dessous dans notre fichier style.css
.contenu form{
position:relative;
width: 80%;
height:auto;
margin-left:200px;
padding:10px;
back-ground:steelblue;
}
.contenu form fieldset{
border:2px solid;
padding:5px;
}
.contenu form fieldset legend {
width:300px;
border:2px solid;
}
.contenu form .submit{
background:#000;
color:#fff;
font-weight:bold;
border-radius:100px;
}

Enregistrer et exécuter la page voir ce que ça va donner
A noter ce code ne pas parfait à 100% ça vous donne juste l'idée de ce qu'on doit faire pour créer son formulaire de contact vous pouvez le modifier comme vous voulez plus tard nous verrons maintenant comment donner à vos visiteurs la possibilité de vous envoyé un mail à partir de ce formulaire en PHP,
N'oublie pas de laisser un commentaire en bas de cette page si vous avez aimé c'est article...


Votre commentaire





Commentaires


Moïse   25/11/2020 à 03:52:55
Je trouve génial cet article. Merci beaucoup