Monday , October 26 2020

Home / HTML Template / HTML Sign Up Form
signup form

HTML Sign Up Form


HTML Sign Up Form Beautifull Design For the backend designer.who have for need signup Form need for registration people this is very and Attractive Design also has the form validation.

Form Information:

  • Form name: Sign Up Form
  • License: Open Source.
  • Compatible Browsers: Google Chrome, Firefox, Safari, IE 10, Opera etc.
  • High Resolution: Yes.
  • Layout: Fluid Responsive Layout.

You can view another article :

HTML5 Element List, tags
5 Best CSS Learning Website
10 best Web Design Learning Site(Free)


Create an HTML File and Pest the Code in the File

<!DOCTYPE html>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=divice-width, initial-scale = 1.0">
  <link href="" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <div class="form-area">
    <h1>Sign Up</h1>
    <form action="">
      <div class="input-area">
        <input type="text" class="inp">
        <label for="">First Name:</label>

      <div class="input-area">
        <input type="text" class="inp">
        <label for="">Last Name:</label>

      <div class="input-area">
        <input type="text" class="inp">
        <label for="">User Name:</label>
            <div class="input-area">
        <label for="">Date of Birth:</label>
        <select name="" id="">
          <option value="">Month</option>
          <option value="">January</option>
          <option value="">february</option>
          <option value="">march</option>
          <option value="">april</option>
          <option value="">May</option>
          <option value="">jun</option>
          <option value="">july</option>
          <option value="">august</option>
          <option value="">september</option>
          <option value="">october</option>
          <option value="">novembar</option>
          <option value="">december</option>
        <select name="" id="">
          <option value="">Day</option>
          <option value="">1</option>
          <option value="">2</option>
          <option value="">3</option>
          <option value="">4</option>
          <option value="">5</option>
          <option value="">6</option>
          <option value="">7</option>
          <option value="">8</option>
          <option value="">9</option>
          <option value="">10</option>
          <option value="">11</option>
          <option value="">12</option>
          <option value="">13</option>
          <option value="">14</option>
          <option value="">15</option>
          <option value="">16</option>
          <option value="">17</option>
          <option value="">18</option>
          <option value="">19</option>
          <option value="">20</option>
          <option value="">21</option>
          <option value="">22</option>
          <option value="">23</option>
          <option value="">24</option>
          <option value="">25</option>
          <option value="">25</option>
          <option value="">26</option>
          <option value="">27</option>
          <option value="">28</option>
          <option value="">29</option>
          <option value="">30</option>
          <option value="">31</option>
        <select name="" id="">
          <option value="">Month</option>
          <option value="">2010</option>
          <option value="">2011</option>
          <option value="">2012</option>
          <option value="">2013</option>
          <option value="">2014</option>
          <option value="">2016</option>
          <option value="">2017</option>
          <option value="">2018</option>
          <option value="">2019</option>

            <div class="input-area">
        <input type="radio" class="inp" name="gender" value="Male">Male
        <input type="radio" class="inp" name="gender" value="Female">Female
        <label for="">Gender:</label>

      <div class="input-area">
        <select name="" id="country">
          <option value="">Bangladesh</option>
          <option value="">India</option>
          <option value="">Pakistan</option>
          <option value="">Malesia</option>
        <label for="country">Country:</label>

      <div class="input-area">
        <input type="email" class="inp">
        <label for="">Email:</label>

      <div class="input-area">
        <i class="fa fa-eye" id="show"></i>
        <input type="password" class="showpass" id="pass">
        <label for="">Password:</label>
      <div class="input-area">
        <input type="password">
        <label for="">Confirm Password:</label>

      <div class="input-area">
        <input type="tel" class="inp">
        <label for="">Phone Number:</label>
      <div class="confirm">
         <input type="checkbox" id="check">
         <label for="check">I agree to the terms of usage & condition</label>
      <div class="input-area submit">
        <input type="submit" value="Submit">
        <input type="reset" value="Reset">

    var pass = document.getElementById('pass');
    var show = document.getElementById('show');

    function showHide(){



Create a Style.css file and pest the Code in the Css file

  margin: 0;
  padding: 0;
  box-sizing: border-box;

  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh;

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  padding: 10px;
  background-color: rgba(100,90,0,.8);
  width: 500px;
  box-shadow: 0 0 10px 10px rgba(0,0,0,.3);
  border-radius: 10px;
  overflow: hidden;

  content: "";
  position: absolute;
  width: 100%;
  height: 150%;
  background-color: rgba(0,0,0,.3);
  left: 135px;
  top: 95%;
  transform:translateY(-50%) rotate(45deg);
  z-index: -1;

.form-area h1{
  text-align: center;
  color: #fff;
  padding: 10px;
  font-size: 45px;

  margin-bottom: 10px;
  font-size: 20px;
  position: relative;

  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  float: left;
  font-weight: bold;
  font-size: 20px;
  margin-right: 10px;
  color: #000;
  width: 180px;

  font-size: 20px;
  border: none;
  padding: 5px 10px;

  font-size: 20px;
  padding: 5px 1px;
  background-color: #ff0;
  color: #000;
  padding: 4px;
  height: 20px;
  width: 20px;
  vertical-align: middle;
  margin-right: 5px;
  background-color: #ff0;
  color: #000;
  padding: 4px;

.confirm label{
  float: none;

.confirm input[type="checkbox"]{
   display: none;

.confirm input[type="checkbox"]+label:before{
  content: "\2714";
  border: 1px solid #000;
  display: inline-block;
  padding:0px 5px;
  vertical-align: bottom;
  margin-right: 10px;
  color: transparent;
  border-radius: 5px;

.confirm input[type=checkbox]:checked + label:before{
  color: #fff;
  background-color: #000;
  margin-top: 20px;
  text-align: center;

.submit input[type='submit']{
  background-color: lightpink;
  font-weight: bold;

.submit input[type='reset']{
  color: #fff;
  margin-left: 10px; 






User Rating: 5 ( 2 votes)

Check Also

Windows 10 Business edetion

Windows 10 Business Edition MSDN Version-1903/2019 Update

Windows 10 Business Edition MSDN Version 1903 2019 Update October 2019 is one in all …


  1. Pingback: Free Broken Link Checker Tool |

  2. Pingback: U.S English Spelling Test Answer-2019 |

  3. Pingback: 7 Common Mistakes Of Content Writing |

  4. Pingback: Best 7 Tips for Selecting A perfect Domain Name |

  5. Pingback: Css test Answers |

  6. Pingback: Top 50+ Citations List USA |

  7. Pingback: Basic Html Text Formatting |

Leave a Reply

Translate »