html login page

Solutions on MaxInterview for html login page by the best coders in the world

showing results for - "html login page"

10 Feb 2016

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>

Giorgio

14 Aug 2019

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

Brevyn

25 Feb 2019

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

Rafael

04 Oct 2017

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>

Roberto

07 Apr 2017

1<html>
2<head>
3<title>Account</title>
4<style>
5body
6{
7	background-color:#ffda08;
8}
9table
10{
11	border:1px white;
12	margin-top:200px;
13	margin-left:500px;
14	background-color:white;
15	padding:20px
16}
17#btn
18{
19	width:200px;
20	height:50px;
21	background-color:#1ee3d2;
22}
23
24</style>
25</head>
26<body>
27	<form name=frmNewAcc>
28		<table border=0 cellspacing=5px>
29	<tr>
30		<th colspan=3><input class=in =text name=txtuname placeholder="Enter your account name"></th>
31	</tr>
32	<tr>
33		<th colspan=3><input class=in type=password name=txtupass placeholder="Enter your new password"></th>
34	</tr>
35	<tr>
36		<th colspan=3><input  class=in type=password name=txtuconfirmpass placeholder="Enter confirmed password"></th>
37	</tr>
38	<tr>
39		<th colspan=3><input id=btn type=button value="Create new account"></th>
40		<a href="Login task 1.html">Go back to login</a>
41	</tr>
42
43	
44</table>
45</form>
46</body>
47</html>
48
49

Paul

05 Oct 2020

1<html>
2      <head>
3    <title>Login page example</title>
4    <style>
5      input{
6        font-size: 20;
7      }
8      body{
9        background-color: red;
10      }
11    </style>
12  </head>
13  <body>
14    <input placeholder="Username"/>
15    <br />
16    <input type="password" placeholder="Password"/>
17    <br/>
18    <br/>
19    <button>Login</button>
20    </body>
21
22</html>
23

similar questions

login form html javascript login form how to make a login page in html how to make a html login page login form in html template free download working login form

queries leading to this page