Membuat Login sederhana
|
Senin, 07 Maret 2016
Assalamualaikum Wr.WbForm login merupakan sebuah laman, dimana setiap user harus memiliki akun dan login terlebih dahulu sebelum masuk ke dalam sebuah website termasuk seorang pemilik (Admin).
Untuk membuat form login tidaklah sulit, Anda cari kode hanya perlu membuat beberapa struktur yang ada didalam form login, seperti, input untuk user, form input password, button submit dan yang lainnya yang perluditerapkan di dalam sebuah form login.
Langkahawal untuk membuat form login, buatlah terlebih dahulu syntax HTML nya kemudian baru kita desain dengan menggunakan css, Berikut untuk syntax HTML nya :
<html>
<head>
<title> login</title>
<style>
DI SINI SYNTAX CSS AKAN DI TEMPATKAN
</style>
<center>
<div class="container">
<br><h4>
<div class="text" style="color: hotpink ;line-height: 170%;font-size: 200%">
SMP NEGERI 6 YOGYAKARTA<br>
<p style="line-height: 20%; font-size: 55%;">Jl.Robert Wolter Monginsidi No.1 Jetis,<br></p>
<p style="line-height: 20%; font-size: 55%;">YOGYAKARTA 55233<br></p>
<p style="line-height: 10%; font-size: 25;">Email : smpn6yk@yahoo.com<br></p>
</div>
</h4>
<br>
<br>
<br>
<img src="SMP-N-6-Yogyakarta.png" width=300 height=300><br>
<form>
<div>
<label class="inputan1text" for="username">Username<br />
<input class="inputan1" type="text" name="name" id="name"/></label><br />
<label class="inputan2text" for="pass">Password<br />
<input class="inputan2" type="password" name="password" id="password"/></label>
</div>
<div class="bawah">
<label class="komentar">
<input type="checkbox" name="remember"> Ingat Saya
</label>
<input class="masuk" type="submit" name="submit" value="Login">
</div>
</form>
</div>
</div>
</body>
</html>
Catatan :
edit
<head>
<title> login</title>
<style>
DI SINI SYNTAX CSS AKAN DI TEMPATKAN
</style>
<center>
<div class="container">
<br><h4>
<div class="text" style="color: hotpink ;line-height: 170%;font-size: 200%">
SMP NEGERI 6 YOGYAKARTA<br>
<p style="line-height: 20%; font-size: 55%;">Jl.Robert Wolter Monginsidi No.1 Jetis,<br></p>
<p style="line-height: 20%; font-size: 55%;">YOGYAKARTA 55233<br></p>
<p style="line-height: 10%; font-size: 25;">Email : smpn6yk@yahoo.com<br></p>
</div>
</h4>
<br>
<br>
<br>
<img src="SMP-N-6-Yogyakarta.png" width=300 height=300><br>
<form>
<div>
<label class="inputan1text" for="username">Username<br />
<input class="inputan1" type="text" name="name" id="name"/></label><br />
<label class="inputan2text" for="pass">Password<br />
<input class="inputan2" type="password" name="password" id="password"/></label>
</div>
<div class="bawah">
<label class="komentar">
<input type="checkbox" name="remember"> Ingat Saya
</label>
<input class="masuk" type="submit" name="submit" value="Login">
</div>
</form>
</div>
</div>
</body>
</html>
berikut adalah tampilan yang sudah jadi :
Catatan :
- Untuk membuat input username gunakan type=”text”.
- Untuk membuat input password gunakan type=”password”, Jika pada input password sahabat cari kode menggunakan type-“text”, maka password akan muncul dalam bentuk text, namun jika typenya “password” maka akan muncul titik – titik ( password tidak akan terlihat seperti yesk biasa ).
- Untuk membuat Check list ingat saya gunakan type=”checkbox”.
- Untuk membuat button submit gunakan type=”submit”.
Sekian dari saya semoga bermanfaat untuk Anda. Terima kasih :)
Wassalamualaikum Wr.Wb
Tidak ada komentar:
Posting Komentar