Home-theater-designers
CSS appartient à une classe unique de langages, appelés langages de feuille de style. Il est principalement utilisé pour 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é.
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, , 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 type de saisie du formulaire texte , alors qu'un menu déroulant est créé via sélectionner l'identifiant pour les aider à choisir leur secteur d'activité.
What Is a Stacked Form?
Here's how you create a stacked form.
Full Name
Email Address
Department
Information Technology
Customer Support
Sales
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.
déverrouiller mon téléphone sur n'importe quel réseau gratuitement
Coder la partie CSS
Maintenant, créez une feuille de style distincte et ajoutez-la à votre code HTML avant la balise body :
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.
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.
puis-je imprimer un livre Kindle
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.
Partager Partager Tweeter E-mail 10 exemples de code CSS simples que vous pouvez apprendre en 10 minutesBesoin d'aide avec CSS? Essayez ces exemples de code CSS de base pour commencer, puis appliquez-les à vos propres pages Web.
Lire la suite Rubriques connexes- La programmation
- Développement web
- CSS
Usman est un spécialiste du marketing de contenu qui a aidé plusieurs entreprises à croître de manière organique sur les plateformes numériques. Il aime à la fois la programmation et l'écriture, ce qui signifie que l'écriture technique est quelque chose qu'il aime beaucoup. Lorsqu'il ne travaille pas, Usman aime passer du temps à regarder des émissions de télévision, à suivre le cricket et à lire sur l'analyse de données.
Plus de Usman GhaniAbonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner