Membuat Halaman Login + CSS


Bismillahirohmanirohim.. Akhirnya pada kesempatan kali ini saya akan mencoba untuk sedikit berbagi kepada kawan-kawan semua tentang “bagaimana membuat halaman login dan meriasnya menggunakan CSS”. Tulisan ini terinspirasi ketika teman saya bertanya bagaimana membuat template yang akan saya demo-kan pada workshop dua hari lagi (Minggu, 21 Okt 2012). Thank’s for Zaini Saputra atas pertanyaannya.. 😀

Disini saya hanya akan membuatkan form saja tanpa berurusan dengan database dan query nya. Jadi hanya berupa HTML dan CSS sajaBaiklah, mari kita mulai saja. Oya, gunakan text editor (saya: notepad++) untuk memulai proses coding.

  1. Pertama-tama buatkan satu buah folder dan beri nama terserah Anda, misalnya “latihan”
  2. Buatkan dua buah file, masing-masing “form.html” dan “style.css”

Buka file form.html dan ketikkan baris perintah berikut ini:

<!DOCTYPE HTML>
<html>
<head>
<title>Latihan1</title>
<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>
 <div id="container">
 <form method="post" action="">
 <label for="username">Username:</label>
 <input type="text" name="username">

 <label for="password">Password:</label>
 <input type="password" name="password">

 <input type="submit" name="login" value="Login">
 </form>
 </div><!-- container-->
</body>
</html>

Selanjutnya silakan buka file style.css lalu ketikkan baris perintah berikut:

* {
	margin: 0; padding: 0;
}

body {
	background: #e0e0e0;
	font-family: "Lucida Sans Unicode";
	font-size: 13px;
	color: #333;
}

#container {
	width: 250px;
	margin: 100px auto;
	padding: 20px;
	background: #fff;
	border: 1px solid silver;
	border-radius: 8px;
}

label.label {
	width: 250px;
	margin-bottom: 5px;
	float: left;
}

input.textfield {
	width: 240px;
	padding: 3px 5px;
	margin-bottom: 5px;
}

input.button {
	padding: 4px 10px;
}

Nah, setelah itu silakan buka melalui web browser dan lihat hasilnya. Cukup menarik bukan? Semoga ini bisa bermanfaat. Aamiin.. 🙂

Advertisements

3 thoughts on “Membuat Halaman Login + CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.