A data dynamic is an important form of website, for data insertion, updated users used forms. But in the modern world if your form is not responsive then your form is useless because nowadays most users use mobile phones to access the internet, so your form must be responsive. In this article, we will prepare an HTML CSS responsive form without any HTML CSS responsive framework, we will use HTML and CSS.
How To Create a Signup Form html code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Singup Form</title> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Raleway:200,300,400" rel="stylesheet"> </head> <body> <div class="container"> <div class="form"> <div class="form-section"> <form action=""> <div class="group"> <h3 class="heading">Create account</h3> </div> <div class="group"> <input type="text" name="name" class="control" placeholder="Enter Name..."> </div> <div class="group"> <input type="email" name="name" class="control" placeholder="Enter Email.."> </div> <div class="group"> <input type="password" name="name" class="control" placeholder="Create Password..."> </div> <div class="group"> <input type="password" name="name" class="control" placeholder="Confirm Password..."> </div> <div class="group m20"> <input type="submit" name="name" class="btn" value="Create account →"> </div> <div class="group m20"> <a href="login.html" class="link">Already have an account ?</a> </div> </form> </div> </div> </div> </body> </html> |
CSS Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Raleway', sans-serif; } .container { width: 100%; height: 100vh; background-image: url(https://www.mywebcode.com/wp-content/uploads/2018/03/project9-785x523.jpg); background-size: cover; background-repeat: no-repeat; } .form { position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: #fff; } .form-section { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; } .group { margin-bottom: 10px; } .control { width: 100%; padding: 12px; border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px solid silver; border-radius: 0; transition: all 2s; } .control:focus { outline: none; border-bottom-color: blue; } .btn { display: block; width: 100%; padding: 13px; border-radius: 30px; background-image: linear-gradient(to right, #08CCFD, #0379FD); color: #fff; border:0; font-size: 18px; font-weight: 200; } .m20 { margin-top: 20px; } .link { text-decoration: none; color: silver; font-weight: 300; } .heading { font-size: 25px; letter-spacing: 2px; font-weight: 200; } @media screen and (max-width: 765px){ .form { width: 100%; } } |
How To Create a Signup Form
How To Create a Login Form html code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Singup Form</title> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Raleway:200,300,400" rel="stylesheet"> </head> <body> <div class="container"> <div class="form"> <div class="form-section"> <form action=""> <div class="group"> <h3 class="heading">User Login</h3> </div> <div class="group"> <input type="email" name="name" class="control" placeholder="Enter Email.."> </div> <div class="group"> <input type="password" name="name" class="control" placeholder="Create Password..."> </div> <div class="group m20"> <input type="submit" name="name" class="btn" value="Login →"> </div> <div class="group m20"> <a href="index.html" class="link">Create new account ?</a> </div> </form> </div> </div> </div> </body> </html> |
