DEV Community 👩‍💻👨‍💻

Cover image for How to create a registration form
Stackfindover
Stackfindover

Posted on • Updated on

How to create a registration form

Hello, guys in this tutorial we will create a registration form design using HTML and CSS

Common Query

  1. How to create a registration form
  2. HTML registration form
  3. signup registration form

Hello, guys In this tutorial we will try to solve above mention query. and also we will learn how to create a registration form design using HTML and CSS

First, we need to create three files index.html and style.css then we need to do code for it.

Step:1

Add below code inside index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Registration Form</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500&display=swap" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
</head>
<body>
  <div class="wrapper">
    <div class="grid-row full-screen">
      <div class="colmun colmun-left bg-col-left"></div>
      <div class="colmun colmun-right">
        <div class="form_outer">
          <div class="form">
            <form action="" class="sign-with-email">
              <div class="field logo">
                <a href="#">
                  <img src="logo.png" alt="logo">
                </a>
              </div>
              <div class="field">
                <label for="FullName">Full Name</label>
                <input type="text" name="FullName">
              </div>

              <div class="field">
                <label for="Email">Email</label>
                <input type="email" name="Email">
              </div>

              <div class="field">
                <label for="Password">Password</label>
                <input type="password" name="Password">
              </div>

              <div class="field">
                <label for="Cpassword">Type your password again</label>
                <input type="text" name="Cpassword">
              </div>

              <div class="field button-field">
                <input type="submit" name="submit" value="Sign Up">
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    $("input").focus(function(){
      $(this).parents(".field").addClass("focus-input");
    });

    $("input").blur(function(){
      var inputValue = $(this).val();

      if(inputValue == '') {
        $(this).parents(".field").removeClass("focus-input");
      }
    });
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Download Image

Step:2

Then we need to add code for style.css which code I provide in the below screen.

* {
  padding: 0;
  margin: 0;
  outline: 0;
  color: #444;
  box-sizing: border-box;
  font-family: 'IBM Plex Sans', sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
.grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
  width: 100vw;
  height: 100vh;
}
.colmun {
  width: 100%;
  height: 100%;
}
.bg-col-left {
  background: url(left-img.webp) no-repeat center / cover;
}
.form .field {
  position: relative;
  margin-bottom: 15px;
}
label {
  color: #162d3d;
  position: absolute;
  left: 0;
  top: 15px;
  pointer-events: none;
  padding-left: 10px;
  transition: 0.5s ease-in-out;
}
input[type="text"], input[type="email"], input[type="password"] {
  font-size: 16px;
  font-weight: 100;
  display: block;
  border: unset;
  border-bottom: 1px solid #d6d6d6;
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  outline: 0;
  padding: 0 10px;
  color: #162d3d;
}
.form_outer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
form.sign-with-email {
  display: block;
  width: 100%;
  max-width: 400px;
  padding: 20px;
  background: #f2f4f6;
}
input[type="submit"] {
  border: #116dff;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 18px;
  background: #116dff;
  padding: 10px 0;
  cursor: pointer;
  outline: 0;
  color: #fff;
}
.field.focus-input label {
  font-size: 12px;
  top: -8px;
  color: #116dff;
}
Enter fullscreen mode Exit fullscreen mode

Registration form video output:

Top comments (0)

👋 Every week new members join DEV and share a bit about them in our Welcome Thread

 
Welcome them to DEV and share a bit about yourself