- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Environmental Science
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- articles and Answers
- Effective Resume Writing
- HR Interview articles
- Computer Glossary
- Who is Who
Responsive Registration Form in HTML and CSS
Hello Reader, todays during this web blog you may learn to make a Responsive Registration form in hypertext mark-up language and CSS, you'll conjointly decision it sign in form. Earlier blog I even have shared however can we tend to Create a Login and Registration form in HTML and CSS. currently I'm aiming to build a registration/signup form.
The registration/signup form contains varied input fields of various input details wherever the user must fill in his/her details to submit for a specific net page. There are various varieties of registration however the most purpose of this kind of form is to collect users' info or details.
As you'll see on the given image of the signup of the registration form. Usually you can add half dozen to ten input fields on the signup form. Many folks are confused regarding what they thought to embody within the signup or registration form. you'll add the subsequent parts in your signup or registration form.
You can get this Signup or Registration kind templet free, I actually have provided all the HTML and CSS code that I have used to create this template. you'll be able to take all the source code from below.
Before jumping into the source code file you would like to understand some importance of this project. As you have got seen on the total video tutorial of the responsive registration form in HTML and CSS. I have added necessary parts that are essential for the registration form. you have got additionally seen HTML and CSS code for this sort of registration form. to create this registration form responsive I actually have used a CSS media query. Also, you have got seen a way to make a custom radio button and input field of input box animation. If you're acquainted with hypertext markup language and CSS, you'll be able to simply make this Responsive Registration Form. If you have basic information regarding JavaScript then you can add a lot of functions to the present registration form. Those friends who are feeling difficulties building this registration form or page, don't worry I have provided free HTML and CSS source code files of this Responsive Registration kind below:
Registration form / Sign-up form | source code
To copy-paste the given codes of this Registration/Signup form style Template, you would like to make 2 files one hypertext markup language file and another one could be a CSS file, when making ing these two files you just copy-paste all the given code of HTML & CSS. you'll conjointly transfer all source code files from the given download button. Create an HTML file on your laptop with the name index.html and copy-paste the given HTML code of the Registration form in your document.
<!DOCTYPE html>
<!-- Created By Codegyan - www.codegyan.in -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<!---<title> Responsive Registration Form | Codegyan </title>--->
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="title">Registration</div>
<div class="content">
<form action="#">
<div class="user-details">
<div class="input-box">
<span class="details">Full Name</span>
<input type="text" placeholder="Enter your name" required>
</div>
<div class="input-box">
<span class="details">Username</span>
<input type="text" placeholder="Enter your username" required>
</div>
<div class="input-box">
<span class="details">Email</span>
<input type="text" placeholder="Enter your email" required>
</div>
<div class="input-box">
<span class="details">Phone Number</span>
<input type="text" placeholder="Enter your number" required>
</div>
<div class="input-box">
<span class="details">Password</span>
<input type="text" placeholder="Enter your password" required>
</div>
<div class="input-box">
<span class="details">Confirm Password</span>
<input type="text" placeholder="Confirm your password" required>
</div>
</div>
<div class="gender-details">
<input type="radio" name="gender" id="dot-1">
<input type="radio" name="gender" id="dot-2">
<input type="radio" name="gender" id="dot-3">
<span class="gender-title">Gender</span>
<div class="category">
<label for="dot-1">
<span class="dot one"></span>
<span class="gender">Male</span>
</label>
<label for="dot-2">
<span class="dot two"></span>
<span class="gender">Female</span>
</label>
<label for="dot-3">
<span class="dot three"></span>
<span class="gender">Prefer not to say</span>
</label>
</div>
</div>
<div class="button">
<input type="submit" value="Register">
</div>
</form>
</div>
</div>
</body>
</html>
@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{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
background: linear-gradient(135deg, #71b7e6, #9b59b6);
}
.container{
max-width: 700px;
width: 100%;
background-color: #fff;
padding: 25px 30px;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}
.container .title{
font-size: 25px;
font-weight: 500;
position: relative;
}
.container .title::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 30px;
border-radius: 5px;
background: linear-gradient(135deg, #71b7e6, #9b59b6);
}
.content form .user-details{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px 0 12px 0;
}
form .user-details .input-box{
margin-bottom: 15px;
width: calc(100% / 2 - 20px);
}
form .input-box span.details{
display: block;
font-weight: 500;
margin-bottom: 5px;
}
.user-details .input-box input{
height: 45px;
width: 100%;
outline: none;
font-size: 16px;
border-radius: 5px;
padding-left: 15px;
border: 1px solid #ccc;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
.user-details .input-box input:focus,
.user-details .input-box input:valid{
border-color: #9b59b6;
}
form .gender-details .gender-title{
font-size: 20px;
font-weight: 500;
}
form .category{
display: flex;
width: 80%;
margin: 14px 0 ;
justify-content: space-between;
}
form .category label{
display: flex;
align-items: center;
cursor: pointer;
}
form .category label .dot{
height: 18px;
width: 18px;
border-radius: 50%;
margin-right: 10px;
background: #d9d9d9;
border: 5px solid transparent;
transition: all 0.3s ease;
}
#dot-1:checked ~ .category label .one,
#dot-2:checked ~ .category label .two,
#dot-3:checked ~ .category label .three{
background: #9b59b6;
border-color: #d9d9d9;
}
form input[type="radio"]{
display: none;
}
form .button{
height: 45px;
margin: 35px 0
}
form .button input{
height: 100%;
width: 100%;
border-radius: 5px;
border: none;
color: #fff;
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(135deg, #71b7e6, #9b59b6);
}
form .button input:hover{
/* transform: scale(0.99); */
background: linear-gradient(-135deg, #71b7e6, #9b59b6);
}
@media(max-width: 584px){
.container{
max-width: 100%;
}
form .user-details .input-box{
margin-bottom: 15px;
width: 100%;
}
form .category{
width: 100%;
}
.content form .user-details{
max-height: 300px;
overflow-y: scroll;
}
.user-details::-webkit-scrollbar{
width: 5px;
}
}
@media(max-width: 459px){
.container .content .category{
flex-direction: column;
}
}
To directly download all source code files of this signup or registration form template, click on the download button, and it starts to download automatically on your computer and also you can get this code on github.
Advertisements
ads
