Membuat Form Login Website

Beberapa hari yang lalu saya iseng-iseng membuat form login sendiri karena saya ingin membuat website dengan framework Codeigniter dan template yang dibuat dari nol pula.

Form login seringkali kita temukan ketika menjelajahi internet. Bentuk dari form login tersebut bermacam-macam. Ada yang teretak di pinggir sebuah website, di pojok kanan atas, dan tempat-tempat strategis yang mudah dilihat oleh pengunjung.

Form login juga ditemukan ketika ingin memasuki halaman admin suatu website. Sebut saja wordpress, ketika kita masuk ke halaman login admin WordPress, maka akan muncul form login yang harus kita isi dengan username dan password yang kita miliki.

Membuat Form Login Website

Membuat form login website secara manual tidak terlalu sulit, anda hanya perlu sedikit menguasai tentang HTML dan CSS. Berikut ini saya memberikan tutorial untuk membuat login form secara sederhana dan mudah diikuti.

Sebelumnya anda harus memiliki gambaran seperti apa desain form login yang anda buat, kita anggap saja seperti ini:

tutorial membuat login form dengan menggunakan html dan css

Gambar di atas adalah gambar yang digunakan sebagai background dari form login yang akan kita buat, ada dua images yaitu background keseluruhan dan images button. Untuk ukurannya anda bisa menyesuaikan dengan CSS di bawah ini nantinya.

Langsung saja, pertama kita buat dahulu file HTML nya. Di sini saya beri nama login.html

Masukkan code berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Login Form</title>
	<meta name="author" content="azhar" />
	<!-- Date: 2011-11-29 -->
	<link href="login-form.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="wrapper">
		<h2>Login Form</h2>
		<table>
			<tr>
				<td width="200">Username</td>
				<td><input type="text" name="username" title="Username" class="form-login" size="30" maxlength="100"/></td>
			</tr>
			<tr>
				<td>Password</td>
				<td><input type="password" name="password" title="Passsword" class="form-login" size="30" maxlength="100"/></td>
			</tr>
			<tr>
				<td></td>
				<td><input type="submit" value="" class="btn-login"/></td>
			</tr>
		</table>
	</div>
</body>
</html>

Selanjutnya kita buat file CSS sebagai style dari html tersebut. Di sini saya beri nama login-form.css

html{

	background-color: #6e6e6e;

}

body {

	width: 500px;
	height: 300px;
	margin: 150px auto;
	padding-top: 75px;
	background: url(images/login-form.png) no-repeat left top;

}

#wrapper{

	padding: 10px 70px 0 70px;
	font-family: Arial, Helvetica, sans-serif;
	color: #0d5fac;

}

#wrapper h2{

	font-size: 18px;

}

.form-login{

	padding: 2px 3px;
	width: 200px;
	border: 1px solid #0d5fac;
	border-spacing: 1px;
	font-size: 16px;
	color: #0d5fac;

}

.btn-login{

	width: 89px;
	height: 36px;
	cursor: pointer;
	border: none;
	background: url(images/login-button.png)no-repeat left top;

}

Simpan, dan kemudian jalankan melalui browser :-)

19 Responses to “Membuat Form Login Website”

  1. harry says:

    thanks info gan, kunjung balik ya

  2. dariuswendy says:

    gan,harus pilih yg mana,html atau css atau harus copy dua duanya

  3. dito laksono says:

    eh, terus nanti ada yang daftar terus data-datanya masuk kemana ??

    1. daftar bagaimana? di atas cuma form login saja kok

  4. kok log’in buttonnya punyaku gamau keluar ya?

    1. gambar buttonnya (login-button.png) di bikin dulu hehe
      liat baris ini:
      background: url(images/login-button.png)no-repeat left top;

  5. Resti says:

    Thankyou :)
    untuk gambarnya kita harus ada sendiri atau gimana ya kaka ?

    1. iya, gambarnya harus ada sendiri,
      background kotak, sama button nya

  6. [...] Membuat Form Login Website [...]

  7. gimana sih biar jago css :3

  8. pebrianf says:

    thx ya broo

  9. apis says:

    kalo mau sekalian nyambung ke database website gimana gan? selama ini yang ane tau pake .php,, kalo pake html bisa gak?

  10. Bambang says:

    terimakasih tutorialnya bro

  11. Ringgo says:

    ini gak jelas ya, disimpan dimana file css yg udah dibuat? di ci kan banyak folder

    1. css silakan kreasi anda sendiri, bisa ditaruh dimanapun, misal di folder root, nanti pathnya dipanggil pake fungsi base url di ci, lebih lengkap baca user guide

Leave a Reply