Masih sama "Semangat Pagi..!!...
kali ini share tentang cara membuat tampilan login sederhana.
- Tulislah script seperti dibawah ini:
<body>
<br> <br><br> <br><br> <br> <br><fieldset>
<legend><p>Sign In</p></legend>
<center><p>Silahkan login dengan username dan password anda</p></center>
<div class="container">
<center><label><b>Username</b></label>
<td>:</td>
<input type="text" placeholder=" Username" name="uname" required><br>
<label><b>Password</b></label>
<td>:</td>
<input type="text" placeholder="Password" name="psw" required>
</center>
<center><button type="submit">Login</button>
</div>
</fieldset>
</div>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
2. Untuk mempercantik tampilan:
< style>
body{
background: url('images/wkr.jpg') no-repeat scroll;
background-size: 100% 100%;
min-height: 700px;
font-family:
}
p {
color: #22A7F0;
}
input[type=text] {
width: 30%;
padding: 6px 10px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #22A7F0;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 10%;
}
.container {
padding: 16px;
}
</style>
Sekian dan selamat mecoba script tersebut.
Wassalamualaikum Wr.Wb.