how to make a simple login page in html

Solutions on MaxInterview for how to make a simple login page in html by the best coders in the world

showing results for - "how to make a simple login page in html"

29 Jan 2020

1<html>
2  <head>
3        <title>
4            Log In or Sign Up
5        </title>
6    </head>
7    <body>
8        <div>
9            <input type="textarea" placeholder="Enter your username">
10            <br>
11            <br>
12            <input type="password" placeholder="Enter your username">
13            <br>
14            <br>
15            <input type="submit" value="Log In">
16            <br>
17            <br>
18        </div>
19        <div>
20            <p>
21                Or Sign Up!
22            </p>
23            <br>
24            <br>
25            <input type="textarea" placeholder="Create a username">
26            <br>
27            <br>
28            <input type="password" placeholder="Create a password">
29            <br>
30            <br>
31            <input type="submit" value="Sign Up">
32        </div>
33    </body>
34</html>

source

Ashleigh

09 Oct 2020

1   <!DOCTYPE html>
2<html>
3<head>
4<meta name="viewport" content="width=device-width, initial-scale=1">
5<style>
6body ,html{font-family: Arial, Helvetica, sans-serif;;}
7form{
8    width:fit-content;
9    padding: 60px;
10   
11   
12    height:fit-content;
13    margin:0 auto;
14    margin-top: 2%;
15    background-color: #f9f9f9
16}
17/* Full-width input fields */
18.form-control {
19  width: 100%;
20  padding: 12px 20px;
21  margin: 8px 0;
22  display: inline-block;
23  border: 1px solid #ccc;
24  box-sizing: border-box;
25}
26
27/* Set a style for all buttons */
28button{
29  background-color: #4CAF50;
30  color: white;
31  border: none;
32  cursor: pointer;
33  width: 60%;
34  margin: 5px auto;
35  padding: 15px;
36      box-shadow: 0px 5px 5px #ccc;
37      border-radius: 5px;
38      border-top: 1px solid #e9e9e9;
39  display:block;
40  text-align:center;
41}
42.signup{
43    background-color:blue;
44    margin-bottom:20px;
45}
46.login-box {
47      position: absolute;
48      top: 50%;
49      transform: translateY(-50%);
50      padding: 15px;
51      background-color: #fff;
52      box-shadow: 0px 5px 5px #ccc;
53      border-radius: 5px;
54      border-top: 1px solid #e9e9e9;
55    }
56button:hover,#btn-signup:hover {
57  opacity: 0.8;
58}
59
60
61
62/* Center the image and position the close button */
63.imgcontainer {
64  text-align: center;
65  margin: 24px 0 12px 0;
66  position: relative;
67}
68
69img.avatar {
70  width: 40%;
71  border-radius: 50%;
72}
73
74.container {
75  padding: 16px;
76}
77
78span.psw {
79  float: right;
80  padding-top: 16px;
81}
82
83h2,p{
84    text-align:center;
85}
86
87
88
89/* Change styles for span and cancel button on extra small screens */
90@media screen and (max-width: 300px) {
91  span.psw {
92     display: block;
93     float: none;
94  }
95  
96}
97</style>
98</head>
99<body>
100
101
102
103  
104  <form  action="/action_page.php" method="post">
105
106    <h2>Welcome To Newscongragated</h2>
107    <p>Sign in</p>
108    <div class="container">
109      
110      <label for="email"><b>Email</b></label>
111          <input
112            type="email"
113            class="form-control"
114            id="email"
115            placeholder="Enter your email"
116                 required pattern='/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/'>
117
118     
119
120      <label for="name"><b>Password</b</label>
121          <input
122            type="password"
123            class="form-control"
124            id="password"
125            placeholder="Enter your password"
126                 minlength="8"
127                 required>
128        
129      <button type="submit">Login</button>
130      <button type="button"
131          href="account/signup.php"
132          class="signup" >
133            Sign Up
134        </button>
135      <a href="./resetpassword.php">Forgot your password? </a>
136
137      
138    </div>
139
140    
141
142    
143  </form>
144
145
146</body>
147</html>
148

Bruno

22 Nov 2020

