Jinsi ya Kutengeneza Show Password kwenye Login Form kwa kutumia PHP, Bootstrap na JavaScript
Jifunze hatua kwa hatua namna ya kuongeza show/hide password feature kwenye login form yako kwa kutumia PHP, Bootstrap 5 na JavaScript. Mwongozo huu unafaa kwa beginners na professionals wanaotengeneza mifumo ya shule, biashara, accounting systems na websites nyingine za kisasa.
Website: https://faulink.com
Jinsi ya Kutengeneza Show Password kwenye Login Form kwa kutumia PHP, Bootstrap na JavaScript
Katika mifumo mingi ya kisasa, users hupenda kuona password wanayoandika ili kuepuka typing mistakes. Hii ndiyo sababu websites nyingi huweka feature ya:
Show Password
Hide Password
Eye Icon Toggle
Mfano:
👁 Show password
🙈 Hide password
Feature hii huongeza:
User experience
Professional design
Speed ya login
Accuracy ya password
Katika tutorial hii tutajifunza:
✅ Kutengeneza login form nzuri
✅ Kuongeza eye icon
✅ Kutumia JavaScript toggle
✅ Kutumia Bootstrap 5
✅ Kufanya mfumo uwe mobile responsive
✅ Kutengeneza professional UI
Hatua ya Kwanza: Tengeneza Login Form
Anza kwa kutengeneza HTML form.
<div class="mb-3">
<label class="form-label fw-semibold">
Password
</label>
<div class="input-group">
<input
type="password"
name="password"
id="passwordInput"
class="form-control"
placeholder="Ingiza password"
required>
<button
type="button"
class="btn btn-outline-secondary"
onclick="togglePassword()">
<i class="bi bi-eye" id="eyeIcon"></i>
</button>
</div>
</div>
Kuelewa Code Hii
1. type="password"
<input type="password">
Hii inafanya password ifichwe kwa dots au stars.
Mfano:
********
2. id="passwordInput"
id="passwordInput"
Hii hutumika ku-control input kupitia JavaScript.
3. Eye Button
<button type="button">
Button hii haitasubmit form. Kazi yake ni kuonyesha au kuficha password.
4. Bootstrap Eye Icon
<i class="bi bi-eye"></i>
Hii huonyesha eye icon.
Hatua ya Pili: Ongeza JavaScript
Sasa ongeza JavaScript hii chini ya page kabla ya:
</body>
<script>
function togglePassword() {
const input = document.getElementById('passwordInput');
const icon = document.getElementById('eyeIcon');
if (input.type === 'password') {
input.type = 'text';
icon.className = 'bi bi-eye-slash';
} else {
input.type = 'password';
icon.className = 'bi bi-eye';
}
}
</script>
JavaScript Hii Inafanya Nini?
Password ikiwa imefichwa
input.type === 'password'
Itabadilika kuwa:
input.type = 'text'
Password itaonekana wazi.
Password ikiwa inaonekana
Itarudi kuwa:
input.type = 'password'
Password itafichwa tena.
Mfano wa Matokeo
Kabla ya kubonyeza eye icon
********
Baada ya kubonyeza
mypassword123
Hatua ya Tatu: Ongeza Bootstrap Icons
Watu wengi husahau hii.
Weka line hii ndani ya <head>:
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
Hatua ya Nne: Professional Design
Unaweza kufanya input ionekane professional zaidi.
.form-control{
border-radius:16px;
padding:14px;
}
.btn{
border-radius:16px;
}
Full Example
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body class="p-5">
<div class="container" style="max-width:500px;">
<div class="card p-4 shadow">
<h3 class="mb-4">
Login Form
</h3>
<div class="mb-3">
<label>Password</label>
<div class="input-group">
<input
type="password"
id="passwordInput"
class="form-control">
<button
type="button"
class="btn btn-outline-secondary"
onclick="togglePassword()">
<i class="bi bi-eye" id="eyeIcon"></i>
</button>
</div>
</div>
</div>
</div>
<script>
function togglePassword() {
const input = document.getElementById('passwordInput');
const icon = document.getElementById('eyeIcon');
if (input.type === 'password') {
input.type = 'text';
icon.className = 'bi bi-eye-slash';
} else {
input.type = 'password';
icon.className = 'bi bi-eye';
}
}
</script>
</body>
</html>
Faida za Show Password
1. Better User Experience
Users wanaweza kuona wanachoandika.
2. Kupunguza Login Errors
Hakutakuwa na:
wrong password
typo mistakes
caps lock issues
3. Professional UI
System inaonekana modern na trusted.
Common Mistakes
1. Kusahaulika kuongeza Bootstrap Icons
Eye icon haitatokea.
2. Kuweka JavaScript sehemu mbaya
Script ikiwekwa baada ya:
exit;
haitafanya kazi.
3. Kutokuweka ID
JavaScript haitapata input field.
Security Note
Show password:
haihack password
haiondoi security
ni frontend feature tu
Lakini:
usi-save password plain text
tumia password_hash()
tumia password_verify()
Mfano:
$password = password_hash("123456", PASSWORD_DEFAULT);
Conclusion
Show password ni feature muhimu sana kwenye systems za kisasa.
Kwa kutumia:
Bootstrap
JavaScript
PHP
unaweza kutengeneza login form nzuri, professional na rahisi kutumia.
Kwa tutorials zaidi za:
PHP
MySQL
Bootstrap
School Systems
Accounting Systems
Farm Management Systems
tembelea:
https://faulink.com
🚀 Unahitaji mfumo au website ya biashara?
Chagua huduma hapa chini kisha mteja bofya moja kwa moja kwenda kwenye ukurasa wa huduma au kuwasiliana nasi kwa WhatsApp.