Create a Stacked Form using CSS
A stacked form layout is a common design pattern where form elements are displayed vertically, one on top of the other. This layout is often used for simplicity and clarity in user interfaces. In this article, we will explore the process of creating a Stacked Form using CSS.
Approach
- Create a <div> element with a class of “form-container” to hold the form inside <body>.
- Create a <form> element to encapsulate the form fields within the “form-container” <div>.
- Inside the <form> element, create form fields using <div> elements with a class of “form-group”.
- Add <input> elements for each form field with appropriate type attributes such as “text”, “password”, “email”, “tel”, etc, and set the id and name attributes accordingly.
- Ensure that all required fields are marked with the “required” attribute.
- Add a “required” attribute for each field for form validation.
- Define CSS styles for the form container, form groups, labels, input fields, and submit button.
Example: Implementation To Create a Stacked Form using CSS.
<!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>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.form-container {
max-width: 400px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 2px solid #007bff;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
color: #333;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
button {
width: 95%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
transition: border-color 0.3s ease;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus {
border-color: dodgerblue;
outline: none;
}
button {
background-color: dodgerblue;
width: 100%;
color: #fff;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #007bff;
}
h2{
text-align: center;
color: green;
}
h3{
text-align: center;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Welcome to w3wiki</h2>
<h3>Stacked form</h3>
<form>
<div class="form-group">
<label for="username">Username:</label>
<input type="text"
id="username"
name="username" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password"
id="password"
name="password" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email"
name="email" required>
</div>
<div class="form-group">
<label for="phone">Phone:</label>
<input type="tel"
id="phone"
name="phone" required>
</div>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
Output: