How To Create User Register Form Using HTML and CSS

How to create User Register Form Using HTML and CSS
Create User Register Form

Introduction

Today in this Article we will learn How To Create User Register Form Using HTML and CSS. We already uploaded a full described Video on Our Channel in YouTube. So User Register Form is the one of the best Things to interact user to your website.

In this case any user can register in your site and be the part of your website. If you have an organisation so this is the very best things. But We cannot give the full Code. Means we just create a proper structure and design it.

But if you want to make it full workable so you have to Put JavaScript Code and give some conditions. But We provide only for Education purpose that other people can learn that how the structure will make and how to design.

Source code

Now the times will come where we provide the full source code. We already make a video about it but we can not provide any type of code on that video. So This article may be helpful to you.

Now We have 2 types of  Source Code, First one is in HTML format and second one is CSS Format.

HTML

<!DOCTYPE html>

<html>

  <head>

   <link rel="stylesheet" href="style.css" type="text/css" media="all" />

    <title>User Register Form</title>

  </head>

  <body>

    <div class="logo">

      <i class="far mt-logo fa-user-circle"></i><br />

      <h2>User Register Form</h2>

      <hr />

    </div>

    <h3><i class="fas fa-file-signature"> Name</i></h3>

    <input class="name" type="text/submit/hidden/button/image" placeholder="Enter Full Name" />

    <br />

    <h3><i class="fas fa-address-card"> Address</i></h3>

    <input type="text/submit/hidden/button/image" placeholder="Enter Address" />

    <br />

    <h3><i class="fas fa-phone-volume"> Phone Number</i></h3>

    <input type="number" placeholder="Enter Phone Number" />

    <br />

    <h3><i class="fas fa-lock"> Password</i></h3>

    <input type="password" placeholder="Enter Password" />

    <br /><br />

    <input type="password" placeholder="Confirm Password" />

    <p class="warn">* Password must be One Character, One Number, One Special Character</p>

    <br />

    <h3><i class="fas fa-calendar-day"> Birthday</i></h3>

    <input type="date" value="Date"/>

    <br />

    <!-- Now it Time to Create Check Box -->

    <h3><i class="fas fa-venus-mars"> Gender</i></h3>

<input class="ck" type="checkbox"><b>Male</b>

<input class="ck" type="checkbox"><b>Female</b>

<input class="ck" type="checkbox"><b>Others</b>

    <br /><br />

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

    

    

    <script src="https://kit.fontawesome.com/70a1054e88.js" crossorigin="anonymous"></script>

  </body>

</html>

CSS

* {

  background: #f2f2f2;

}

.logo {

  text-align: center;

}

.mt-logo {

  font-size: 50px;

}

hr {

  background: black;

  border: solid black 1px;

}

input {

  border: solid blue 2px;

  border-radius: 10px;

  box-shadow: silver 1px 0px 4px 2px;

  height: 30px;

}

input:hover {

  border: solid red 2px;

}

.warn {

  color: red;

  text-shadow: black 1px 1px;

}

button {

  background: linear-gradient(to right,lightgreen,yellow);

  height: 40px;

  width: 70px;

  border: solid black 1px;

  border-radius: 10px;

  box-shadow: 2px 0px 10px 5px silver;

}

button:hover {

  background: yellow;

  border: 2px black dashed ;

  box-shadow: 1px 0px 20px 3px red;

}

.ck {

  box-shadow: white 1px 0px 4px 2px;

 

}

okey friends i hope you understand this article. And wait for more interesting article come on this blog.
Show comments
Hide comments

2 Comments

Cancel