KELAS {{ video.course.name }} {{ video.title }} DESKRIPSI {{ video.description }} Terimakasih sudah berkunjung. Happy coding :)
{{ video.tutor.fullname }}{{ video.tutor.title }}
help Get Help Kali ini Sobat Informatika akan membarikan tutorial Membuat Form Login Menggunakan CSS dan Bootstrap, Bootstrap itu sendiri adalah salah satu Framework CSS dan HTML yang berisikan kumpulan template desain web yang responsive dengan tampilan yang modern, meliputi desain tombol, form, navigasi, dan juga terdapat JS atau Java Script. Dengan semua template yang dimiliki Bootsrap tersebut sangatlah membantu para Develper WEB terutama pada bagian Back End yang menangani Coding WEB. Jika Sobat belum mendownload Bootstrap download terlebih dahulu , jika sudah selesai, extract Bootstrap.zip sobat. 1. Buat File.php BaruExampleCoding nya Begini Gan :
<html> <head> <title>Halaman Loginku</title> </head> <body> Isi Konten </html> 2. Masukan Script CSSMasukan Script CSS dari Bootstrap di dalam tag <head> agar atribut yang ada di Bootstrap bisa di pakai atau di panggil. ExampleCoding nya Begini Gan :
<link rel="stylesheet" href="assets/css/floating-labels.css"> <link rel="stylesheet" href="assets/css/bootstrap.css"> </head> 3. Buat Form Login Sekaligus Tombol Sign InMulai dari sini template Bootstrap mulai digunakan atau di panggil. ExampleCoding nya Begini Gan : <!-- Desain Form Login Mulai Dari Sini Berdasarkan class --> <form id="frm01" name="frm01" method="POST" action="login.php" class="form-signin"><!-- Menampilkan Logo Bootstrap --> <div class="text-center mb-2"><img class="mb-1" src="assets/images/bootstrap-solid.svg" width="75" height="75"> <h2 style="color:blue;font-family:consolas">SELAMAT DATANG</h2> </div> <!-- Ini Coding Membuat Form Input Email --> <div class="form-label-group"><input name="inputEmail" class="form-control" type="email" id="inputEmail" placeholder="Email Address" autofocus="yes" autocomplete="no" required="yes" > <label for="inputEmail">Email Address</label> </div> <!-- Yang ini membuat Form Password --> <div class="form-label-group"><input name="inputpassword" class="form-control" type="password" id="inputpassword" placeholder="Password" required="yes"> <label for="inputpassword">Password </div> <!-- Ini membuat Checkbox --> <label> <input type="checkbox"> Remember Me ? </label> </div> <!-- Dari sini mulai membuat tombil fungsi Sign In, Forgot Pass, Dan Creat New Act --> <div class="text-center mb-2"><button type="submit" class="btn btn-lg btn-primary btn-block">SIGN IN</button> </div> <button type="button" class="btn btn-dark" style="width:192px">FORGOT PASSWORD</button> <button type="button" class="btn btn-success" style="width:193px">CREATE ACOUNT</button> </form> Hasil :Hasil akan sama seperti Screenshoot dibawah, sekian tutorial Cara Membuat Form Login Menggunakan Bootstrap Semoga sobat bisa paham dan berhasil, terimakasih. |
Cara menggunakan halaman login bootstrap
Pos Terkait
Copyright © 2024 idkuu.com Inc.
