Tutorial dasar HTML 6
Pada kesempatan ini kita akan membahas, bagaimana dengan mudah membuat form login dengan mengunakan script HTML dan sedikit CSSuntuk design layoutnya. Form login pada aplikasi ataupun website berguna untuk memberikan atau membagi akses kepada sistem atau aplikasi yang kita buat, biasanya mengunakan username dan password.
Sebelumya ini kita sudah membahas tentang cara membuat form register pada HTML. Konsep dasar dari membuat sebuah form login sama dengan artikel sebelumnya tersebut. Dimana kita membutuhkan tabel dalam membuat form login tersebut. CSS kita butuhkan untuk mendesign form login kita agar lebih dinamis.
Script HTML form login
<html>
<title>Latihan membuat form login</title>
<head></head>
<body>
<center><h2>Form Login</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>
<title>Latihan membuat form login</title>
<head></head>
<body>
<center><h2>Form Login</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>
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 padahtdocs/video/gambar, dengan nama gambar bg.jpg.
0 komentar:
Posting Komentar