Tugas 5 PWEB - Membuat Form Login
Nama : Nadya Zuhria Amana
NRP : 5025211058
Kelas : PWEB A
Kali ini saya di berikan tugas 5 membuat form Login
- LOGIN.HTML
Pada file login.html memuat informasi sebagai berikut
1. Bootstrap dan CSS: Bagian `<head>` dari kode ini memuat tautan ke Bootstrap CSS dan file CSS kustom yang digunakan untuk mengatur tata letak dan gaya halaman login.
2. Kontainer Utama: `<div class="container">` digunakan untuk mengelompokkan elemen-elemen di halaman ke dalam kotak kontainer yang terpusat pada tengah halaman.
3. Gambar Avatar: `<img src="img/1.png" alt="avator">` adalah elemen untuk menampilkan gambar avatar atau logo di halaman login.
4. Judul: `<h2> Welcome Back!</h2>` adalah judul sambutan atau pesan selamat datang yang ditampilkan di atas formulir login.
5. Formulir Login: `<form action="" method="POST">` adalah elemen form untuk pengguna memasukkan informasi login mereka. Form ini terdiri dari dua input, yaitu "Username" dan "Password", serta tombol "Login".
6. Input Username: `<input type="text" name="name" class="frm-ctrl" placeholder="Write your name" required="required">` adalah input teks untuk memasukkan username pengguna.
7. Input Password: `<input type="password" name="password" class="frm-ctrl" placeholder="Write your Password" required="required">` adalah input password untuk memasukkan kata sandi pengguna. Selain itu, terdapat juga tautan "Forget Password!" yang mengarahkan ke halaman lain jika pengguna lupa kata sandi.
8. Tombol Login: `<input type="submit" name="login" class="btn-login" value="Login">` adalah tombol yang digunakan untuk mengirimkan formulir login.
9. Tautan Sign Up: Terdapat tautan "Don't have an account? <a href="Account.html">Sign Up</a>" yang mengarahkan pengguna ke halaman "Sign Up" jika mereka tidak memiliki akun.
- FORGET_PASS.HTML
2. Kontainer Utama: <div class="container"> digunakan untuk mengelompokkan elemen-elemen di halaman ke dalam kotak kontainer yang terpusat pada tengah halaman.
3. Gambar Avatar: <img src="img/1.png"> adalah elemen untuk menampilkan gambar avatar atau logo di halaman reset password.
4. Judul: <h2> Reset your password</h2> adalah judul yang menunjukkan bahwa halaman ini digunakan untuk mereset kata sandi.
5. Formulir Reset Password: <form action="" method="POST"> adalah elemen form untuk pengguna memasukkan dan mengonfirmasi kata sandi baru. Form ini terdiri dari dua input, yaitu "password" dan "Re-password", serta tombol "Reset password".
6. Input Password: <input type="password" name="password" class="frm-ctrl" placeholder="Write your password" required="required"> adalah input password untuk memasukkan kata sandi baru.
7. Input Konfirmasi Password: <input type="re-password" name="re-password" class="frm-ctrl" placeholder="retype your new Password" required="required"> adalah input untuk mengkonfirmasi kata sandi baru.
8. Tombol Reset Password: <input type="submit" name="reset" class="btn-login" value="Reset password"> adalah tombol yang digunakan untuk mengirimkan formulir reset password.
9. Tautan Sign Up: Terdapat tautan "Don't have an account? <a href="Account.html">Sign Up</a>" yang mengarahkan pengguna ke halaman "Sign Up" jika mereka belum memiliki akun.
1. Bootstrap dan CSS: Seperti pada halaman sebelumnya, bagian <head> dari kode ini memuat tautan ke Bootstrap CSS dan file CSS kustom yang mengatur tata letak dan gaya halaman pendaftaran akun.
2. Kontainer Utama: <div class="container"> digunakan untuk mengelompokkan elemen-elemen di halaman ke dalam kotak kontainer yang terpusat pada tengah halaman.
3. Gambar Avatar: <img src="img/1.png"> adalah elemen untuk menampilkan gambar avatar atau logo di halaman pendaftaran akun.
4. Judul: <h2> Register Account</h2> adalah judul yang menunjukkan bahwa halaman ini digunakan untuk mendaftar akun baru.
5. Formulir Pendaftaran: <form action="" method="POST"> adalah elemen form untuk pengguna memasukkan informasi pendaftaran seperti "Username," "Password," "Re-Password," dan "Email."
6. Input Username: <input type="text" name="name" class="frm-ctrl" placeholder="Write your name" required="required"> adalah input untuk memasukkan nama pengguna.
7. Input Password: <input type="password" name="password" class="frm-ctrl" placeholder="Write your Password" required="required"> adalah input untuk memasukkan kata sandi.
8. Input Konfirmasi Password: <input type="re-password" name="re-password" class="frm-ctrl" placeholder="Write your RePassword" required="required"> adalah input untuk mengkonfirmasi kata sandi.
9. Input Email: <input type="email" name="email" class="frm-ctrl" placeholder="Write your Email" required="required"> adalah input untuk memasukkan alamat email.
10. Tautan Forget Password: Terdapat tautan "Forget Password! <a href="forget_pass.html">Click Here</a>" yang mengarahkan pengguna ke halaman lupa kata sandi jika diperlukan.
11. Tombol Register: <input type="submit" name="Register" class="btn-login" value="register"> adalah tombol yang digunakan untuk mengirimkan formulir pendaftaran.
12. Tautan Login: Terdapat tautan "Have an account? <a href="login.html">Login here</a>" yang mengarahkan pengguna ke halaman login jika mereka sudah memiliki akun.
7. Input Password: <input type="password" name="password" class="frm-ctrl" placeholder="Write your Password" required="required"> adalah input untuk memasukkan kata sandi.
8. Input Konfirmasi Password: <input type="re-password" name="re-password" class="frm-ctrl" placeholder="Write your RePassword" required="required"> adalah input untuk mengkonfirmasi kata sandi.
9. Input Email: <input type="email" name="email" class="frm-ctrl" placeholder="Write your Email" required="required"> adalah input untuk memasukkan alamat email.
10. Tautan Forget Password: Terdapat tautan "Forget Password! <a href="forget_pass.html">Click Here</a>" yang mengarahkan pengguna ke halaman lupa kata sandi jika diperlukan.
11. Tombol Register: <input type="submit" name="Register" class="btn-login" value="register"> adalah tombol yang digunakan untuk mengirimkan formulir pendaftaran.
12. Tautan Login: Terdapat tautan "Have an account? <a href="login.html">Login here</a>" yang mengarahkan pengguna ke halaman login jika mereka sudah memiliki akun.