A. JUDUL
Workshop bersama PHP
Indonesia with Mas Daniel & Mas Yogi | Form Login
B. PENDAHULUAN
1. Pengertian
Form Login adalah
sebuah form atau kolom kolom untuk di isi sebagai media memasukkan
nilai.
2. Latar Belakang
Mengapa ada form,
dengan form akan termudahkan dalam penginputan data ataupun yang
lainnya. Karena apa disitu akan tertera informasi yang seharusnya
diisikan.
3. Maksud
danTujuan
-
Membuat form untuk login
4. Hasil yang
Diharapkan
Dari form login ini
dapat dijadikan interface untuk login di suatu system.
C. ALAT dan BAHAN
-
PC/Laptop
-
Browser
-
Text Editor
D. JANGKA WAKTU
2 jam
E.
LANGKAH-LANGKAH
1. Siapkan laptop
2. Buka text editor
3. Kita buat
kerangkanya dahulu, seperti script di bawah
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login SI Perpus</title>
<link rel="stylesheet" type="text/css" href="css/stylee.css">
</head>
<body>
<form method="post" name="form_login" id="form_login" style="margin-top: 120px;">
<table class="form">
<tr>
<td colspan="2">
<h1 align="center">Login Petugas</h1>
</td>
</tr>
<tr>
<td>Username</td>
<td>
<input type="text" name="username" id="username" required/>
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" name="password" id="password" required/>
</td>
</tr>
<tr style="height:10px"></tr>
<tr>
<td colspan="2" align="right">
<input type="submit" name="login" id="login" value="Login" class="btn btn-submit" />
</td>
</tr>
</table>
</form>
</body>
</html>
dan hasilnya jika
dibuka dibrowser akan seperti ini
4. Setelah sudah
terbentuk kerangkanya agar lebih menarik kita akan menambahkan css,
seperti dibawah.
*{
font-weight: 100;
}
body{
margin: 0;
background : #798E82;
}
/*form*/
.form{
background: #42775A;
border-radius: 5px;
padding: 4px 20px 15px 20px;
box-shadow: 0px 0px 5px black;
color: #FFF;
margin: 0 auto;
width: 430px;
}
input, textarea, select {
width: 100%;
padding: 10px 5px;
box-sizing: border-box;
font-size: large;
}
textarea {
min-height: 80px;
}
.btn {
width: auto;
color: #fff;
border: none;
cursor: pointer;
padding: 10px;
}
.btn-submit {
background-color: #C35045;
}
.btn-submit:hover {
background-color: #CA665C;
}
5. Untuk
menhubungkan antara html dan css bagaimana? Nah tinggal kita
tambahkan tag link di bagian file html, di bawah title
F. HASIL yang
DIDAPAT
Hasilnya seperti
gambar dibawah ini
G. PENEMUAN
PERMASALAHAN
-
H. KESIMPULAN
Dengan form login
ini, untuk masuk ke suatu sistem akan lebih interaktif.
I. REFERENSI
-
Tidak ada komentar:
Write komentar