search

Program html untuk halaman login

1 years ago
Komentar: 0
Dibaca: 128

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

Show

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

Login page

Halaman masuk

Successful login

Login Berhasil

Login with invalid credentials

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 <head> dan <body>. 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 <script> sehingga skrip JavaScript hanya dijalankan setelah HTML dimuat sepenuhnya

Di <body>_, kami menyertakan semua informasi yang akan terlihat di halaman kami. Kami menggunakan elemen <main> untuk membungkus semua konten halaman alih-alih <div> sederhana. Sementara <main> dan elemen semantik lainnya secara fungsional sama dengan <div>s dalam arti bahwa mereka membungkus elemen lain, yang pertama memberikan lebih banyak informasi kepada browser tentang konten halaman web dan memfasilitasi pekerjaan alat seperti pembaca layar, yang penting untuk dibuat

Di dalam elemen <main>_, yaitu persegi panjang putih, kita memiliki semua informasi yang terlihat di layar. judul "Masuk" sebagai elemen <head>_1, <div> yang hanya mengatur ruang yang diperlukan untuk pesan kesalahan (<head>3) dan terakhir, formulir masuk, <head>4. Formulir ini terdiri dari tiga <head>5 elemen. bidang teks untuk nama pengguna, bidang kata sandi untuk kata sandi dan tombol pengiriman formulir masing-masing. Menggunakan <head>_6 sebagai jenis bidang kedua adalah penting sehingga ketika pengguna mengetik kata sandinya, itu menunjukkan titik-titik, bukan kata sandi yang sebenarnya. Perhatikan juga atribut <head>_7. Nilai yang Anda berikan pada atribut tersebut kemudian ditampilkan sebagai, Anda dapat menebaknya, teks placeholder bidang formulir Anda

Omong-omong, jika Anda bertanya-tanya mengapa elemen <head>5 tidak ditutup, itu karena mereka tidak memerlukan tag penutup (<head>9 atau semacamnya). Itulah yang kami sebut tag penutup sendiri

Tentu saja, kami banyak menggunakan id dan kelas untuk memfasilitasi pekerjaan kami dengan CSS. Id memungkinkan kita untuk memilih elemen HTML dengan jelas, yaitu, setiap id mewakili satu elemen dari file kita. Di sisi lain, kelas digunakan ketika kita memiliki sekumpulan gaya CSS yang ingin kita ulangi untuk banyak elemen. Kita akan melihat penggunaan praktis dari id dan kelas ini selanjutnya

CSS

berkas CSS

Sekarang kita memiliki CSS, dengan kata lain, gaya halaman kita. Untuk memodifikasi setiap elemen dalam file HTML kami, kami dapat memilihnya menggunakan id, kelas atau nama tag itu sendiri, meskipun opsi terakhir tidak disarankan. Anda lihat, gaya pemilih CSS yang lebih spesifik menimpa gaya yang kurang spesifik. Misalnya, gaya pemilih id menimpa gaya pemilih kelas, dan gaya pemilih kelas menimpa gaya pemilih nama tag. Dengan kata lain, selalu buat pemilih CSS Anda sespesifik mungkin untuk hanya memengaruhi elemen yang ingin Anda pengaruhi

Dan jangan lupa, sementara pemilih nama tag hanya perlu nama tag, pemilih id dimulai dengan tanda pagar (<body>0) dan pemilih kelas dimulai dengan titik (<body>1). Jika suatu elemen memiliki id "test-id", maka dapat dipilih di CSS dengan id menggunakan <body>2. Jika suatu elemen memiliki kelas "test-class", maka dapat diidentifikasi sebagai <body>3

Dengan demikian, Anda masih dapat menggunakan pemilih nama tag. Misalnya, lihat awal inti kode. Nama tag <body>_4 dan <body> digunakan sebagai pemilih. Namun, jangan lupa bahwa hanya ada satu dari masing-masing dua elemen ini dalam file HTML… Dalam hal ini, kami telah menggunakan dua kumpulan aturan pertama (pemilih plus semua yang ada di dalam tanda kurung) untuk membuat modifikasi di seluruh halaman. Menyetel tinggi <body>_4 dan <body> menjadi 100% membuat halaman menggunakan semua layar dan menyetel margin <body> menjadi 0 akan menghapus pengguliran vertikal apa pun yang mungkin muncul karena gaya default elemen ini

Masih pada <body>, kami membuatnya menggunakan tampilan kisi untuk memusatkan isinya secara vertikal dan horizontal (dengan defer0 dan defer1, masing-masing). Dengan kata lain, dibutuhkan konten <body>, yang hanya merupakan elemen <main>, dan memposisikan <main> dan kontennya di tengah layar. Ini disebut tata letak kisi CSS dan jika Anda tidak terbiasa dengannya, saya telah menulis artikel pengantar singkat tentangnya di sini jika Anda ingin mempelajari lebih lanjut

