How To Design a Register Form Easily By Using Html and Css and Bootstrap

Posted By Bajarangi soft , Posted On 29-09-2020

How to design a register form easily by using html and css and bootstrap .by using html will give content to the form and css will give a styles to the page and finally using bootstrap to get a perfect form.we created just using html and css and bootstrap.

First Need to Create HTML File
1.Add the HTML5 Doctype

<!DOCTYPE html>
<html>
<head>
    <title>register form</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

2.You Need to Add this link Inside HTML file

3.Create HTML File
register.html

<body>
<div class="container">
    <div class="row">
        <div class="col-md-10 offset = md-1">
        </div>
        <div class="col-md-5 register-left">
            <img src="logo2.jpg">
            <h1 class="aa">Join us</h1></div>
        <div class="col-md-7 register-right">
            <br>
            <h2>REGISTER NOW</h2>
            <br>
            <form action="">
                <div class="form-group">
                    <label> Email</label>
                    <i class="fa fa-envelope"></i>
                    <input type="email" class="form-control"  placeholder="Enter email" name="email">


                </div>
                <div class="form-group">
                    <label> Name</label>
                    <i class="fa fa-user"></i>
                    <input type="user name" class="form-control"  placeholder="Enter username" name="pswd">
                </div>
                <div class="form-group">
                    <label>Pass word</label>
                    <i class="fa fa-lock"></i>
                    <input type="password" class="form-control"  placeholder="Enter password" name="pswd">
                </div>

                <div class="form-group">
                    <label> confirm Pass word</label>
                    <i class="fa fa-lock"></i>
                    <input type="password" class="form-control"  placeholder="Enter password" name="pswd">
                </div>


                <input type="radio" id="male" name="gender" value="male">
                <label for="male">Male</label><br>
                <input type="radio" id="female" name="gender" value="female">
                <label for="female">Female</label><br>
                <input type="radio" id="other" name="gender" value="other">
                <label for="other">Other</label>
                <br><br>
                <div class="form-group">
                    <label>country
                        <select>
                            <option>australia</option>
                            <option>india</option>
                            <option>usa</option>
                            <option>us</option>
                            <option>canada</option>
                        </select>
                    </label>
                </div>
                <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
                <label for="vehicle1"> I agree terms and conditions</label><br>
                <button type="submit" class="btn btn-primary">Register</button>
            </form>
            <br>
        </div>
    </div>
</div>

</body>

4.Create a Css file ,Inside your Css Folder
style.css

body{
    background-image: url("s2.jpg");
    margin-top:30px !important;
    background-size: cover;
}
.register-left{
    text-align:center;
    color:#fff;
    padding:30px;
}
.register-left p
{
    padding : 20px 20px 0 ;
}

.register-right {
    border: none;
    background: #f8f8f8;
    border-top-left-radius: 10% 50%;
    border-bottom-left-radius: 10% 50%;
    padding: 60px;
}

.register-right .btn-primary{
    border-radius:1.5rem;
    border:none;
    color: #f3eded;
    background: #f6eae6;
    font-weight:500;
    padding:10px;
    margin-left:260px;

}
.register-right h2
{
    text-align:center;
    margin-bottom:10px;
    color:#555;
}
.register-right .btn-primary:hover
{
    background: #131a19;
}

.register-left {
    text-align:center;
    color:#fff;
    padding:30px;
}

.register-right{
    border:none;
    background:#f8f8f8;
    border-top-left-radius: 10% 50%;
    border-bottom-left-radius: 10% 50%;
    padding:60px;
}
.register-right .btn-primary{
    border-radius:1.5rem;
    border:none;
    color: #555555;
    background:#ff5722;
    width:120px;
    font-weight:600;
}
.register-left{
    text-align:center;
    color:#fff;
    padding:0px;
    border-style:solid;
    background-color: #50bcd0;
}
.register-right {
    border-style: solid;
    border-color: white;
    background: #f8f8f8;
    border-top-left-radius: 0% 50%;
    border-bottom-left-radius: 0% 50%;
    margin-right: -10px;
    max-width: 40%;
}
.register-right h2
{
    text-align:center;
    margin-bottom:10px;
    color:#555;
}
.register-right .btn-primary:hover
{
    background: #9a8d8d;
}
.register-left img
{

    width:110px;
    margin-right:-25px;
    border-radius: 60%;
    margin-top:212px;
}
.aa h1{
    color:white;
    margin-right:-25px;
}
body{
    background-image: url("s2.jpg");
    margin-top:50px !important;
    background-size: cover;
}
.register-left{
    text-align:center;
    color:#fff;
    padding:0px;
}
.register-left p
{
    padding : 20px 20px 0 ;
}

