Introduction
A stacked form arranges all form fields in a vertical layout, making it simple and easy to fill out. This is a common layout for mobile-friendly forms. In this guide, you’ll learn how to create a clean and modern stacked form using HTML, CSS, and JavaScript to handle form submission.
Development Steps
- Create Basic HTML Structure: Set up the form fields for name, email, password, and message in a vertical (stacked) layout.
- Style the Form with CSS: Use CSS to style the stacked form fields.
- Handle Form Submission with JavaScript: Capture form data using JavaScript and print it to the console.
Step 1: Create a Basic HTML Structure
We’ll start by building the basic structure of the form. This includes fields for the user's name, email, password, and a message.
<!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>
</head>
<body>
<!-- Step 1: Stacked form -->
<div class="form-container">
<form class="stacked-form" id="stackedForm">
<h2>Contact Us</h2>
<div class="input-group">
<label for="name">Name</label>
<input type="text" id="name" placeholder="Enter your name" required>
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Enter your email" required>
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter your password" required>
</div>
<div class="input-group">
<label for="message">Message</label>
<textarea id="message" placeholder="Enter your message" required></textarea>
</div>
<button type="submit" class="btn">Submit</button>
</form>
</div>
</body>
</html>
Explanation:
- The form contains fields for name, email, password, and a message.
- Each form field is wrapped inside a
div
with the classinput-group
to stack the fields vertically.
Step 2: Style the Form with CSS
Next, we’ll style the form using CSS to ensure that all the form fields are stacked and aligned properly.
<head>
<style>
/* General form styles */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.form-container {
background-color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
.stacked-form h2 {
margin-bottom: 20px;
text-align: center;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 5px;
font-size: 14px;
}
.input-group input, .input-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
.input-group textarea {
height: 100px;
resize: vertical;
}
.btn {
width: 100%;
padding: 10px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #2980b9;
}
@media (max-width: 768px) {
.form-container {
padding: 20px;
}
.input-group input, .input-group textarea, .btn {
font-size: 14px;
padding: 8px;
}
}
@media (max-width: 480px) {
.form-container {
padding: 15px;
}
.stacked-form h2 {
font-size: 18px;
}
.input-group input, .input-group textarea, .btn {
font-size: 12px;
padding: 6px;
}
}
</style>
</head>
Explanation:
- Stacked Layout: The labels and inputs are stacked using
display: block
and appropriate margins to separate them vertically. - Responsiveness: The form layout adjusts for smaller screens using media queries to maintain readability and user experience on mobile devices.
Step 3: Handle Form Submission with JavaScript
We’ll now add JavaScript to handle the form submission, capture the input values, and print them to the console.
<body>
<script>
// Step 3: Handle form submission
document.getElementById('stackedForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the form from refreshing the page
// Capture the input values
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const message = document.getElementById('message').value;
// Print the values to the console
console.log('Name:', name);
console.log('Email:', email);
console.log('Password:', password);
console.log('Message:', message);
});
</script>
</body>
Explanation:
event.preventDefault()
: Prevents the default form submission behavior, stopping the page from refreshing.console.log()
: Logs the form data (name, email, password, message) to the console for testing.
Complete Example
Here’s the full code for the stacked form, combining HTML, CSS, and JavaScript.
<!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>
/* General form styles */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.form-container {
background-color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
.stacked-form h2 {
margin-bottom: 20px;
text-align: center;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 5px;
font-size: 14px;
}
.input-group input, .input-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
.input-group textarea {
height: 100px;
resize: vertical;
}
.btn {
width: 100%;
padding: 10px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #2980b9;
}
@media (max-width: 768px) {
.form-container {
padding: 20px;
}
.input-group input, .input-group textarea, .btn {
font-size: 14px;
padding: 8px;
}
}
@media (max-width: 480px) {
.form-container {
padding: 15px;
}
.stacked-form h2 {
font-size: 18px;
}
.input-group input, .input-group textarea, .btn {
font-size: 12px;
padding: 6px;
}
}
</style>
</head>
<body>
<!-- Step 1: Stacked form -->
<div class="form-container">
<form class="stacked-form" id="stackedForm">
<h2>Contact Us</h2>
<div class="input-group">
<label for="name">Name</label>
<input type="text" id="name" placeholder="Enter your name" required>
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Enter your email" required>
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter your password" required>
</div>
<div class="input-group">
<label for="message">Message</label>
<textarea id="message" placeholder="Enter your message" required></textarea>
</div>
<button type="submit" class="btn">Submit</button>
</form>
</div>
<script>
// Step 3: Handle form submission
document.getElementById('stackedForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the form from refreshing the page
// Capture the input values
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const message = document.getElementById('message').value;
// Print the values to the console
console.log('Name:', name);
console.log('Email:', email);
console.log('Password:', password);
console.log('Message:', message);
});
</script>
</body>
</html>
Output
Conclusion
In this tutorial, you learned how to create a stacked form using HTML, CSS, and JavaScript. The form stacks all the input fields vertically and collects user data such as name, email, password, and message. You can enhance this form further by adding validations or sending the data to a server for processing.
Comments
Post a Comment
Leave Comment