Hello reader, in this blog, how will you quickly create a responsive registration form with html and css.
In this blog we will learn to make Responsive Registration Form Design Using HTML & CSS. We have designed the registration form in the blog before this. You can see on the link given below. Which you will get to learn more registration forms.
Now we know how this registration form has been designed. First of all we have taken a
<section> tag whose class name is written class="formContainer"And a
<h1> heading tag has been taken under this tag. And the text (registration form) is written inside this <h1> heading tag.A
<form> tag is taken below the <h1> heading tag and inside this <form > form tag a <div> div tag is taken whose class name is class="form-group" . Two <input > input tags are taken inside the first <div > div tag. And like this below input field is taken.And two
<input type="radio" > radio buttons have been taken inside this registration form. And two <input type="check" > check boxes have been decorated and a button tag has been taken at the end of this form. Whose type="submit" attribute is.You might like this:
If you want to see the video of this responsive registration form, then you can easily learn by clicking on the link given below.
Video Tutorial of Responsive Registration Form
I hope you have learned how to make a Responsive Registry Form by watching this video tutorial.
If you want to see this registration from code in your system, then the code of the form is given below, which you can easily copy and see in your system.
HTML CODE FILE :
<!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>Registrataion form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="formContainer">
<h1>Registration Form</h1>
<form action="">
<div class="form-group">
<input type="text" class="inputcontrol" placeholder="First Name">
<input type="text" class="inputcontrol" placeholder="Last Name">
</div>
<div class="form-group">
<input type="text" class="inputcontrol" placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="inputcontrol" placeholder="Address">
</div>
<div class="form-group">
<div class="radioButton">
<div class="input-name">
<input type="radio" name="radiogroup1" id="male" class="radio-button" checked="">
<label for="male" class="emoployed"><span>Male</span></label>
<input type="radio" name="radiogroup1" id="female" class="radio-button">
<label for="female" class="emoployed"><span>Female</span></label>
</div>
</div>
</div>
<div class="form-group">
<div class="checkBox">
<label class="checkcont" for="">I agree with Terms and conditions
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="checkcont">
I want to receive the newsletter
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="form-group">
<button class="button" type="submit">Register Now</button>
</div>
</form>
</section>
</body>
</html>
CSS CODE FILE :
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #ff1046;
font-family: Arial, Helvetica, sans-serif;
}
.formContainer{
width: 50%;
background-color: #fff;
margin: 100px auto;
padding: 20px 5%;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
}
.formContainer h1{
font-size: 20px;
font-weight: 800;
line-height: 30px;
letter-spacing: 0.025em;
text-transform: uppercase;
text-align: center;
color: #ff1046;
margin-bottom: 40px;
}
.form-group{
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 100px;
margin-bottom: 20px;
}
.inputcontrol{
width: 100%;
font-size: 16px;
font-weight: 400;
color: #000;
border: none;
border-bottom: 1px solid #0000007a;
padding: 10px 0;
line-height: 1.5;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
}
.inputcontrol::placeholder{
font-size: 16px;
font-weight: 500;
color: #000;
}
.inputcontrol:focus{
outline: none;
border-bottom: 1px solid #ff1046;
}
.inputcontrol:focus::placeholder{
color: #ff1046;
}
.radioButton{
width: 100%;
}
.radioButton .radio-button{
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.emoployed{
margin-right: 10%;
}
.emoployed::before{
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 20px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border: 3px solid #6c6c6c;
padding: 4px;
background-color: transparent;
background-clip: content-box;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
cursor: pointer;
vertical-align: -10px;
}
.radio-button:hover+.emoployed::before{
border-color: #ff1046;
}
.radio-button:checked+.emoployed::before{
background-color: #ff1046;
border-color: #ff1046;
}
.radio-button label.emoployed span{
display: inline-block;
vertical-align: super;
font-style: normal;
font-weight: 400;
font-size: 18px;
color: #292F42;
}
.checkBox .checkcont{
display: block;
position: relative;
padding-left: 35px;
margin: 12px 0;
cursor: pointer;
font-style: normal;
font-size: 18px;
font-weight: 400;
user-select: none;
color: #292F42;
}
.checkBox .checkcont input{
position:absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark{
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
.checkcont:hover input~.checkmark{
background: #ccc;
}
.checkcont input:checked~.checkmark{
background: #ff1046;
}
.checkmark::after{
content: " ";
position: absolute;
display: none;
}
.checkcont input:checked~.checkmark::after{
display: block;
}
.checkcont .checkmark::after{
left: 9px;
top:5px;
width: 5px;
height: 10px;
border: solid #fff;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.button{
width: 100%;
height: 50px;
background-color: #ff1046;
color: #fff;
margin-top: 30px;
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 20px;
border: 2px solid #ff1046;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
box-shadow: -2px 4px 4px rgb(0 0 0 / 1%);
cursor: pointer;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
.button:hover{
border: 2px solid #ff1046;
background-color: transparent;
color: #ff1046;
}
@media(max-width:768px){
.formContainer{
width: 95%;
}
.form-group{
flex-direction: column;
gap: 20px;
}
.checkcont{
font-size: 16px;
margin: 20px 0;
}
}
Post a Comment