Kami hanya akan menggunakan kasus penggunaan tata letak kisi yang paling sederhana, yaitu, untuk membuat elemen menggunakan tampilan kisi dan kemudian memposisikan kontennya sesuai, tetapi saya merekomendasikan untuk melihat Tata Letak Kisi jika Anda bisa. Ini adalah alat yang sederhana namun ampuh untuk memposisikan elemen di halaman Anda

Untuk <main>_, dikenal dengan id defer6 (baris 15 dari inti kode di atas), kita menyesuaikan ukurannya dan bermain-main dengan gayanya untuk membuatnya menonjol dari latar belakang gelap. Kami juga mengubah <main>_ menjadi kisi untuk memfasilitasi pemosisian kontennya yang hanya terdiri dari tiga elemen. a <head>1, a <div> dan a <head>4. Jadi, secara default CSS membuat grid tiga baris, satu untuk setiap elemen. Dengan kata lain, pikirkan persegi panjang putih sebagai kisi tiga baris

Baris pertama grid, judulnya, tetap apa adanya. Satu-satunya modifikasi yang didapat adalah dipusatkan, sebagai konsekuensi dari isi defer6 dipusatkan

Baris kedua di sisi lain mendapatkan beberapa modifikasi (baris 26 sampai 49), karena kita perlu memodifikasi baris itu sendiri yang berisi pesan kesalahan dan kemudian pesan kesalahan itu sendiri. Kami menggunakan tata letak kisi sekali lagi untuk memusatkan pesan di dalam baris kedua dan membuat <div> mengambil semua ruang yang tersedia di barisnya (ingat, secara default <div> adalah ukuran yang sama dengan elemen yang dikandungnya, jadi untuk membuatnya

Untuk pesan kesalahan, kami hanya bermain-main dengan ukuran dan gayanya. Perhatikan bahwa awalnya <script>4 disetel ke 0, artinya, tidak terlihat. Nilai ini akan diubah menggunakan JavaScript saat pengguna memasukkan kredensial yang tidak valid

Kami juga mengubah tampilan setengah dari teks di pesan kesalahan. Jika Anda melihat kembali elemen pesan di HTML, kami punya

<p id="login-error-msg">Invalid username <span id="error-msg-second-line">and/or password</span></p>

Perhatikan bahwa <script>_5 elemen yang membungkus setengah dari teks. <script>_5 cukup berguna ketika Anda ingin menata hanya sebagian teks dalam sebuah elemen. Karena kami ingin pesan kesalahan dibagi menjadi dua baris teks, "Nama pengguna tidak valid" dan "dan/atau kata sandi", kami membuat bagian kedua ditampilkan sebagai baris teks baru dengan menyetel tampilan <script>5 ke <script>8 ( <script>9

Sekarang kita hanya perlu melalui kumpulan aturan <head>_4, baris ketiga dari kisi <main>, untuk menyelesaikan CSS (baris 71 sampai akhir). Kita mulai dengan menggunakan tata letak kisi untuk terakhir kalinya untuk mengubah <head>4 menjadi kisi. Padahal, kami juga menggunakan properti kisi lain dalam kumpulan aturannya, <body>3. Karena <head>_4 adalah item kisi dari wadah kisi elemen <main>, kita dapat mengetahui bagaimana item kisi tersebut harus diposisikan di dalam barisnya sendiri. Jadi, kita beri tahu untuk disejajarkan secara vertikal ke bagian atas barisnya dengan <body>6. Tidak lebih, tidak kurang

Lalu kita memberi gaya pada bidang formulir. Karena kami ingin kedua bidang (nama pengguna dan kata sandi) terlihat sama, kami membuat satu set aturan yang memilih kelas yang diberikan untuk kedua elemen, <body>7. Alih-alih memilih setiap elemen dengan idnya hanya untuk mengulang CSS, kami menulis CSS sekali dalam satu kelas dan kemudian memberikan kelas itu ke kedua elemen

Untuk modifikasi gaya, itu adalah sedikit perubahan untuk membuat kedua elemen <head>5 ini terlihat lebih baik. Agar gaya teks placeholder tetap sejalan dengan gaya <head>5, kita juga mengubah warna placeholder tersebut dengan elemen semu <main>0. Namun, alih-alih menjadikannya umum dan menulis <main>1, kami menetapkan bahwa kami hanya ingin mengubah placeholder elemen yang memiliki kelas <main>2 seperti itu. <main>_3. Sekali lagi, coba buat pemilih CSS Anda sespesifik mungkin

Terakhir, kami mengubah gaya tombol login agar terlihat lebih baik. Tidak ada yang baru di sini, kecuali <main>_4 yang mengubah kursor menjadi penunjuk saat mengarahkan kursor ke tombol

Oke, kita telah menyelesaikan HTML dan baru saja menyelesaikan CSS. Sekarang kita berada di rumah dengan JavaScript

JavaScript

berkas JavaScript

Sebagai permulaan, kita mendapatkan semua elemen yang kita perlukan untuk bekerja menggunakan JavaScript. form login, tombol login dan pesan error login. Kami melakukannya dengan memanggil metode <main>_5, meneruskannya dengan id elemen yang kami cari. Juga, karena nilai dari ketiga variabel tersebut tidak akan berubah, yaitu variabel akan selalu mengacu pada elemen yang sama persis, maka kita mendeklarasikan ketiganya sebagai <main>6

Setelah itu kita membuat event listener untuk tombol login, dengan tipe <main>7. Dengan kata lain, setiap kali tombol login diklik, fungsi yang ditentukan setelah <main>8 akan dijalankan. Fungsi menerima parameter yang kita sebut <main>9, yang merupakan peristiwa mouse yang mewakili klik tombol (menamakannya <main>9 hanyalah semacam konvensi, sebut saja apa pun yang Anda suka)

Di dalam fungsi, kita mulai dengan mencegah perilaku default mengklik tombol login (yaitu mengirimkan data formulir). Dalam demonstrasi ini kami tidak ingin mengirimkan data, kami hanya ingin memvalidasinya menggunakan JavaScript, oleh karena itu <div>1 untuk mencegah pengiriman

Kemudian, kami mengambil input nilai oleh pengguna masing-masing di bidang formulir <div>2 dan <head>6. Kita dapat memanfaatkan sintaks JavaScript untuk memilih bidang formulir <div>4 sebagai <div>5, dengan <div>6 adalah HTML<head>4 dan<div>8 adalah nilai yang diberikan ke atribut <div>9 dari elemen <head>5 yang Anda cari. Untuk mendapatkan nilai bidang yang dipilih, cukup tambahkan <main>1. Misalnya, jika pengguna mengetik "user01" di bidang <div>2, maka kita akan mendapatkan nilai tersebut dengan <main>3. Cukup rapi, bukan?

Sekarang sentuhan akhir. Setiap kali pengguna mengklik tombol login, kami mengambil nilai apa pun yang telah diketik di bidang formulir. Tapi kita perlu melakukan sesuatu dengan kredensial itu. Kemudian, kami akan menulis blok if/else untuk mengeksekusi potongan kode jika kredensial login valid atau potongan lain jika tidak valid. Kita juga butuh syarat, kan? . Demi kesederhanaan, validasi itu akan memeriksa apakah nama pengguna yang diketik adalah "pengguna" dan kata sandinya adalah "web_dev". Dalam sintaks JavaScript, ini diterjemahkan menjadi

<main>_4

di mana <main>5 adalah operator AND yang menentukan bahwa kita memerlukan nama pengguna yang sama dengan "pengguna" dan kata sandi yang sama dengan "web_dev"

Jika kredensial benar-benar valid, maka kami menampilkan dialog peringatan dengan pesan bahwa pengguna telah masuk dengan sukses dan selanjutnya memuat ulang halaman (sekali lagi, hanya demi kesederhanaan). Namun jika nama pengguna atau kata sandi tidak valid, maka kami mengubah properti <script>4 dari pesan kesalahan login (<main>7) untuk membuatnya terlihat dan memberi tahu pengguna bahwa kredensial mereka tidak valid. Kita dapat mengubah CSS ini dalam JavaScript dengan mengakses <main>8 dari <main>7 (<div>0) dan kemudian properti <script>4 (<div>2) untuk mengaturnya ke nilai yang kita inginkan. Mengaturnya ke 1 berarti pesan kesalahan akan sepenuhnya buram

Dan… itu saja. Kami telah mencapai akhir dari penjelasan ini dan sekarang Anda memiliki halaman login yang berfungsi penuh yang dibuat dengan HTML, CSS, dan JavaScript. Saya pikir ini adalah ide bagus untuk tahap awal pembelajaran pengembangan web front-end karena dapat dengan mudah ditingkatkan dengan menambahkan animasi, mengubah desain halaman atau membuat sisi server validasi saat Anda mempelajari bahasa back-end . js, Java, PHP, dll

Saya harap artikel ini bermanfaat bagi Anda dan tentu saja beri tahu saya tanggapan Anda. )

Jika Anda ingin bermain-main dengan demo langsung, Anda dapat menemukannya di repl. di sini dan kode lengkap di GitHub di sini

Bagaimana cara membuat halaman login di HTML?

Bagaimana cara mendesain halaman login dalam HTML dan CSS?

Langkah 1. Menambahkan HTML Tambahkan gambar di dalam wadah dan tambahkan masukan dengan label yang cocok untuk setiap bidang. Bungkus elemen "bentuk" di sekelilingnya untuk memproses input. Langkah 2. Menambahkan CSS Tambahkan CSS yang diperlukan untuk mendesain halaman login cobalah untuk membuat desain sesederhana mungkin

Bagaimana cara membuat halaman login di HTML menggunakan notepad?

Bagaimana cara membuat formulir login di html? .
Buka Notepad atau Adobe Dreamweaver atau editor Html lainnya. Saya menggunakan Dreamweaver. .
Salin kode HTML lengkap di bawah ini dan tempel di editor Anda. <. .
Now apply the CSS to all Elements for better presentation. First create CSS