Download!Download Apps for FREE!!!

Membuat Form Login Sederhana

Membuat Form Login Sederhana menggunakan bahasa pemograman HTML untuk membuat formnya dan CSS untuk Tampilannya agar lebih menarik,

kali ini saya akan belajar membuat form login yang sederhana bagi kalian yang sudah mahir bisa abaikan saja karena tutorial ini hanya untuk pemula ya guys…..

Kita Langsung aja Siapkan editor kalian kita langsung ke intinya aja

<!DOCTYPE html>
<html>
<head>
	<title>Login</title>

//Awal Bagian CSS nya
	<style type="text/css">
		body{
			font-family:sans-serif;
			background-color: silver;
		}
		.wrap{
			width: 25%;
			margin: 150px auto;
			padding: 20px;
			background-color:white;
			border-radius: 10px;
			text-align: center;
			box-shadow: 3px 3px 5px black;
			margin-bottom: 20px;

		}
		.judul{
			color: black;
			font-size: 30px;
			height: 50px;
			text-align: left;
			padding: 20px

		}
		input{
			width: 90%;
			height: 30px;
			padding:5px;
			border-radius: 5px;
			margin: 10px;
			font-size: 14px;
			border-left: 5px solid green;
			border-top: 1px solid black;
			border-right: 1px solid black;
			border-bottom: 1px solid black;

		}
		button{
			padding: 10px;
			color: white;
			background-color: green;
			border:none;
			font-size: 16px;
			border-radius: 10px;
			margin-top: 15px;
			float: right;
			margin-right: 10px;
			
		}
		button:hover{
			background-color: tomato;
			border:none;
			transition: all 0.5s ease-in;
		}
		.clear{
			clear: both;
		}
	</style>
//Akhir Bagian CSS nya

</head>
<body>
	<div class="wrap">
		<div class="judul">
			&raquo; Login Admin
		</div>
		<div class="content">
			<form action="" method="post">
			<input type="text" name="username" placeholder="Isi Username">
			<input type="password" name="password" placeholder="Isi Password">
			<div class="right">
				<button type="submit"> `Login</button>
				<button type="Reset">`Reset</button>
			</div>
			<div class="clear"></div>
			</form>
		</div>
	</div>
	<footer><p align="center"> <i>Copyright &copy; 2019 by https://webmediabelajar.com</i></p></footer>
	
</body>
</html>

Hasilnya Jika ditampilkan di browser seperti ini :

form login

Nah Mudahan bisa membantu bagi kalian yang ingin membuat form login sederhana, mudah-mudahan tutorial saya bisa membantu yaaa…. silahkan tuliskan di kolom komentar jika ada pertanyaan… terimakasih








Add a Comment

Your email address will not be published. Required fields are marked *