Mempercantik Tampilan Form Login

Update Terakhir pada 5 July 2019

Assalamualaikum Wr. Wb.

Pada kesempatan kali ini webhozz akan berbagi ilmu lagi. Kali ini tentang Web design. Adapun pada artikel ini akan dibahas untuk membuat mempercantik form login.
Sebuah form login tentunya merupakan halaman awal saat kita coba memasuki ruangan user kita. Form login tentunya merupakan pintu masuk ke dalam ruangan user, baik itu seperti member maupun admin.
Tapi berhubung, form login adalah halaman awal maka kita akan belajar sedikit cara untuk mempercantik tampilannya. Oke langsung aja ya kita mulai.

1. Pertama, kita buat dulu filenya. Disini kita coba buat file html dengan nama login.html.

2. Dalam login.html. Ketikkan kode seperti di bawah ini.

<!DOCTYPE html>
<html>
<head>
	<title>LOGIN FORM</title>
</head>
<body>

	<form class="login">
		<h3>LOGIN DULU</h3>
			
		<p>
			Username : <br>
			<input type="text" name="username">
		</p>

		<p>
			Password : <br>
			<input type="password" name="password">
		</p>

		<p>
			<input type="SUBMIT" value="LOGIN">
		</p>
	</form>
</body>
</html>

3. Maka tampilan normalnya saat di browser akan menjadi seperti ini.

4. Kemudian buat file cssnya, disini kita coba dengan nama login.css. Kemudian ketikkan kode sebagai berikut.

body
{
	background-color: black;
}

.login
{
	background-color: white;
	width: 350px;
	padding: 20px;
	margin: auto;
	margin-top: 100px;
	border: 2px solid black;
	font-size: 18px;
}

h3
{
	background-color: orange;
	text-align: center;
	color: white;
	padding: 10px;
	border-radius: 7px;
}

input
{
	width: 100%;
	padding: 12px 10px;
	box-sizing: border-box;
	font-size: 18px;
}

input[type=submit]
{
	background-color: crimson;
	border-radius:18px;
	color: white;
}

5. Kemudian lanjutkan dengan panggil file cssnya di tagpada file login.html. Kodenya seperti di bawah ini.

<link rel="stylesheet" type="text/css" href="login.css">

6. Dan seperti inilah hasilnya saat di browser.

Dan Alhamdulillah begitulah cara menghiasi form login. Sisanya seperti ukuran, style, sampai pewarnaan silahkan teman-teman coba sesuai kreativitas masing-masing ya.
Akhir kata, semoga artikel ini bermanfaat. Amin.
Wassalamualaikum Wr. Wb.

Created By : Danny Julian Pratama

Related posts: