Bisakah kita membuat halaman login di html?

Awal perjalanan dalam pengembangan web (front-end) bisa jadi menakutkan. Markupnya sangat aneh pada awalnya. CSS terkadang membuat halaman Anda indah, terkadang Anda tidak tahu mengapa satu properti mengubah halaman Anda menjadi berantakan. Dan jika ini pertama kalinya Anda bekerja dengan bahasa pemrograman, JavaScript mungkin yang paling menakutkan dari ketiganya

Namun, ketika Anda akhirnya memahami HTML, CSS, dan JavaScript, apa yang Anda lakukan dengannya? . Pikirkan sesuatu yang ingin Anda lakukan dengan pengetahuan yang baru Anda temukan, tidak masalah jika itu "berguna", tidak masalah seberapa rumitnya itu. Lakukan saja sesuatu yang membantu Anda menjadi lebih baik dalam HTML, CSS, dan JavaScript. Dan tolong, jangan pernah melupakan nilai membangun hal-hal bodoh. )

Hari ini, seperti yang sudah Anda ketahui dari judulnya, saya akan memandu Anda melalui pembuatan halaman login menggunakan HTML, CSS, dan JavaScript. Tapi jangan khawatir. Sekali lagi, seperti judulnya, ini adalah halaman login pertama Anda, artinya kodenya sesederhana mungkin dan akan ada penjelasan untuk menyertai setiap potongan kode

Sebelum melompat ke kode, izinkan saya menunjukkan kepada Anda apa yang akan kami buat

Halaman masuk

Login Berhasil

Masuk dengan kredensial yang tidak valid

Seperti yang Anda lihat, halaman tersebut berisi judul, formulir login (untuk nama pengguna dan kata sandi) dan tombol login yang "mengirimkan" data input. Perhatikan bahwa saya menggunakan tanda kutip di sekitar pengiriman karena tidak ada pengiriman yang sebenarnya. Baik nama pengguna maupun kata sandi tidak dikirim ke server untuk divalidasi. Sebagai gantinya, saat pengguna mengklik tombol login, kami memvalidasi bahwa nama pengguna adalah "pengguna" dan kata sandinya adalah "web_dev" menggunakan JavaScript. Jika cocok, maka dialog peringatan ditampilkan dan halaman dimuat ulang (demi kesederhanaan);

Sekarang setelah Anda lebih memahami hasil akhirnya, mari beralih ke kode

HTML

Kami akan mulai dengan HTML, karena HTML bertanggung jawab atas informasi yang ditampilkan di halaman. Dengan kata lain, pertama-tama kita akan menulis dan menyusun semua informasi yang ada di halaman tanpa mengkhawatirkan gaya (CSS) atau interaktivitas (JavaScript). Analisis file HTML lengkap selama yang Anda inginkan dan saat Anda siap, lanjutkan ke penjelasannya

berkas HTML

Seperti biasa dalam file HTML, kami memiliki dua bagian. yang dan . Yang pertama termasuk metainformasi tentang halaman web kami, seperti pengkodean karakter yang digunakan, judul halaman (nama yang Anda lihat di tab browser Anda) dan referensi ke file CSS dan JavaScript yang akan digunakan oleh file HTML ini. Perhatikan bahwa ada atribut defer_ di tag

kode html

Reply 0 0 Chia sẻ