Learncoading.com learn coading
Description:
HTML Sign Up Form Beautifull Design For the backend designer.who have for need signup Form need for registration people this is very and Attractive Design also has the form validation.
Form Information:
- Form name: Sign Up Form
- License: Open Source.
- Compatible Browsers: Google Chrome, Firefox, Safari, IE 10, Opera etc.
- High Resolution: Yes.
- Layout: Fluid Responsive Layout.
You can view another article :
HTML5 Element List, tags
5 Best CSS Learning Website
10 best Web Design Learning Site(Free)
Step-1
Create an HTML File and Pest the Code in the File
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=divice-width, initial-scale = 1.0">
<title>Form</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="form-area">
<h1>Sign Up</h1>
<form action="">
<div class="input-area">
<input type="text" class="inp">
<label for="">First Name:</label>
</div>
<div class="input-area">
<input type="text" class="inp">
<label for="">Last Name:</label>
</div>
<div class="input-area">
<input type="text" class="inp">
<label for="">User Name:</label>
</div>
<div class="input-area">
<label for="">Date of Birth:</label>
<select name="" id="">
<option value="">Month</option>
<option value="">January</option>
<option value="">february</option>
<option value="">march</option>
<option value="">april</option>
<option value="">May</option>
<option value="">jun</option>
<option value="">july</option>
<option value="">august</option>
<option value="">september</option>
<option value="">october</option>
<option value="">novembar</option>
<option value="">december</option>
</select>
<select name="" id="">
<option value="">Day</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
<option value="">16</option>
<option value="">17</option>
<option value="">18</option>
<option value="">19</option>
<option value="">20</option>
<option value="">21</option>
<option value="">22</option>
<option value="">23</option>
<option value="">24</option>
<option value="">25</option>
<option value="">25</option>
<option value="">26</option>
<option value="">27</option>
<option value="">28</option>
<option value="">29</option>
<option value="">30</option>
<option value="">31</option>
</select>
<select name="" id="">
<option value="">Month</option>
<option value="">2010</option>
<option value="">2011</option>
<option value="">2012</option>
<option value="">2013</option>
<option value="">2014</option>
<option value="">2016</option>
<option value="">2017</option>
<option value="">2018</option>
<option value="">2019</option>
</select>
</div>
<div class="input-area">
<input type="radio" class="inp" name="gender" value="Male">Male
<input type="radio" class="inp" name="gender" value="Female">Female
<label for="">Gender:</label>
</div>
<div class="input-area">
<select name="" id="country">
<option value="">Bangladesh</option>
<option value="">India</option>
<option value="">Pakistan</option>
<option value="">Malesia</option>
</select>
<label for="country">Country:</label>
</div>
<div class="input-area">
<input type="email" class="inp">
<label for="">Email:</label>
</div>
<div class="input-area">
<i class="fa fa-eye" id="show"></i>
<input type="password" class="showpass" id="pass">
<label for="">Password:</label>
</div>
<div class="input-area">
<input type="password">
<label for="">Confirm Password:</label>
</div>
<div class="input-area">
<input type="tel" class="inp">
<label for="">Phone Number:</label>
</div>
<div class="confirm">
<input type="checkbox" id="check">
<label for="check">I agree to the terms of usage & condition</label>
</div>
<div class="input-area submit">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</div>
</form>
</div>
<script>
var pass = document.getElementById('pass');
var show = document.getElementById('show');
show.addEventListener('click',showHide);
function showHide(){
show.classList.toggle('fa-eye-slash');
show.classList.toggle('active');
(pass.type==='password')?pass.type='text':pass.type='password';
}
</script>
</body>
</html>
Step-2
Create a Style.css file and pest the Code in the Css file
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background:url(automobile-blur-cap-704857.jpg);
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
}
.form-area{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
padding: 10px;
background-color: rgba(100,90,0,.8);
width: 500px;
box-shadow: 0 0 10px 10px rgba(0,0,0,.3);
border-radius: 10px;
overflow: hidden;
}
.form-area:after{
content: "";
position: absolute;
width: 100%;
height: 150%;
background-color: rgba(0,0,0,.3);
left: 135px;
top: 95%;
transform:translateY(-50%) rotate(45deg);
z-index: -1;
}
.form-area h1{
text-align: center;
color: #fff;
padding: 10px;
font-size: 45px;
}
.input-area{
margin-bottom: 10px;
font-size: 20px;
position: relative;
}
.fa{
position: absolute;
top: 50%;
right:35px;
transform: translateY(-50%);
cursor:pointer;
color:#000;
}
label{
float: left;
font-weight: bold;
font-size: 20px;
margin-right: 10px;
color: #000;
width: 180px;
}
input{
font-size: 20px;
border: none;
padding: 5px 10px;
}
select{
font-size: 20px;
padding: 5px 1px;
}
select:checked+label{
background-color: #ff0;
color: #000;
padding: 4px;
}
input[type="radio"]{
height: 20px;
width: 20px;
vertical-align: middle;
margin-right: 5px;
}
input:focus~label{
background-color: #ff0;
color: #000;
padding: 4px;
}
.confirm label{
font-size:20px;
float: none;
}
.confirm input[type="checkbox"]{
display: none;
}
.confirm input[type="checkbox"]+label:before{
content: "\2714";
border: 1px solid #000;
display: inline-block;
padding:0px 5px;
vertical-align: bottom;
margin-right: 10px;
color: transparent;
border-radius: 5px;
}
.confirm input[type=checkbox]:checked + label:before{
color: #fff;
background-color: #000;
}
.submit{
margin-top: 20px;
text-align: center;
}
.submit input[type='submit']{
background-color: lightpink;
font-weight: bold;
}
.submit input[type='reset']{
background-color:#000;
color: #fff;
margin-left: 10px;
}
