Membuat Halaman Login + CSS

3 Replies

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 saja. Baiklah, 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.. 🙂

3 thoughts on “Membuat Halaman Login + CSS”

Tinggalkan Komentar

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