• Home
  • Blog
  • HTML & CSS
    • Login Forms
    • Website Designs
    • Navigation Bars
    • Sidebar Menu
    • Card Designs
    • More
      • CSS Buttons
      • Glowing Effects
      • Social Media Buttons
      • Preloader or Loaders
      • Neumorphism Designs
  • JavaScript
    • Form Validation
    • Image Sliders
    • API Projects
    • JavaScript Games
    • Canvas Projects
  • PHP
  • Contact us
Search
CodingNepal CodingNepal
  • Home
  • Blog
    • 9 Easy JavaScript Games for Beginners with Source Code

      9 Easy JavaScript Games for Beginners with Source Code

      10 Best JavaScript Projects with Free Source Code JavaScript Projects for Beginners

      Top 10 JavaScript Projects for Beginners with Source Code

      Top 10 Profile Card Template Designs in HTML & CSS

      Top 10 Profile Card Template Designs in HTML & CSS

      Top 10 Website Templates Design in HTML CSS & JavaScript

      10+ Website Templates Design in HTML CSS and JavaScript

      Top 5 Sidebar Menu Templates in HTML CSS & JavaScript

      Top 15 Sidebar Menu Templates in HTML CSS & JavaScript

  • HTML & CSS
    • Login Forms
    • Website Designs
    • Navigation Bars
    • Sidebar Menu
    • Card Designs
    • More
      • CSS Buttons
      • Glowing Effects
      • Social Media Buttons
      • Preloader or Loaders
      • Neumorphism Designs
  • JavaScript
    • Form Validation
    • Image Sliders
    • API Projects
    • JavaScript Games
    • Canvas Projects
  • PHP
  • Contact us
Home Login Form Create Responsive Registration Form in HTML & CSS

Create Responsive Registration Form in HTML & CSS

By
CodingNepal
-
December 6, 2022
Create Responsive Registration Form in HTML & CSS

If you are looking for the Registration Form with a responsive feature and want to create it using basic HTML and CSS code then this blog can fill your demand.

In this blog, you will learn How to Create a Responsive Registration Form in HTML & CSS. Even if you are a complete beginner and have basic knowledge of HTML and CSS then also you will be able to create this Registration Form.

A Registration Form is a section on the website or an application where the user needs to fill in their details as required. The user detail like name, email, address, and others.

Have a look at the Registration Form preview that you are going to learn in this blog. As you can see I have added important input fields that every Registration must-have. And, also you can see some radio buttons to choose from and a submit button as well.

If you want to watch out for the actual demo of this Registration Form and all the HTML and CSS codes that I have used to create this Responsive Registration Form then please have a look at the video tutorial that I have provided below.

Create Responsive Registration Form in HTML & CSS

As you have seen on the video tutorial of this Registration Form. There were lots of input fields to enter user details like name, number, email, birth date, gender, and others. As also shown you the responsiveness of this Registration Form.

I hope after watching the video tutorial on this Registration Form you are able to create this Registration Form easily. You can also take all the HTML and CSS code of this Registration Form that I have provided below.

You May Like This:

  • Contact Us Form in HTML & CSS
  • Login & Signup Form in HTML & CSS
  • Email Subscription From in HTML & CSS

 Registration Form in HTML & CSS [Source Code]

To create a Registration Form in HTML & CSS, follow the given steps line by line:
  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create a style.css file. The file name must be style and its extension .css
  4. Create a script.js file. The file name must be script and its extension .js

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the  Registration Form in HTML & CSS by clicking on the given download button.

First, paste the following codes into your index.html file.

<!DOCTYPE html>
<!---Coding By CodingLab | www.codinglabweb.com--->
<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>Registration Form in HTML CSS</title>-->
    <!---Custom CSS File--->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section class="container">
      <header>Registration Form</header>
      <form action="#" class="form">
        <div class="input-box">
          <label>Full Name</label>
          <input type="text" placeholder="Enter full name" required />
        </div>

        <div class="input-box">
          <label>Email Address</label>
          <input type="text" placeholder="Enter email address" required />
        </div>

        <div class="column">
          <div class="input-box">
            <label>Phone Number</label>
            <input type="number" placeholder="Enter phone number" required />
          </div>
          <div class="input-box">
            <label>Birth Date</label>
            <input type="date" placeholder="Enter birth date" required />
          </div>
        </div>
        <div class="gender-box">
          <h3>Gender</h3>
          <div class="gender-option">
            <div class="gender">
              <input type="radio" id="check-male" name="gender" checked />
              <label for="check-male">male</label>
            </div>
            <div class="gender">
              <input type="radio" id="check-female" name="gender" />
              <label for="check-female">Female</label>
            </div>
            <div class="gender">
              <input type="radio" id="check-other" name="gender" />
              <label for="check-other">prefer not to say</label>
            </div>
          </div>
        </div>
        <div class="input-box address">
          <label>Address</label>
          <input type="text" placeholder="Enter street address" required />
          <input type="text" placeholder="Enter street address line 2" required />
          <div class="column">
            <div class="select-box">
              <select>
                <option hidden>Country</option>
                <option>America</option>
                <option>Japan</option>
                <option>India</option>
                <option>Nepal</option>
              </select>
            </div>
            <input type="text" placeholder="Enter your city" required />
          </div>
          <div class="column">
            <input type="text" placeholder="Enter your region" required />
            <input type="number" placeholder="Enter postal code" required />
          </div>
        </div>
        <button>Submit</button>
      </form>
    </section>
  </body>
