Selamat datang lagi di mandankoding.com, Pada tutorial kali ini kita akan membahas Cara Membuat Form Login Dengan HTML Dan CSS. Sebelumnya kita juga sudah berbagi Source Code tentang Cara Membuat Form Contact Us Dengan HTML Dan CSS.
![Cara Membuat Form Login Dengan HTML Dan CSS](https://mandankoding.com/wp-content/uploads/2022/09/Cara-Membuat-Form-Login-Dengan-HTML-Dan-CSS-1-1024x510.jpg)
Form Login adalah kumpulan kredensial yang di gunakan untuk memvalidasi pengguna saat ingin memasuki suatu halaman website, dalam pembuatan Form login paling sering menggunakan Username, Email, dan Password. Form login banyak di gunakan pada website, aplikasi komputer, dan aplikasi seluler.
Dalam mini proyek ini (Cara Membuat Form Login Dengan HTML Dan CSS), pada halaman web, terdapat Form Login dengan dua kolom input – Email dan Kata Sandi, link Frogot Password, dan tombol login.Anda dapat menonton video tutorial lengkap tentang program ini.
Dalam video di atas, kamu bisa melihat tahapan proses pembuatan Form Login Dengan HTML Dan CSS, bukan itu saja jika kamu suka dengan program ini kamu bisa juga menyalin kode dan mempraktek kannya secara langsung.
Tutorial Kami Lainnya
- Form Contact Us
- Cara Membuat Search Box Dengan HTML Dan CSS
- Cara Mendeteksi Browser Pengunjung Menggunakan HTML CSS & JavaScript
Cara Membuat Form Login Dengan HTML Dan CSS
Untuk membuat program ini (Cara Membuat Form Login Dengan HTML Dan CSS). Pertama, Kamu perlu membuat dua File satu File HTML dan satu lagi adalah File CSS. Setelah membuat file-file ini cukup salin kode berikut di file Kamu.
Catata: Untuk file gambar yang ada di dalam proyek, silahkan di sesuaikan.
Pertama, buat file HTML dengan nama index.html
dan salin kode di bawah ke file kamu. Ingat, Kamu harus membuat file dengan ekstensi.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kota Randang</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="login"> <form action=""> <h1>Login</h1> <hr> <p>Payakumbuh Kota Randang</p> <label for="">Email</label> <input type="text" placeholder="example@gmail.com"> <label for="">Password</label> <input type="password" placeholder="Password"> <button>Login</button> <p> <a href="#">Forgot Password?</a> </p> </form> </div> <div class="right"> <img src="image.png" alt=""> </div> </div> </body> </html>
Kedua, buat file CSS dengan nama style.css
dan salin kode di bawah ke dalam file kamu.
* { margin: 0; padding: 0; box-sizing: border-box; font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #ffa12c; } .container { width: 100%; display: flex; max-width: 850px; background: #fff; border-radius: 15px; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); } .login { width: 400px; } form { width: 250px; margin: 60px auto; } h1 { margin: 20px; text-align: center; font-weight: bolder; text-transform: uppercase; } hr { border-top: 2px solid #ffa12c; } p { text-align: center; margin: 10px; } .right img { width: 450px; height: 100%; border-top-right-radius: 15px; border-bottom-right-radius: 15px; } form label { display: block; font-size: 16px; font-weight: 600; padding: 5px; } input { width: 100%; margin: 2px; border: none; outline: none; padding: 8px; border-radius: 5px; border: 1px solid gray; } button { border: none; outline: none; padding: 8px; width: 252px; color: #fff; font-size: 16px; cursor: pointer; margin-top: 20px; border-radius: 5px; background: #ffa12c; } button:hover { background: rgba(214, 86, 64, 1); } @media (max-width: 880px) { .container { width: 100%; max-width: 750px; margin-left: 20px; margin-right: 20px; } form { width: 300px; margin: 20px auto; } .login { width: 400px; padding: 20px; } button { width: 100%; } .right img { width: 100%; height: 100%; } }
Untuk melihat hasilnya, silahkan kamu jalankan file index.html di browser kamu. Sekarang kamu sudah berhasil membuat (Cara Membuat Form Login Dengan HTML Dan CSS). Jika ada kesalahan dalam pembuatan kode atau tidak berfungsi, silahkan beri komentar pada kolom komentar di bawah.
Permisi kak, sy sudah nyoba yg tertera di tampilan kakak tp masih error, gimana ya kak
error nya dimana ya kak?