Beautiful Sign Up Page in HTML, CSS With Complete Validation:
HTML:
_________________________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<meta name="author" content="waseem"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<title>Sign Up</title>
</head>
<body>
<div class="container">
<div class="con1"></div>
<div class="con2"></div>
<div class="sub-container">
<div class="sub-con1">
<div class="headings">
<h1 class="main-heading">Foodsland</h1>
<h2 class="heading2">The home of food</h2>
</div>
<div class="design">
© Design By Waseem
</div>
</div>
<div class="sub-con2">
<div class="sign">Sign Up</div>
<form class="frm">
<input type="text" placeholder="Username" class="txt" id="name"/>
<span id="namemsg" style="font-family:lato;font-style:italic"></span>
<input type="text" placeholder="Phone number" class="txt" id="phone"/>
<span id="phonemsg" style="font-family:lato;font-style:italic" ></span>
<input type="mail" placeholder="Email" class="txt" id="mail"/>
<span id="mailmsg" style="font-family:lato;font-style:italic"></span>
<input type="password" placeholder="Password" class="txt" id="password"/>
<span id="passwordmsg" style="font-family:lato;font-style:italic"></span>
<input type="password" placeholder="Repeat password" class="txt" id="rpassword"/>
<span id="rpasswordmsg" style="font-family:lato;font-style:italic"></span>
<input type="button" value="Sign Up" class="btn" id="btn"/>
</form>
</div>
</div>
<script>
var button=document.getElementById('btn');
button.onclick=function(){
var name=document.getElementById('name').value;
var phone=document.getElementById('phone').value;
var mail=document.getElementById('mail').value;
var password=document.getElementById('password').value;
var rpassword=document.getElementById('rpassword').value;
var namemessage=document.getElementById('name');
var phonemessage=document.getElementById('phone');
var mailmessage=document.getElementById('mail');
var passwordmessage=document.getElementById('password');
var rpasswordmessage=document.getElementById('rpassword');
var namemsg=document.getElementById('namemsg');
var phonemsg=document.getElementById('phonemsg');
var mailmsg=document.getElementById('mailmsg');
var passwordmsg=document.getElementById('passwordmsg');
var rpasswordmsg=document.getElementById('rpasswordmsg');
if(name==''){
namemsg.innerHTML="**please fill the Username";
namemessage.style.background="rgba(243, 19, 19, 0.493)";
}
if(name!==''){
if(!(isNaN(name))){
namemsg.innerHTML="**only character allowed";
namemessage.style.background="rgba(243, 19, 19, 0.493)";
}}
if(name!==''&& (isNaN(name))){
if(name.length<4){
namemsg.innerHTML="**please enter upto 4 Chracters";
namemessage.style.background="rgba(243, 19, 19, 0.493)";
}}
if((name!=='')&&(name.length>=4)&& (isNaN(name))){
namemsg.innerHTML="";
namemessage.style.background="none";
}
if(phone==''){
phonemsg.innerHTML="**please fill the Phone number";
phonemessage.style.background="rgba(243, 19, 19, 0.493)";
}
if(phone!==''){
if(isNaN(phone)){
phonemsg.innerHTML="**only digits allowed";
phonemessage.style.background="rgba(243, 19, 19, 0.493)";
}}
if((phone!=='')&&(!isNaN(phone))){
if(phone.length<10){
phonemsg.innerHTML="**plese fill the full Phone number";
phonemessage.style.background="rgba(243, 19, 19, 0.493)";
}}
if((phone!=='')&&(phone.length>=10)&&(!isNaN(phone))){
phonemsg.innerHTML="";
phonemessage.style.background="none";
}
if(mail==''){
mailmsg.innerHTML="**please fill the Email";
mailmessage.style.background="rgba(243, 19, 19, 0.493)";
}
if(mail!=''){
if(mail.indexOf('@')<=0){
mailmsg.innerHTML="**@ invalid position";
mailmessage.style.background="rgba(243, 19, 19, 0.493)";
}}
if(mail!=''&&(mail.indexOf('@')>0)){
if(mail.charAt(mail.length-4)!='.'){
mailmsg.innerHTML="**please put .com at the end of mail";
mailmessage.style.background="rgba(243, 19, 19, 0.493)";
}}
if(mail!=''&&(mail.indexOf('@')>0)&&(mail.charAt(mail.length-4)=='.')){
mailmsg.innerHTML="";
mailmessage.style.background="none";
}
if(password===''){
passwordmsg.innerHTML="**please fill the Password";
passwordmessage.style.background="rgba(243, 19, 19, 0.493)";
}
if(password!==''){
if(!(isNaN(password))){
passwordmsg.innerHTML="**only characters are allowed";
passwordmessage.style.background="rgba(243, 19, 19, 0.493)";
}}
if(password!==''&&(isNaN(password))){
if(password.length < 4){
passwordmsg.innerHTML="**password must be at least 4 character long";
passwordmessage.style.background="rgba(243, 19, 19, 0.493)";
}}
if((password!=='')&&(password.length>=4)&&(isNaN(password))){
passwordmsg.innerHTML="";
passwordmessage.style.background="none";
}
if(password!==rpassword){
rpasswordmsg.innerHTML="**password not matched";
rpasswordmessage.style.background="rgba(243, 19, 19, 0.493)";
}
if(password===rpassword){
rpasswordmsg.innerHTML="";
rpasswordmessage.style.background="none";
}
}
</script>
</body>
</html>
CSS:
_________________________________________________________________________________
body{
padding:0;
margin:0;
}
.container{
width=100%;
height:100%;
}
.con1{
width:35%;
height:610px;
float:left;
background-color:#1AEBB6;
}
.con2{
width:65%;
height:610px;
float:right;
bakcground-color:white;
}
.sub-container{
position:absolute;
top:55px;
left:190px;
height:500px;
width:70%;
box-shadow: 0px -2px 18px 4px #00000057;
border-radius:5px;
}
.sub-con1{
border-style:solid,none,solid,solid;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
float:left;
width:28.8%;
height:500px;
background-color:#1AEBB6;
}
.headings{
margin-top:220px;
}
.sub-con2{
border-style:solid,solid,solid,none;
border-top-right-radius:5px;
border-bottom-right-radius:5px;
height:500px;
width:71.2%;
float:right;
background-color:white;
}
@font-face{
font-family:"yesteryear";
src: 'Yesteryear-Regular.ttf';
}
@font-face{
font-family:"lato";
src: 'Lato-Regular.ttf';
}
@font-face{
font-family:"mon";
src:'Montserrat-Regular.ttf';
}
.main-heading{
font-family:courier;
font-weight:900;
color:white;
text-shadow: 4px 0px 2px #00000080;
padding-left:35px;
}
.heading2{
margin-top:-25px;
font-family:lato;
color:white;
font-weight:100;
font-size:15px;
font-style:italic;
text-align:center;
}
#need{
float:right;
font-family: monospace;
margin:10px 20px 0px 0px;
font-weight:600;
color: rgba(0, 0, 0, 0.79);
font-size:15px;
}
.link{
text-decoration:none;
color:rgba(0, 0, 0, 0.79);
}
.sign{
padding:45px 0px 0px 0px;
font-family:lato;
text-align:center;
font-size:30px;
font-weight:900;
color:rgba(0, 0, 0, 0.79);
}
.txt{
display:flex;
padding:12px 140px 12px 20px;
margin-top:12px;
border-style:solid;
border-color: #e0e0e0;;
border-width:1px;
border-radius:4px;
outline:none;
background:none;
}
.btn{
margin-top:12px;
text-align:center;
padding:11px 136px 11px 136px;
border-style:solid;
border-radius:4px;
outline:none;
font-family:lato;
font-weight:800;
font-size:15px;
background-color:#1AEBB6;
border-color:#1AEBB6;
color: rgba(0, 0, 0, 0.79);
}
.frm{
padding: 12px 0px 0px 160px;
}
.btn:hover{
background-color:white;
color:#1AEBB6;
}
.design{
color: rgba(0, 0, 0, 0.79);
margin-top:190px;
text-align:center;
font-family:lato;
}
_________________________________________________________________________________
0 Comments