How to create a stacked form in CSS

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on reddit
Share on whatsapp

Horizontal alignment is out and vertical is top to top. Build a modern website with stacked forms.

CSS belongs to a unique class of languages, called style sheet languages. It is mainly used to define the presentation of your web page. While HTML lets you specify how your page should be structured, CSS is used to style it. Otherwise, you will end up with a pretty unattractive website.

Focusing on CSS is one of the best ways to improve the curb appeal of your website, especially when it comes to improving your user experience. This way you can also increase your traffic. To get started, you can use a stacked form.

READ ALSO: The 4 Best Pastebin Alternatives for Code and Text Sharing

What is a stacked form?

A stacked form allows you to create a specialized form where you can place your labels and entries on top of each other, rather than placing them in a horizontal pattern.

Here is how you can do it.


Use the HTML element,

, to process your information. Add labels for the relevant fields and assign the relevant input fields. In this example, we are asking users to provide their full name and email address with the text from input type of the form, while a drop-down menu is created via the selection id to help them choose their industry.

<!DOCTYPE html>
<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>
<input type="submit" value="Submit">

However, running this piece of code will only produce a bland form without vertically stacking the fields. And this is where you will need to add CSS.

Code the CSS part

Now create a separate stylesheet and add it to your HTML code before the body tag:

<head> <link rel="stylesheet" href=""> </head>

Then select the body, input types and container of your HTML code and style them through CSS. This will include experimenting with different CSS properties, such as font-family, width, padding, margin, display, border, etc., and add your preferred values. This way you will get a stacked form that exactly matches your preferences. Here is an example.

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;

Check the output below.

SEE AS ​​WELL: 10 best Microsoft OneNote alternatives for Android in 2021

You can now create a stacked form in CSS

With this article, you have learned how to create a stacked form in CSS. With practice, you can refine your forms and make your website more user-friendly.

The name of the programming set is “convenient”. Improve your CSS skills day by day with exhibition projects to become a stylish web designer and more efficient web developer.

Source link

Leave a Reply

Table of Contents