How To Create Signup Form For A Website Using HTML and CSS

How To Create Signup Form For A Website Using HTML and CSS

Hey guys, welcome to code junction in this blog I will be show you guys how you can create a signup form using HTML and CSS.

Actually this is a based on a YouTube video of mine. Which you can visit at any time.

Please make sure to subscribe my YouTube channel.

You can easily understand the code written below by watching my YouTube
Video.

Although, if you don't want to watch my video you can easily understand the the quotes written below as I have mentioned all the comments.

Copy down the code and you can play with it by changing its properties and many more things.

Here is the code !!

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Form Styling</title>
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" />
  <style>
    * {

      /*-May want to add "border-box for "box-sizing so padding does not affect width
        -Reset margin and padding
       */
    }

    body {
      font-family: 'Raleway', sans-serif;
      background: #334a72;
      /*
          -Background color is #344a72
        */
    }

    a {
      text-decoration: none;

      /*
        Underlined links are ugly :)
       */
    }

    #container {
      align: center;
      margin: 30px auto;
      max-width: 400px;
      padding: 20px;

      /*
        -Remember, margin: auto on left and right will center a block element
        -I would also set a "max-width" for responsiveness
        -May want to add some padding
        */
    }

    .form-wrap {

      background-color: white;
      width: 240px;
      height: 450px;
      padding: 10px;
      border: grey 2px solid;
      border-radius: 5px;

      /*
          This is the white area around the form and heading, etc
        */
    }

    .form-wrap h1,
    .form-wrap p {
      text-align: center;
      /*
          May want to center these
        */
    }

    .form-wrap .form-group {
      padding: 5px;
      /*
          Each label, input is wrapped in .form-group
        */
    }

    .form-wrap .form-group label {
      display: block;
      color: grey;
      /*
          Label should be turned into a block element
        */
    }

    .form-wrap .form-group input {
      padding: 2px 2px;
      border: #ddd 1.5px solid;
      border-radius: 3px;
      width: 220px;
      height: 18px;
      /*
          Inputs should reach accross the .form-wrap 100% and have some padding
        */
    }

    .form-wrap button {
      display: block;
      background-color: #49c1a2;
      color: white;
      width: 90%;
      border: 2px #49c1a2 solid;
      padding: 2px;
      margin: 5px;
      cursor: pointer;
      /*
         
          border-radius:3px;
        Button should wrap accross 100% and display as block
      Background color for button is #49c1a2
        */
    }


    .form-wrap button:hover {
      background-color: #37a08e;
      /*
          Hover background color for button is #37a08e
        */
    }

    .form-wrap .bottom-text {
      font-size: 12px;
      /*
          Bottom text is smaller
        */
    }

    footer {
      margin-left: 10px;
      font-size: 14px;
      color: white;

      /*
        Should be centered
       */
    }

    footer a {
      color: #49c1a2;
      /*
          Footer link color is #49c1a2
        */
    }
  </style>
</head>

<body>
  <div id="container">
    <div class="form-wrap">
      <h1>Sign Up</h1>
      <p>It's free and only takes a minute</p>
      <form>
       
 <div class="form-group">
          <label for="first-name">First Name</label>
          <input type="text" name="firstName" id="first-name" />
        
</div>
        
<div class="form-group">
          <label for="last-name">Last Name</label>
          <input type="text" name="lastName" id="last-name" />
 </div>
        
<div class="form-group">
          <label for="email">Email</label>
          <input type="email" name="email" id="email" />
 </div>
        
<div class="form-group">
          <label for="password">Password</label>
          <input type="password" name="password" id="password" />       
</div>
        
<div class="form-group">
          <label for="password2">Confirm Password</label>
          <input type="password" name="pasword2" id="password2" />
</div>
   
  <button type="submit" class="btn">Sign Up</button>
        <p class="bottom-text">
          By clicking the Sign Up button, you agree to our
          <a href="#">Terms & Conditions</a> and
          <a href="#">Privacy Policy</a>
        </p>
      </form>
    </div>
  
  <footer>
      <p>Already have an account? <a href="#">Login Here</a></p>
  </footer>
  
</div>
 
</body>
</html>
 
 

Steps to Run these Codes !!

1. Copy all the code and paste it in notepad or any text editor.

2. Save that file as form.htm you can name anything just remember to .htm at the end of the file name. 

3. Run the .htm file in any browser. 

 


Comments