Horje
How to Create a Stacked Form using CSS ?

A Vertically Stacked Form places labels and inputs on top of each other. To create a stacked form using CSS, we will first define a container with a maximum width, padding, and border radius for styling.

Preview:

Screenshot-2024-02-08-105949

Approach:

  • Begin by creating the basic HTML structure, including the form container and form elements using appropriate tags.
  • Apply CSS styles to the container, setting its maximum width, padding, border radius, and subtle box shadow for a clean appearance.
  • Style form elements individually, adjusting their width, padding, borders, and font size. Ensure a consistent and visually appealing look.
  • Use flexbox or grid CSS properties to center the form container on the page, creating a balanced and aesthetically pleasing layout.
  • Include placeholder attributes within input fields to provide users with guidance on the expected input for each form element.

Example: Implementation to design a stacked form using CSS properties.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1.0">
    <title>Stacked Form</title>
    <link rel="stylesheet" href="style.css">
</head>
  
<body>
    <div class="custom-form">
        <h2>Stacked Form</h2>
        <form>
            <label for="firstName">First Name:</label>
            <input type="text" 
                   id="firstName"
                   name="firstName" 
                   placeholder="Enter your first name" 
                   autocomplete="off" required>
  
            <label for="lastName">Last Name:</label>
            <input type="text" 
                   id="lastName" 
                   name="lastName" 
                   placeholder="Enter your last name" 
                   autocomplete="off" required>
  
            <label for="mobileNumber">Mobile Number:</label>
            <input type="tel" maxlength="10" 
                   id="mobileNumber"
                   name="mobileNumber" 
                   placeholder="Enter your mobile number" 
                   autocomplete="off" required>
  
            <label for="dob">Date of Birth:</label>
            <input type="date" 
                   id="dob"
                   name="dob" required>
  
            <button type="submit">Submit</button>
        </form>
    </div>
</body>
  
</html>

CSS

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
  
.custom-form {
    max-width: 450px;
    width: 100%;
    padding: 25px;
    border-radius: 10px;
    border: 2px solid green;
    box-shadow: 0 0 10px rgba(85, 255, 34, 0.5);
}
  
.custom-form h2 {
    text-align: center;
}
  
.custom-form label {
    display: block;
    margin-bottom: 8px;
    color: #555;
}
  
.custom-form input,
.custom-form select {
    padding: 12px;
    width: 100%;
    font-size: 16px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 4px;
    margin-bottom: 16px;
}
  
.custom-form button {
    color: #fff;
    cursor: pointer;
    background-color: #4caf50;
    width: 100%;
    border: none;
    border-radius: 4px;
    padding: 12px;
    font-size: 16px;
}

Output:

gty


 


Reffered: https://www.geeksforgeeks.org

Web Technologies

Related
How to create a Responsive Navigation Bar in Tailwind CSS ? How to create a Responsive Navigation Bar in Tailwind CSS ?
How to create a Social Media Login Form using CSS ? How to create a Social Media Login Form using CSS ?
How to create a Fixed Navigation Bar in CSS ? How to create a Fixed Navigation Bar in CSS ?
How to create a Horizontal List in HTML ? How to create a Horizontal List in HTML ?
What is the purpose of the &lt;aside&gt; Element in HTML5? What is the purpose of the &lt;aside&gt; Element in HTML5?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 13



 

Horje