L’alignement horizontal est hors et vertical est de haut en haut. Créez un site Web moderne avec des formulaires empilés.
CSS appartient à une classe unique de langages, appelés langages de feuille de style. Il sert principalement à définir la présentation de votre page Web. Alors que HTML vous permet de spécifier comment votre page doit être structurée, c’est CSS qui est utilisé pour la styliser. Sinon, vous vous retrouverez avec un site Web assez peu attrayant.
Se concentrer sur CSS est l’un des meilleurs moyens d’améliorer l’attrait de votre site Web, en particulier lorsqu’il s’agit d’améliorer votre expérience utilisateur. De cette façon, vous pouvez également augmenter votre trafic. Pour commencer, vous pouvez utiliser un formulaire empilé.
LIRE AUSSI: Les 4 meilleures alternatives Pastebin pour le partage de code et de texte
Qu’est-ce qu’un formulaire empilé ?
Un formulaire empilé vous permet de créer un formulaire spécialisé dans lequel vous pouvez placer vos étiquettes et vos entrées les unes sur les autres, plutôt que de les placer dans un motif horizontal.
Voici comment vous pouvez le faire.
Coder le HTML
Utilisez l’élément HTML, <form> , pour traiter vos informations. Ajoutez des étiquettes pour les champs pertinents et attribuez les champs de saisie pertinents. Dans cet exemple, nous demandons aux utilisateurs de fournir leur nom complet et leur adresse e-mail avec le texte de type d’entrée du formulaire , tandis qu’un menu déroulant est créé via l’ identifiant de sélection pour les aider à choisir leur secteur d’activité.
<!DOCTYPE html>
<html>
<body>
<h3>What Is a Stacked Form?</h3>
<p>Here's how you create a stacked form.</p>
<div class="container">
<label for="fullname">Full Name</label>
<input type="text" id="fullname" name="firstname" placeholder="Type your full name">
<label for="email">Email Address</label>
<input type="text" id="email" name="email" placeholder="Type your email ">
<label for="dept">Department</label>
<select id="country" name="country">
<option value="IT">Information Technology</option>
<option value="CS">Customer Support</option>
<option value="Sales">Sales</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</body>
Cependant, l’exécution de ce morceau de code ne produira qu’un formulaire fade sans empiler verticalement les champs. Et c’est là que vous devrez ajouter du CSS.
Coder la partie CSS
Maintenant, créez une feuille de style distincte et ajoutez-la à votre code HTML avant la balise body :
<head> <link rel="stylesheet" href="StackedForm_CSSPart.css"> </head>
Ensuite, sélectionnez le corps, les types d’entrée et le conteneur de votre code HTML et stylisez-les via CSS. Cela inclura l’expérimentation de différentes propriétés CSS, telles que font-family, width, padding, margin, display, border, etc., et ajoutera vos valeurs préférées. De cette façon, vous obtiendrez un formulaire empilé qui correspond exactement à vos préférences. Voici un exemple.
body {
font-family: Calibri;
}
input[type=text], select {
width: 25%;
padding: 12px 20px;
margin: 8px 10;
display: list-item;
border: 4px double #39A9DB;
border-radius: 8px;
box-sizing: border-box;
}
input[type=submit] {
width: 25%;
background-color: #F8E2E6;
color: #0000FF;
padding: 12px 18px;
margin: 20px 0;
border: none;
border-radius: 6px;
cursor: pointer;
}
div.container {
border-radius: 10px;
background-color: #39A9DB;
padding: 40px;
}
Vérifiez la sortie ci-dessous.
VOIR AUSSI: 10 meilleures alternatives Microsoft OneNote pour Android en 2021
Vous pouvez maintenant créer un formulaire empilé en CSS
Avec cet article, vous avez appris à créer un formulaire empilé en CSS. Avec de la pratique, vous pourrez affiner vos formulaires et rendre votre site web plus convivial.
Le nom du jeu de programmation est « pratique ». Améliorez vos compétences CSS jour après jour avec des projets d’exposition pour devenir un concepteur Web élégant et un développeur Web plus efficace.
