Web code

Follow us on Instagram for updates link
Home
CSS

Sign Up Form Using HTML, CSS, and JavaScript

Creating a "Sign Up" Form Using HTML, CSS, and JavaScript

Published on January 3, 2025

A "Sign Up" form allows new users to create an account on a website. In this post, we'll demonstrate how to create a simple "Sign Up" form with user-friendly design using HTML, CSS, and JavaScript.



HTML Code



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Sign Up Form</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="form-container">

        <h2>Sign Up</h2>

        <form id="signUpForm">

            <label for="username">Username:</label>

            <input type="text" id="username" name="username" placeholder="Enter your username" required>

            <label for="email">Email:</label>

            <input type="email" id="email" name="email" placeholder="Enter your email" required>

            <label for="password">Password:</label>

            <input type="password" id="password" name="password" placeholder="Enter your password" required>

            <label for="confirmPassword">Confirm Password:</label>

            <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Confirm your password" required>

            <button type="submit">Sign Up</button>

        </form>

        <div id="responseMessage"></div>

    </div>

    <script src="script.js"></script>

</body>

</html>

CSS Code



body {

    font-family: Arial, sans-serif;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    margin: 0;

    background-color: #e5e5e5;

}

.form-container {

    background: #fff;

    padding: 20px;

    border-radius: 10px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    width: 400px;

    text-align: left;

}

h2 {

    color: #333;

    margin-bottom: 20px;

    text-align: center;

}

label {

    display: block;

    margin-bottom: 5px;

    font-weight: bold;

    color: #555;

}

input {

    width: 100%;

    padding: 10px;

    margin-bottom: 15px;

    border: 1px solid #ccc;

    border-radius: 5px;

    font-size: 14px;

}

button {

    background: #007BFF;

    color: #fff;

    border: none;

    padding: 10px 20px;

    border-radius: 5px;

    cursor: pointer;

    width: 100%;

    font-size: 16px;

    transition: background 0.3s ease;

}

button:hover {

    background: #0056b3;

}

JavaScript Code



document.getElementById("signUpForm").addEventListener("submit", function (e) {

    e.preventDefault();

    const username = document.getElementById("username").value;

    const email = document.getElementById("email").value;

    const password = document.getElementById("password").value;

    const confirmPassword = document.getElementById("confirmPassword").value;

    if (password === confirmPassword) {

        document.getElementById("responseMessage").textContent = "Sign Up Successful!";

        document.getElementById("responseMessage").style.color = "green";

        this.reset();

    } else {

        document.getElementById("responseMessage").textContent = "Passwords do not match. Please try again.";

        document.getElementById("responseMessage").style.color = "red";

    }

});

How It Works

1. **HTML**: The form consists of fields for the user's username, email, password, and password confirmation. 2. **CSS**: The form is styled to be visually appealing, responsive, and centered on the page for a better user experience. 3. **JavaScript**: The script checks if the passwords entered by the user match. If they do, a success message is displayed; otherwise, an error message is shown. The form is reset after successful submission.