</html>

Second, paste the following codes into your style.css file.

/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgb(130, 106, 251);
}
.container {
  position: relative;
  max-width: 700px;
  width: 100%;
  background: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
.container header {
  font-size: 1.5rem;
  color: #333;
  font-weight: 500;
  text-align: center;
}
.container .form {
  margin-top: 30px;
}
.form .input-box {
  width: 100%;
  margin-top: 20px;
}
.input-box label {
  color: #333;
}
.form :where(.input-box input, .select-box) {
  position: relative;
  height: 50px;
  width: 100%;
  outline: none;
  font-size: 1rem;
  color: #707070;
  margin-top: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0 15px;
}
.input-box input:focus {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.form .column {
  display: flex;
  column-gap: 15px;
}
.form .gender-box {
  margin-top: 20px;
}
.gender-box h3 {
  color: #333;
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 8px;
}
.form :where(.gender-option, .gender) {
  display: flex;
  align-items: center;
  column-gap: 50px;
  flex-wrap: wrap;
}
.form .gender {
  column-gap: 5px;
}
.gender input {
  accent-color: rgb(130, 106, 251);
}
.form :where(.gender input, .gender label) {
  cursor: pointer;
}
.gender label {
  color: #707070;
}
.address :where(input, .select-box) {
  margin-top: 15px;
}
.select-box select {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  color: #707070;
  font-size: 1rem;
}
.form button {
  height: 55px;
  width: 100%;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 30px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgb(130, 106, 251);
}
.form button:hover {
  background: rgb(88, 56, 250);
}
/*Responsive*/
@media screen and (max-width: 500px) {
  .form .column {
    flex-wrap: wrap;
  }
  .form :where(.gender-option, .gender) {
    row-gap: 15px;
  }
}

If you face any difficulties while creating your Registration Form or your code is not working as expected, you can download the source code files for this Registration Form for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

View Live Demo

 

  • TAGS
  • css form
  • Form Design
  • HTML and CSS
  • HTML Form
  • Login Form Design
  • registration form
  • registration form with code
  • responsive regtistration form
  • Signup Form
  • signup form with code
Share
Facebook
WhatsApp
Twitter
Copy URL
    Previous articleTop 15 Sidebar Menu Templates in HTML CSS & JavaScript
    Next articleFrontend vs Backend Development – What’s the difference?
    CodingNepal

    RELATED ARTICLESMORE FROM AUTHOR

    Hoverable Sidebar Menu in HTML CSS & JavaScript

    Create Hoverable Sidebar Menu in HTML CSS and JavaScript

    Create A Responsive Custom Website using HTML and CSS

    Create A Responsive Custom Website using HTML and CSS

    How to Implement Form Validation in HTML CSS and JavaScript

    How to Implement Form Validation in HTML CSS and JavaScript

    Recent Posts

    Hoverable Sidebar Menu in HTML CSS & JavaScript

    Create Hoverable Sidebar Menu in HTML CSS and JavaScript

    June 2, 2023
    Create Your Own ChatGPT in HTML, CSS, and JavaScript ChatGPT Clone HTML, CSS, and JavaScript

    How to Create Your Own ChatGPT in HTML CSS and JavaScript

    May 31, 2023
    Create A Responsive Custom Website using HTML and CSS

    Create A Responsive Custom Website using HTML and CSS

    May 30, 2023
    Responsive Personal Portfolio Website in HTML CSS and Bootstrap

    Responsive Personal Portfolio Website in HTML CSS and Bootstrap

    May 28, 2023
    How to Implement Form Validation in HTML CSS and JavaScript

    How to Implement Form Validation in HTML CSS and JavaScript

    May 25, 2023

    Featured Post

    Build An Image Editor in HTML CSS & JavaScript

    Build An Image Editor in HTML CSS & JavaScript

    CodingNepal - July 15, 2022 11

    Categories

    • HTML and CSS213
    • Javascript160
    • JavaScript Projects90
    • Login Form47
    • Card Design42
    • Navigation Bar35
    • Image Slider20
    • CSS Buttons20
    • Website Designs19
    • Sidebar Menu16
    • JavaScript Games15
    • Preloader or Loader15
    • Form Validation14
    • PHP12
    • API Projects11
    CodingNepal
    ABOUT US
    CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP... Read more
    FOLLOW US
    • About us
    • Terms & Conditions
    • Privacy policy
    • Contact us
    Copyright © 2023 CodingNepal All Rights Reserved

    AdBlock Detected

    Ad