1### BE AWARE : THIS IS WON'T FUNCTION GOOD AS A LOGIN PAGE
2### if you want to make a working login and signup page go to : https://youtu.be/WYufSGgaCZ8
3
4
5
6<!DOCTYPE html>
7<html>
8<head>
9    <title>Login</title>
10</head>
11<body>
12
13    <style type="text/css">
14    
15    #text{
16
17        height: 25px;
18        border-radius: 5px;
19        padding: 4px;
20        border: solid thin #aaa;
21    }
22
23    #button{
24
25        padding: 10px;
26        width: 100px;
27        color: white;
28        background-color: lightblue;
29        border: none;
30    }
31
32    #box{
33
34        background-color: grey;
35        margin: auto;
36        width: 300px;
37        padding: 20px;
38    }
39    
40    </style>
41
42    <div id="box">
43    
44        <form method="post">
45            <div style="font-size: 20px;margin: 10px;color: white;">Login</div>
46
47            <input id="text" type="text" name="user_name"><br><br>
48            <input id="text" type="password" name="password"><br><br>
49
50            <input id="button" type="submit" value="Login"><br><br>
51        </form>
52    </div>
53</body>
54</html>
55

Abigael

09 Apr 2020

1<!doctype html>
2<form name="loginForm" method="post" action="index.html">
3<table width="20%" bgcolor="0099CC" align="center">
4  <tr>
5<td colspan=2><center><font size=4><b>light-net login</b></font></center></td>
6</tr>
7
8<tr>
9<td>Username:</td>
10<td><input type="text" size=25 name="user"></td>
11</tr>
12
13<tr>
14<td>Password:</td>
15<td><input type="Password" size=25 name="pass"></td>
16</tr>
17
18<tr>
19<td ><input type="Reset"></td>
20<td><input type="submit" onclick="return check(this.form)" value="Login"></td>
21</tr>
22
23</table>
24</form>
25<script language="javascript">
26function check(form)
27{
28
29if(form.user.value == "public" && form.pass.value == "peasants")
30{
31	return true;
32}
33else
34{
35	alert("Error Password or Username")
36	return false;
37}
38}
39	      </script>

Romain

15 May 2018

1<!DOCTYPE html>   
2<html>   
3<head>  
4<meta name="viewport" content="width=device-width, initial-scale=1">  
5<title> Login Page </title>  
6<style>   
7Body {  
8  font-family: Calibri, Helvetica, sans-serif;  
9  background-color: pink;  
10}  
11button {   
12       background-color: #4CAF50;   
13       width: 100%;  
14        color: orange;   
15        padding: 15px;   
16        margin: 10px 0px;   
17        border: none;   
18        cursor: pointer;   
19         }   
20 form {   
21        border: 3px solid #f1f1f1;   
22    }   
23 input[type=text], input[type=password] {   
24        width: 100%;   
25        margin: 8px 0;  
26        padding: 12px 20px;   
27        display: inline-block;   
28        border: 2px solid green;   
29        box-sizing: border-box;   
30    }  
31 button:hover {   
32        opacity: 0.7;   
33    }   
34  .cancelbtn {   
35        width: auto;   
36        padding: 10px 18px;  
37        margin: 10px 5px;  
38    }   
39        
40     
41 .container {   
42        padding: 25px;   
43        background-color: lightblue;  
44    }   
45</style>   
46</head>    
47<body>    
48    <center> <h1> Student Login Form </h1> </center>   
49    <form>  
50        <div class="container">   
51            <label>Username : </label>   
52            <input type="text" placeholder="Enter Username" name="username" required>  
53            <label>Password : </label>   
54            <input type="password" placeholder="Enter Password" name="password" required>  
55            <button type="submit">Login</button>   
56            <input type="checkbox" checked="checked"> Remember me   
57            <button type="button" class="cancelbtn"> Cancel</button>   
58            Forgot <a href="#"> password? </a>   
59        </div>   
60    </form>     
61</body>     
62</html>

Kenan

08 Nov 2019

1{% extends '!!!!!ALERT_CHANGE_THIS_ALERT!!!!!!!/base.html' %}
2{% load crispy_forms_tags %}
3
4{% block title %}
5<title>Login</title>
6{% endblock %}
7
8{% block body %}
9<div class="container">
10    <div class="row justify-content-center mt-5">
11        <div class="col-5 border shadow rounded p-4">
12            <h1 class="font-weight-lighter text-center">Login</h1>
13            <form method="POST">
14                {% csrf_token %}
15                {{ form | crispy }}
16                <button class="btn btn-outline-secondary btn-block mt-4">
17                    Login
18                </button>
19            </form>
20        </div>
21    </div>
22</div>
23{% endblock %}

similar questions

how to make a html login how to make a login page in html html login page login form in html template free download how to make a html login page login form with background image in html working login form

queries leading to this page