Create Registration Form in html css

Create Registration Form in html css

In today’s blog, we learn how to create a simple registration form with only html and css. Many people know how to create input using html but they don’t know how to use label id and how to use value attributes and all things.

So we today learn completely step by step how to create a simple registration form and also styling uniquely. Most people don’t know how to style html input like how to target in css with input elements so we learn completely in this article.

Step 1st: Create an html Layout with a form tag

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">  
                <form id="contact" action="#" method="POST" />
          <h3> Contact Form</h3>
          <h4>Contact us for custom quote</h4>
                       </form>
      </div>
</body>
</html>

In this code we have our html important tag then we link our style file we style later in the upcoming step and there is a container class in div so we style correctly form we put our all form tag in this div. Then we have our form tag and h3 and h4 for simple texts for user understanding.

Step 2: create 1st name & last name input

 <fieldset>
            <label for="firstname">First name:</label><hr>
    <input type="text" id="firstname" name="firstname" placeholder="First Name">
    <br><br>
    <label for="lastname">Last name:</label><hr>
    <input type="text" id="lastname" name="lastname" placeholder="Last Name">
    <br><br>

Output

Registration Form

In this code we use a tag called fieldset, that tag creates a border on our form. Then we use a label tag for every input we use firstname lable then create an input type text and create first name input as well we create last name input like we create first name input.

Step 3rd: Create Password input & File upload Input

 <label for="pwd">Password:</label>
    <input type="password" name="pwd" id="pwd" minlength="8">
    <br><br>
    <input type="file" name="file" id="file">

Output

password input

In this input, we use input type password & input type file. By password, input user can enter password and it’s automatically in hiding position and by minlength user must enter 8 character password. And in type file user can upload any files you have some more input so the user can filter their files like they accept only image or video or whatever.

Step 4th: Radio Button

<p>please Select Your Gender</p>
    <input type="radio" name="gender" id="male" value="male">
    <label for="male">Male</label><br>

    <input type="radio" name="gender" id="female" value="female">
    <label for="female">Female</label><br>

    
    <input type="radio" name="gender" id="other" value="other">
    <label for="other">Other</label><br>

Output

Radio Button Html

For this html radio button we have input type radio and then we give name gender for people select only 1 radio button and for value, we use a different name so when we collect in our form database we get data by value.

Step 5th: Email and submit button

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">  
                <form id="contact" action="https://formsubmit.co/cwrprojects@gmail.com" method="POST" />
          <h3> Contact Form</h3>
          <h4>Contact us for custom quote</h4>
          <fieldset>
            <label for="firstname">First name:</label><hr>
    <input type="text" id="firstname" name="firstname" placeholder="First Name">
    <br><br>
    <label for="lastname">Last name:</label><hr>
    <input type="text" id="lastname" name="lastname" placeholder="Last Name">
    <br><br>
    <label for="pwd">Password:</label>
    <input type="password" name="pwd" id="pwd" minlength="8">
    <br><br>
    <input type="file" name="file" id="file">
    <p>please Select Your Gender</p>
    <input type="radio" name="gender" id="male" value="male">
    <label for="male">Male</label><br>

    <input type="radio" name="gender" id="female" value="female">
    <label for="female">Female</label><br>

    
    <input type="radio" name="gender" id="other" value="other">
    <label for="other">Other</label><br>

    <label for="email">Enter Your E-mail</label>
    <input type="email" id="email" name="email" placeholder="Enter Your Email id"><br>
    <input type="submit" >
          </fieldset>
               </form>
      </div>
</body>
</html>

Output

Create Registration Form in html css

For this email id input, we use a simple input type email button, so users have automatically had suggestions to enter email. And the important thing is we don’t need javascript Or Any other things for email validation. And in last we use our input type submit so when the user fills the form and clicks on submit we receive form data if we have a backend database(we talk later in another article).

What is Flexbox in CSS? A beginner-friendly guide to it

Now our html registration form is almost ready with 0 stylings so now time is to style our form like this 👇

Create Registration Form in html css

Step 6th: Css Code

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-size: 12px;
  line-height: 30px;
  color: #777;
  background: #4CAF50;
}

.container {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
  font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}

#contact {
  background: #F9F9F9;
  padding: 25px;
  margin: 150px 0;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

#contact h3 {
  display: block;
  font-size: 30px;
  font-weight: 300;
  margin-bottom: 10px;
}

#contact h4 {
  margin: 5px 0 15px;
  display: block;
  font-size: 13px;
  font-weight: 400;
}

fieldset {
  border: medium none !important;
  margin: 0 0 10px;
  min-width: 100%;
  padding: 0;
  width: 100%;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
  width: 100%;
  border: 1px solid #ccc;
  background: #FFF;
  margin: 0 0 5px;
  padding: 10px;
}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  border: 1px solid #aaa;
}

#contact textarea {
  height: 100px;
  max-width: 100%;
  resize: none;
}

#contact button[type="submit"] {
  cursor: pointer;
  width: 100%;
  border: none;
  background: #4CAF50;
  color: #FFF;
  margin: 0 0 5px;
  padding: 10px;
  font-size: 15px;
}

#contact button[type="submit"]:hover {
  background: #43A047;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.copyright {
  text-align: center;
}

#contact input:focus,
#contact textarea:focus {
  outline: 0;
  border: 1px solid #aaa;
}

::-webkit-input-placeholder {
  color: #888;
}

:-moz-placeholder {
  color: #888;
}

::-moz-placeholder {
  color: #888;
}

:-ms-input-placeholder {
  color: #888;
}

final summary

In this blog, we learn how to create a registration html form step by step. We learn how to use html validation without any plugin or JavaScript or anything else. We use pure html tag for making our data collecting html form

In this blog, we learn how to create a registration html form step by step. We learn how to use html validation without any plugin or JavaScript or anything else. We use pure html tag for making our data collecting html form

My name is ankit Dungawat Know as codewithrandom, I am frontend developer and run a Instagram page over 140k followers so I daily share new tutorial or project on this website. I run more then 3 website or 2 Instagram pages.

Leave a Comment