javascript html5 css3 overlay halaman pendaftaran halaman login beautiful-ui bootsrtap4 efek overlay bootstrap-login-signup
- Diperbarui 10 Mei 2020
- CSS
dinkicha / halaman-login-2022
Bintang 4
- Kode
- Masalah
- Tarik permintaan
halaman login javascript html5 css3
- Diperbarui16 Des 2022
- CSS
Alibehzad79 / Login_Register_Page
Bintang 4
- Kode
- Masalah
- Tarik permintaan
login html-css login-form halaman login
- Diperbarui17 Juli 2022
- CSS
enes9103 / 030_Sign_In-Sign_Up_Design
Sponsor
Bintang 4
- Kode
- Masalah
- Tarik permintaan
javascript design ui-design html5 css3 flexbox-css designer responsive-design login-page
- Diperbarui 8 Mei 2022
- CSS
sagargoswami2001 / Halaman Pendaftaran dan Login
Bintang 4
- Kode
- Masalah
- Tarik permintaan
Halaman Daftar & Masuk Menggunakan HTML & CSS
css html html-css signup-halaman login-halaman htmlcss-project signuplogin
- Diperbarui 5 Oktober 2022
- CSS
GNiruthian / Halaman-Login-menggunakan-html-css
Bintang 3
- Kode
- Masalah
- Tarik permintaan
Menggunakan html, css, js
javascript css html sistem masuk html-css-js halaman masuk halaman masuk halaman-menggunakan-html-css
- Diperbarui 23 November 2021
- CSS
sagargoswami2001 / Login-Formulir-Validasi
Bintang 3
- Kode
- Masalah
- Tarik permintaan
Validasi Form Login Menggunakan HTML CSS & JavaScript
javascript css html formulir masuk html-css-javascript desain situs web desain situs web templat halaman masuk pengembangan situs web
- Diperbarui16 Oktober 2022
- CSS
ImDebabrata / facebook
Bintang 2
- Kode
- Masalah
- Tarik permintaan
Salinan halaman Login Facebook hanya menggunakan HTML dan css
css html frontend solo halaman login individu proyek individu
- Diperbarui 12 Maret 2022
- CSS
MYousufSoomro / Login_With_Facebook_And_Google
Bintang 2
- Kode
- Masalah
- Tarik permintaan
Masuk Dengan Facebook dan Google melalui Firebase
firebase google facebook firebase-authentication login-page saylani
- Diperbarui 28 Januari 2019
- CSS
devandresilva / layar masuk
Bintang 2
- Kode
- Masalah
- Tarik permintaan
Repositori dibuat dengan intuisi perangkat keras atau gaya HTML5 dan CSS3 selain untuk login sederhana
halaman login html5 css3 front-end
- Diperbarui 4 Sep 2022
- CSS
AliAlmasi / form login
Bintang 2
- Kode
- Masalah
- Tarik permintaan
formulir login sederhana
css html template dari halaman login
- Diperbarui22 Agustus 2022
- CSS
Coder2Mo / formulir masuk
Bintang 2
- Kode
- Masalah
- Tarik permintaan
Formulir Masuk Sederhana yang dibuat dengan Html & Css & Js. )
github javascript css html penandatanganan halaman login login halaman login akun halaman login halaman login
Formulir login adalah elemen antarmuka pengguna yang memungkinkan pengguna memasukkan kredensial mereka (seperti nama pengguna dan kata sandi) untuk mengotentikasi diri mereka sendiri dan mengakses sistem atau aplikasi. Formulir login biasanya digunakan di situs web dan aplikasi untuk melindungi konten atau fitur yang dibatasi
Dalam pengembangan web, formulir login biasanya dirancang menggunakan HTML dan CSS, dan mungkin juga menyertakan JavaScript untuk fungsi tambahan seperti validasi formulir dan integrasi dengan sistem backend untuk autentikasi
Formulir login biasanya terdiri dari elemen formulir yang berisi satu atau beberapa kolom input bagi pengguna untuk memasukkan kredensialnya, dan tombol kirim yang dapat diklik pengguna untuk mengirimkan kredensialnya ke server untuk verifikasi. Formulir juga dapat menyertakan elemen tambahan seperti kotak centang, daftar dropdown, dan tombol untuk pemulihan kata sandi atau opsi masuk media sosial. Silakan unduh kode sumber utama formulir Login.
Desain formulir login penting karena memengaruhi pengalaman pengguna dan dapat memengaruhi keputusan pengguna untuk mendaftar atau menggunakan aplikasi atau sistem. Formulir login yang dirancang dengan baik harus mudah digunakan, menarik secara visual, dan dapat diakses oleh pengguna penyandang disabilitas. Ingat sebelum form login anda perlu merancang form pendaftaran juga.
Berikut adalah contoh bagaimana Anda bisa mendesain formulir login menggunakan HTML dan CSS
< !DOCTYPE html> < html> < head> < style> /* Style the form elements */ form { width: 300px; margin: 0 auto; text-align: center; } input[type="text"], input[type="password"] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; } button[type="submit"] { width: 100%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } button[type="submit"]:hover { background-color: #45a049; } /* Style the error message */ .error { color: red; } < /style> < /head> < body> < !-- Create the form --> < form method="post" action="login.php"> < label for="username">Username:< br> < input type="text" id="username" name="username">< br> < label for="password">Password:< br> < input type="password" id="password" name="password">< br>< br> < button type="submit">Login < /form> < /body> < /html>Silakan unduh kode sumber utama formulir Login.
Kode ini membuat formulir login sederhana dengan dua bidang teks untuk nama pengguna dan kata sandi, dan tombol kirim. Elemen formulir diberi gaya menggunakan CSS, dan formulir dipusatkan pada halaman menggunakan margin. 0 properti otomatis
Elemen formulir memiliki atribut metode yang menentukan metode HTTP (dalam hal ini, "post") yang digunakan untuk mengirimkan data formulir ke server, dan atribut tindakan yang menentukan URL skrip sisi server yang akan memproses formulir
Elemen label digunakan untuk memberikan nama deskriptif bidang formulir, dan atribut elemen label ditautkan ke atribut id dari bidang formulir yang sesuai menggunakan nilai yang sama. Ini memungkinkan pengguna mengklik label untuk fokus pada bidang formulir
Elemen masukan digunakan untuk membuat bidang formulir, dan atribut type menentukan jenis bidang (dalam hal ini, "teks" untuk nama pengguna dan "kata sandi" untuk kata sandi). Atribut nama menentukan nama bidang, yang digunakan untuk mengidentifikasi data formulir saat dikirimkan ke server
Elemen tombol digunakan untuk membuat tombol kirim, dan atribut type menentukan jenis tombol (dalam hal ini, "kirim"). Atribut nilai menentukan teks yang akan ditampilkan pada tombol
Praktik terbaik untuk desain formulir masuk
Berikut adalah beberapa praktik terbaik untuk mendesain formulir login
Tetap sederhana. Gunakan desain minimal dan hanya sertakan bidang formulir dan tombol yang diperlukan
Gunakan label yang jelas dan deskriptif. Gunakan label yang jelas dan deskriptif untuk bidang formulir guna membantu pengguna memahami informasi apa yang diperlukan
Gunakan hierarki visual. Gunakan elemen desain seperti ukuran, warna, dan spasi untuk membuat hierarki visual dan menarik perhatian pengguna ke elemen yang paling penting
Jadikan mobile-friendly. Pastikan formulir login responsif dan berfungsi dengan baik di perangkat seluler
Gunakan pesan kesalahan yang sesuai. Gunakan pesan kesalahan yang jelas dan bermanfaat untuk memberi tahu pengguna jika upaya login mereka tidak berhasil dan berikan panduan tentang cara memperbaiki masalah apa pun
Gunakan warna yang sesuai. Gunakan warna yang sesuai dengan merek dan nyaman di mata. Hindari penggunaan warna yang terlalu terang atau sulit dibaca
Gunakan ukuran font yang sesuai. Gunakan ukuran font yang mudah dibaca dan sesuai konteks. Hindari penggunaan ukuran font yang terlalu kecil atau terlalu besar
Gunakan gaya font yang sesuai. Gunakan gaya font yang mudah dibaca dan sesuai dengan konteksnya. Hindari menggunakan font mewah atau dekoratif yang sulit dibaca
Dengan mengikuti praktik terbaik ini, Anda dapat membuat formulir masuk yang mudah digunakan, menarik secara visual, dan dapat diakses oleh pengguna penyandang disabilitas
Pelajari cara memastikan keamanan dalam formulir login
Berikut adalah beberapa fitur umum yang mungkin disertakan dalam formulir login
1. Bidang teks bagi pengguna untuk memasukkan nama pengguna dan kata sandi mereka
2. Tombol kirim untuk mengirim permintaan login ke server
3. Tautan "lupa kata sandi" atau "setel ulang kata sandi" untuk memungkinkan pengguna mengatur ulang kata sandi mereka jika mereka lupa
4. Kotak centang untuk memungkinkan pengguna tetap masuk atau menyimpan kredensial masuk mereka
5. Tautan "buat akun" atau "daftar" untuk memungkinkan pengguna baru membuat akun
6. Tautan ke login menggunakan akun media sosial (seperti Facebook atau Google)
7. Bidang CAPTCHA untuk memverifikasi bahwa pengguna adalah manusia dan bukan bot yang mencoba mengotomatiskan proses login
8. Pesan error untuk memberi tahu pengguna jika upaya login mereka tidak berhasil dan memberikan panduan tentang cara memperbaiki masalah apa pun
9. Fungsi "ingat saya" untuk mengingat kredensial login pengguna di perangkat mereka
Silakan unduh kode sumber utama formulir Login. Anda juga dapat mengunduh formulir pendaftaran .
Ini hanyalah beberapa contoh fitur yang mungkin disertakan dalam formulir login. Fitur khusus akan bergantung pada persyaratan dan tujuan aplikasi atau sistem