css signup form design | css projects | using html and css

Published At: 1 year ago

Published By: Santosh Kumar

Downloads: 0

Watch Video

html css form

Create html and css signup form:

This is an HTML document for a signup form. It includes various input fields such as first name, last name, email, password, gender selection with radio buttons, and subject selection with checkboxes. The form is styled using an external CSS file named "project1.css." Users can fill out this form to sign up for a service or website.

1. Create html file project1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="project1.css">
</head>
<body>

    <div class="formContainer">
        <h2 class="formHeading">Signup Form</h2>
        <form action="" class="signupForm">
            <div class="inputGroup">
                <label for="firstname">First name</label>
                <input type="text" id="firstname" name="firstname" class="inputField" autocomplete="off" placeholder="First name">
            </div>
            <div class="inputGroup">
                <label for="lastname">Last name</label>
                <input type="text" id="lastname" name="lastname" class="inputField" autocomplete="off" placeholder="Last name">
            </div>
            <div class="inputGroup">
                <label for="email">Email</label>
                <input type="text" id="email" name="email" class="inputField" autocomplete="off" placeholder="Email">
            </div>
            <div class="inputGroup">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" class="inputField" autocomplete="off" placeholder="Password">
            </div>
            <div class="inputGroup">
                <label for="gender">Gender</label> <br>
                <input type="radio" name="gender" class="inputField"> Male
                <input type="radio" name="gender" class="inputField"> Female
            </div>
            <div class="inputGroup">
                <label for="subjects">Subjects</label> <br>
                <input type="checkbox" name="subjects" class="inputField"> HTML
                <input type="checkbox" name="subjects" class="inputField"> CSS
                <input type="checkbox" name="subjects" class="inputField"> JAVASCRIPT
            </div>
            <div class="inputGroup">
                <button type="submit" class="signupButton">Signup</button>
            </div>
        </form>
    </div>
    
</body>
</html>

2. Create css file project1.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

*{
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

body{
    background-color: aliceblue;
}

.formContainer{
    background-color: #ffff;
    max-width: 400px;
    min-width: 250px;
    margin: 50px auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.064);
}

.formHeading{
    padding-bottom: 20px;
    text-align: center;
}

.inputGroup{
     width: 80%;
     margin: 20px auto;
}

.inputGroup input:not(input[type="radio"], input[type="checkbox"]){
    width: 100%;
    padding: 10px 0;
    border: 0;
    border-bottom: 2px solid indigo;
    outline: none;
}

.inputGroup:nth-child(5) input{
    margin-top: 10px;
}

.inputGroup:nth-child(6) input{
    margin-top: 10px;
}

.inputGroup input[type="checkbox"]{
    width: 15px;
    height: 15px;
}

.signupButton{
    border: 0;
    background-color: purple;
    color: #ffff;
    padding: 10px 20px;
    font-size: 17px;
    border-radius: 5px;
    cursor: pointer;
}

Home Page html css template | html css project

JavaScript Image Slider Tutorial & Source Code

HTML CSS Dropdown Navigation Tutorial & Source Code

CSS Sticky Navbar Tutorial & Source Code

HTML CSS Profile Card Project | Source Code & Tutorial

css signup form design | css projects | using html and css

Thewebsources

Our Services

Explore Projects

Important Pages