HTML5 61
Login Guest on 15th July 2020 03:42:58 PM
  1. <!DOCTYPE html>
  2. <meta name="viewport" content="width=device-width, initial-scale=1">
  3. <title>login form</title>
  4. body {
  5. mrgin:0;
  6. paddng:0;
  7. border:0;
  8. font-family: Arial, Helvetica, sans-serif;
  9. font-size:1.4em;
  10. }
  11. form {
  12. border: 3px solid #f1f1f1;
  13. }
  14.  
  15. input[type=text], input[type=password] {
  16.   width: 100%;
  17.   padding: 12px 20px 12px 20px;
  18.   margin: 8px 0;
  19.   display: inline-block;
  20.   border: 2px solid #ccc;
  21.   box-sizing: border-box;
  22. }
  23.  
  24. button {
  25.   background-color:black;
  26.   color: white;
  27.   font-size:18px;
  28.   padding: 14px 20px 14px 20px;
  29.   margin: 8px 0;
  30.   border: none;
  31.   cursor: pointer;
  32.   width: 100%;
  33. }
  34. button:hover {
  35.   background-color:black;
  36.   color: white;
  37.   font-size:20px;
  38.   padding: 14px 20px 14px 20px;
  39.   margin: 8px 0;
  40.   border: none;
  41.   cursor: pointer;
  42.   width: 100%;
  43. }
  44. button:hover {
  45.   opacity: 0.9;
  46. }
  47.  
  48. .cancelbtn {
  49.   width: auto;
  50.   padding: 10px 18px;
  51.   background-color: #f44336;
  52. }
  53.  
  54. .container {
  55.   margin: 12px 16px 12px 16px;
  56.   padding: 16px 18px 16px 18px;
  57.   box-shadow: inset 1px 2px 1px 2px black , 1px 2px 1px 2px black;
  58.  
  59. }
  60.  
  61. span.psw {
  62.   float: right;
  63.   margin: 4px 4px 4px 4px;
  64.   padding-top: 16px 12px 16px 12px;
  65. }
  66.  
  67. /* Change styles for span and cancel button on extra small screens */
  68.   span.psw {
  69.      display: block;
  70.      float: none;
  71.   }
  72.   .cancelbtn {
  73.      width: 100%;
  74.   }
  75.  
  76. </head>
  77.  
  78.  
  79. <form action="../" method="post">
  80.   <div class="container">
  81.   <h2>Login</h2>
  82.  
  83.     <label for="uname"><b>Username</b></label>
  84.     <input type="text" placeholder="Enter Username" name="uname" required>
  85.  
  86.     <label for="psw"><b>Password</b></label>
  87.     <input type="password" placeholder="Enter Password" name="psw" required>
  88.        
  89.     <button type="submit">Login</button>
  90.     <label>
  91.       <input type="checkbox" checked="checked" name="remember"> Remember me
  92.     </label>
  93.     <span class="psw">Forgot <a href="#forgotpasswod">password?</a></span>
  94.   </div>
  95.  
  96. </form>
  97.  
  98. </body>

Paste is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.