Membuat Form Login Sederhana

0
256

<html>
<title>Latihan membuat form login</title>
<head></head>
<body>
<center><h2>Form Login Guru Blogger</h2><small>Gunakan username dan password anda</small></center>
<center><table cellpadding=”5″></center>
<form>
<tr>
<td>Username</td>
<td>:</td>
<td><input type=”text” name=”username” size=”30″ placeholder=”Enter Username”></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type=”password” name=”password” size=”30″ placeholder=”Enter Username”></td>
</tr>
<tr>
<td><input type=”submit” name=”login” value=”LOGIN”></td>
</tr>
</form>
</table>
</body>
</html>

Script CSS mendesign form login

<style>
body {
font-family:arial;
margin-top:220px;
background-image:url(‘gambar/bg.jpg’);
}
input {
height:28px;
border-radius:5px 5px 5px 5px;
}
h2 {
color:#09d;
}
</style>

Keterangan script

  • Script CSS diletakan diantara </head> dan <body>
  • CSS dimulai dengan <style></style>
  • border-radius berfungsi untuk membulatkan sudut sudut dari kolom input , dari contoh diatas besarnya adalah 5px
  • background-image berfungsi untuk memberikan gambar latar pada form login kita.
  • font-family berfungsi untuk menentukan jenis huruf pada halaman website kita, untuk jenis huruf bisa kita lihat pada microsoft office
  • color berfungsi untuk memberikan warna tulisan pada halaman website kita
  • #09d adalah bilangan hexadesimal untuk warna biru, namun kita juga bisa mengunakan kombinasi warna dari RGB (red, green, blue)
  • Khusus untuk background-image kita harus menyimpan sebuag gambar pada webserver kita, pada latihan ini gambar kita letakan pada htdocs/video/gambar, dengan nama gambar bg.jpg.

Latihan membuat form login

TIDAK ADA KOMENTAR

LEAVE A REPLY