Sign up and Login form with HTML and CSS

In this article, you will learn how to create Sign up and Login form using HTML and CSS.I have shared another snippet based on how to create a simple Sign in form. In this tutorial, I have created a Sign Up and Login form using HTML and CSS, If you like this article, please also subscribe my YouTube channel - Code Info

HTML forms are required to collect different kinds of user data inputs, such as contact information like name, email address, phone numbers and credit card information, etc.

Below is the video tutorials. watch and practices

HTML form is created with the help of <form> </form> tag and within this tag you will have all the input elements for taking user input. Web Form or HTML form is very flexible and it can have many input fields of different types such as text field, password filed, radio button, combo box etc.

Forms contain unique factors known as controls like inputbox, checkboxes, radio-buttons, submit buttons, and so on. Customers normally complete a form through enhancing its controls e.g. Entering textual content, choosing gadgets, and so forth. and submitting this form to a web server for further processing.

Source Code:

If you like this this Login Form design, then feel free to use it in your project. Copy the code by clicking on Copy button provided below.

First, you have to create two files. One of them is HTML, and the other one is CSS. After creating the files, paste the code provided below.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Sign Up | By Code Info</title>
    <link rel="stylesheet" href="Css/style.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="signup-box">
      <h1>Sign Up</h1>
      <h4>It's free and only takes a minute</h4>
      <form>
        <label>First Name</label>
        <input type="text" placeholder="" />
        <label>Last Name</label>
        <input type="text" placeholder="" />
        <label>Email</label>
        <input type="email" placeholder="" />
        <label>Password</label>
        <input type="password" placeholder="" />
        <label>Confirm Password</label>
        <input type="password" placeholder="" />
        <input type="button" value="Submit" />
      </form>
      <p>
        By clicking the Sign Up button,you agree to our <br />
        <a href="#">Terms and Condition</a> and <a href="#">Policy Privacy</a>
      </p>
    </div>
    <p class="para-2">
      Already have an account? <a href="login.html">Login here</a>
    </p>
  </body>
</html>

Login HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Login | By Code Info</title>
    <link rel="stylesheet" href="Css/style.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="login-box">
      <h1>Login</h1>
      <form>
        <label>Email</label>
        <input type="email" placeholder="" />
        <label>Password</label>
        <input type="password" placeholder="" />
        <input type="button" value="Submit" />
      </form>
    </div>
    <p class="para-2">
      Not have an account? <a href="signup.html">Sign Up Here</a>
    </p>
  </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you have to create a file with .css extension.

CSS CODE:

body {
  background-color: #344a72;
  font-family: "Roboto", sans-serif;
}

.signup-box {
  width: 360px;
  height: 620px;
  margin: auto;
  background-color: white;
  border-radius: 3px;
}

.login-box {
  width: 360px;
  height: 280px;
  margin: auto;
  border-radius: 3px;
  background-color: white;
}

h1 {
  text-align: center;
  padding-top: 15px;
}

h4 {
  text-align: center;
}

form {
  width: 300px;
  margin-left: 20px;
}

form label {
  display: flex;
  margin-top: 20px;
  font-size: 18px;
}

form input {
  width: 100%;
  padding: 7px;
  border: none;
  border: 1px solid gray;
  border-radius: 6px;
  outline: none;
}
input[type="button"] {
  width: 320px;
  height: 35px;
  margin-top: 20px;
  border: none;
  background-color: #49c1a2;
  color: white;
  font-size: 18px;
}
p {
  text-align: center;
  padding-top: 20px;
  font-size: 15px;
}
.para-2 {
  text-align: center;
  color: white;
  font-size: 15px;
  margin-top: -10px;
}
.para-2 a {
  color: #49c1a2;
}

I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for Visiting.

6 Comments

Samir Khanal (Admin)August 25, 2021 at 8:55 PM
Bro Please I need a detect adblocker code u showed in your youtube video. You said that I can find it in your website but when searching here I could not find it. Please provide me the link.
UnknownSeptember 26, 2021 at 10:48 PM

Please help me I can not cry as shown in this video
UnknownMarch 31, 2022 at 7:49 AM
how do i combine them
Tech. DjMay 7, 2022 at 9:03 AM
thanks for your help

You may like this:

Source Code:

6 Comments

Post a Comment

About Us

Contact Form