html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Login Form</title>
<meta http-equiv="X-UA-Compatible" content="IE=7,8,edge" />
</head>
<body>
<div>
<form action="" id="form" align=center onsubmit="alert('Thanks for submiting form')">
<input type="text" name="uname" id="uname" value="" required placeholder="User Name" />
<br />
<input type="password" name="key" id="key" value="" required placeholder="password"/>
<span id="show" value="submit" onclick="showHide()">show</span>
<br /> <br />
<input type="submit" value="login" id="submit" onclick="submit()">
</form>
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
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
body{
display: flex;
justify-content: center;
align-items: center;
}
div{
box-shadow: #000 3px 3px 40px;
border-radius: 4px;
padding: 8%;
}
#show,#key,#uname{
outline:none;
padding: 0px 6px;
font-family: Monospace;
border: none;
border-bottom: 2px solid #000;
height:20pt;
margin:5px;
background-color: #FFF;
}
#key{
border: none ;
border-bottom: 2px solid #000;
width: 90pt;
letter-spacing: 5px;
margin-left:0px;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var x = 0 ;
function showHide() {
let btn = document.getElementById('show') ;
let key = document.getElementById('key') ;
x++;
if (x%2) {
btn.innerHTML = "hide" ;
key.type = "text" ;
key.style.borderColor = "#000" ;
}else{
btn.innerHTML = "show" ;
key.type = "password" ;
key.style.borderColor = "gray" ;
}
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run