├── README.md ├── back.jpg ├── user.png ├── index.html ├── register.html ├── js.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # website---form-design-and-validation 2 | -------------------------------------------------------------------------------- /back.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kartarkat/wesbite---form-design-and-validation/HEAD/back.jpg -------------------------------------------------------------------------------- /user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kartarkat/wesbite---form-design-and-validation/HEAD/user.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Login Form Design 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 |

Login Here

12 | 13 |
14 | 15 |

Username

16 | 17 | 18 |

Password

19 | 20 | 21 |  
22 | 23 | 24 |

25 | Register for new account ? 26 | 27 |
28 | 29 |
30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /register.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Register Form Design 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 |

Register Here

13 | 14 |
15 | 16 |

Username

17 | 18 | 19 |

Email

20 | 21 | 22 |

Password

23 | 24 | 25 |

Retype Password

26 | 27 | 28 |  
29 | 30 | 31 |

32 | existing user, login !? 33 |
34 | 35 |
36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /js.js: -------------------------------------------------------------------------------- 1 | //form 1 2 | 3 | function vfun(){ 4 | var uname=document.forms["myform"]["uname"].value; 5 | var upswd=document.forms["myform"]["upswd"].value; 6 | 7 | if(uname==null || uname=="" ){ 8 | document.getElementById("errorBox").innerHTML = 9 | "enter the user name"; 10 | return false; 11 | } 12 | 13 | if(upswd==null || upswd==""){ 14 | document.getElementById("errorBox").innerHTML = 15 | "enter the password"; 16 | return false; 17 | } 18 | 19 | if (uname != '' && upswd != '' ){ 20 | alert("Login successfully"); 21 | } 22 | 23 | } 24 | 25 | //form 2 26 | 27 | function vfun1(){ 28 | var uname1=document.forms["myform2"]["uname1"].value; 29 | var email1=document.forms["myform2"]["email1"].value; 30 | var upswd1=document.forms["myform2"]["upswd1"].value; 31 | var upswd2=document.forms["myform2"]["upswd2"].value; 32 | 33 | 34 | if(uname1==null || uname1=="" ){ 35 | document.getElementById("errorBox").innerHTML = 36 | "enter the user name"; 37 | return false; 38 | } 39 | 40 | if(email1==null || email1==""){ 41 | document.getElementById("errorBox").innerHTML = 42 | "enter the email"; 43 | return false; 44 | } 45 | 46 | if(upswd1==null || upswd1=="" ){ 47 | document.getElementById("errorBox").innerHTML = 48 | "enter the password"; 49 | return false; 50 | } 51 | 52 | if(upswd2==null || upswd2==""){ 53 | document.getElementById("errorBox").innerHTML = 54 | "enter the password"; 55 | return false;} 56 | 57 | if(upswd1 != upswd2){ 58 | document.getElementById("errorBox").innerHTML = 59 | "password dont match"; 60 | return false;} 61 | 62 | 63 | 64 | if (uname1 != '' && upswd1 != '' && upswd2 != '' && email1 != '' && upswd1 == upswd2) 65 | 66 | 67 | alert("Register successfull"); 68 | 69 | 70 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | background: url(back.jpg)no-repeat center center fixed; 5 | -webkit-background-size: cover; 6 | -moz-background-size: cover; 7 | -o-background-size: cover; 8 | font-family: sans-serif; 9 | } 10 | 11 | .box{ 12 | 13 | 14 | background: #f5f5f5; 15 | color: red; 16 | top: 50%; 17 | left: 30%; 18 | position: absolute; 19 | transform: translate(-50%,-50%); 20 | box-sizing: border-box; 21 | padding: 70px 30px; 22 | } 23 | 24 | 25 | 26 | .user{ 27 | width: 100px; 28 | height: 100px; 29 | position: absolute; 30 | top: -50px; 31 | left: calc(50% - 50px); 32 | } 33 | 34 | h1{ 35 | margin: 0; 36 | padding: 0 0 20px; 37 | text-align: center; 38 | font-size: 22px; 39 | color: black; 40 | } 41 | 42 | p{ 43 | color: #f49126; 44 | margin: 0; 45 | padding: 0; 46 | font-weight: bold; 47 | } 48 | 49 | input{ 50 | width: 100%; 51 | margin-bottom: 10px; 52 | } 53 | 54 | input[type="text"], input[type="password"] ,input[type="email"] 55 | { 56 | border: none; 57 | border-bottom: 1px solid #fff; 58 | background: transparent; 59 | outline: none; 60 | height: 40px; 61 | color: #673ab7; 62 | font-size: 16px; 63 | } 64 | 65 | input[type="submit"] 66 | { 67 | border: none; 68 | outline: none; 69 | height: 40px; 70 | background: #2196f3; 71 | color: #fff; 72 | font-size: 18px; 73 | border-radius: 20px; 74 | 75 | } 76 | 77 | 78 | input[type="submit"]:hover 79 | { 80 | cursor: pointer; 81 | background: #0097a7; 82 | } 83 | 84 | a 85 | { 86 | text-decoration: none; 87 | font-size: 16px; 88 | line-height: 20px; 89 | color: #069818; 90 | } 91 | 92 | 93 | a:hover 94 | { 95 | color: red; 96 | } 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | --------------------------------------------------------------------------------