.register-right {
    border: none;
    background: #f8f8f8;
    border-top-left-radius: 10% 50%;
    border-bottom-left-radius: 10% 50%;
    padding: 0px;
}

.register-right .btn-primary{
    border-radius:1.5rem;
    border:none;
    color: #f3eded;
    background: #f6eae6;
    font-weight:500;
    padding:10px;
    margin-left:260px;

}
.register-right h2
{
    text-align:center;
    margin-bottom:10px;
    color:#555;
}
.register-right .btn-primary:hover
{
    background: #131a19;
}

.register-left {
    text-align:center;
    color:#fff;
    padding:30px;
}


.register-right .btn-primary{
    border-radius:1.5rem;
    border:none;
    color: black;
    background: #1ecba2;
    width:120px;
    font-weight:600;
    margin-top:0;
}
.register-left{
    text-align:center;
    color:#fff;
    padding:30px;
    border-style:solid;
    background-color: #50bcd0;
}
.register-right {
    border-style: solid;
    border-color: white;
    background: #f8f8f8;
    border-top-left-radius: 0% 50%;
    border-bottom-left-radius: 0% 50%;
    margin-right: -10px;
    max-width: 40%;
}
.register-right h2
{
    text-align:center;
    margin-bottom:10px;
    color:#555;
}
.register-right .btn-primary:hover
{
    background: #9a8d8d;
}
.register-left img
{

    width:110px;
    margin-right:-25px;
    border-radius: 60%;
    margin-top:212px;
}
.aa h1{
    color:white;
    margin-right:-25px;
}
.form-group i{
    width:26px;
    float:left;
    text-align:center;
    color: #1f1c1c;
    margin-top: 6px;
}

.form-group{
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 41.333333%;
    }
.form-group input{
    padding:29px;
    width:510px;
}

5.Complete code of HTML File

<!DOCTYPE html>
<html>
<head>
    <title>register form</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-10 offset = md-1">
        </div>
        <div class="col-md-5 register-left">
            <img src="logo2.jpg">
            <h1 class="aa">Join us</h1></div>
        <div class="col-md-7 register-right">
            <br>
            <h2>REGISTER NOW</h2>
            <br>
            <form action="">
                <div class="form-group">
                    <label> Email</label>
                    <i class="fa fa-envelope"></i>
                    <input type="email" class="form-control"  placeholder="Enter email" name="email">


                </div>
                <div class="form-group">
                    <label> Name</label>
                    <i class="fa fa-user"></i>
                    <input type="user name" class="form-control"  placeholder="Enter username" name="pswd">
                </div>
                <div class="form-group">
                    <label>Pass word</label>
                    <i class="fa fa-lock"></i>
                    <input type="password" class="form-control"  placeholder="Enter password" name="pswd">
                </div>

                <div class="form-group">
                    <label> confirm Pass word</label>
                    <i class="fa fa-lock"></i>
                    <input type="password" class="form-control"  placeholder="Enter password" name="pswd">
                </div>


                <input type="radio" id="male" name="gender" value="male">
                <label for="male">Male</label><br>
                <input type="radio" id="female" name="gender" value="female">
                <label for="female">Female</label><br>
                <input type="radio" id="other" name="gender" value="other">
                <label for="other">Other</label>
                <br><br>
                <div class="form-group">
                    <label>country
                        <select>
                            <option>australia</option>
                            <option>india</option>
                            <option>usa</option>
                            <option>us</option>
                            <option>canada</option>
                        </select>
                    </label>
                </div>
                <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
                <label for="vehicle1"> I agree terms and conditions</label><br>
                <button type="submit" class="btn btn-primary">Register</button>
            </form>
            <br>
        </div>
    </div>
</div>

</body>
</html>

Related Post

How To Create Register Form Using Html ,Bootstarp And Css
How To Create Login Form Using Html , Bootstrap And Css
How To Design Flutter Login And Register Screens UI Example
Create A Simple Register Form With Flutter Using Android
How to crerate a Register form easily by using Html,Css and Bootstrap
how to create a register form using css and html and bootstrap
How Can I Create Register Form By Using Html and Css and Bootstrap
How To Create a Register From Just by Using Html and Css and Bootstrap
How To Design a Register Form Easily By Using Html and Css and Bootstrap
Design Valid and Invalid Register Form By Using Html and Css and bootstrap