পাসওয়ার্ড ইনপুট ফিল্ডে শো এবং হাইড অপশন যুক্ত করতে হয় কিভাবে

অলমোস্ট সকল ওয়েবসাইট কিংবা অ্যাপ এর লগইন ফরমেই একটি ইমেইল বা ইউজারনেম ফিল্ড এবং একটি পাসওয়ার্ড ফিল্ড থাকে। ডিফল্ট ভাবে সকল সাইটের পাসওয়ার্ড ফিল্ড বুলেট ডট ফরম্যাটে দেখানো হয়। এছাড়া ফেসবুক, টুইটার, ইনস্টাগ্রাম সহ সকল সোশ্যাল মিডিয়া সাইটের লগইন ফরমের পাসওয়ার্ড ফিল্ড এর পাশে একটি পাসওয়ার্ড শো করার বাটন দেখতে পাওয়া যায় যেটাতে ক্লিক করলে পাসওয়ার্ড বুলেট ডট ফরম্যাটে দেখানোর পরিবর্তে পিওর টেক্সট ফরম্যাটে দেখানো হয়। বেশিরভাগ সাইটের লগইন ফর্মে এরকম অপশন দেখার পর আপনিও হয়তো আপনার প্রজেক্ট এর লগইন ফরমে পাসওয়ার্ড শো এবং হাইড করার অপশন যুক্ত করতে চাচ্ছেন। তো বন্ধুরা আজকের পোস্ট থেকে আমরা শিখব কিভাবে লগইন ফরমে পাসওয়ার্ড শো/হাইড করার বাটন যুক্ত করতে হয়। তাহলে চলুন আর কথা না বাড়িয়ে জাম্প করা যাক মূল টপিকে।

আমরা সকলেই জানি একটি পাসওয়ার্ড ইনপুট ফিল্ড এর টাইপ এট্রিবিউট এর ভ্যালু পাসওয়ার্ড (type="password") দেওয়া হয়। এবং টেক্সট ইনপুট ফিল্ডের টাইপ এট্রিবিউট এর ভ্যালু টেক্সট (type="text") দেওয়া হয়। তো আপনি হয়তো অনুমান করতে পারছেন পাসওয়ার্ড শো করার বাটনটিতে কিভাবে কাজ করবে। মূলত আমরা পাসওয়ার্ড শো করার বাটনটির অন ক্লিক ইভেন্টে একটি ফাংশন রান করবো যে ফাংশনটি পাসওয়ার্ড ফিল্ড এর টাইপ এট্রিবিউট এর ভ্যালু পরিবর্তন করে টেক্সট করে দেবে এবং পরবর্তীতে আবার ক্লিক করলে পাসওয়ার্ড করে দেবে। এভাবে বাটনটিতে একবার ক্লিক করলে পাসওয়ার্ড শো হবে এবং আবার ক্লিক করলে হাইড হবে।

HTML

তো প্রথমে লগইন ফরমের এইচটিএমএল গুলো দেখে নেওয়া যাক। মূলত এই লগইন ফরমের এইচটিএমএল বাকি সব লগইন ফরমের মতই। শুধু এখানে পাসওয়ার্ড ফিল্ড এর পরে একটি এক্সট্রা বাটন দেওয়া হয়েছে যেটার অন ক্লিক ইভেন্টে একটি ফাংশন দেওয়া হয়েছে।

<div class="wrapper">
    <div class="form">
        <h2>Login</h2>
        <form action="#">
            <span class="label">Username</span>
            <div class="username">
                <input type="text" name="username" id="username" value=""/>
            </div>
            <span class="label">Password</span>
            <div class="password">
                <input type="password" name="password" id="password" value="" />
                <span id="show_btn" onclick="showPass()">show</span>
            </div>
            <div class="submit">
                <button type="submit">Login</button>
            </div>
        </form>
    </div>
</div>

CSS

একটি লগইন ফরম ডিজাইন করার জন্য প্রয়োজনীয় সিএসএস নিচে দেওয়া হলো।এই সিএসএস কোডগুলো লগইন ফরমটিকে একটি সিম সিম্পল কিন্তু সুন্দর লুক দেবে।

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to bottom right, seagreen, teal);
    color: white;
}
.wrapper .form {
    width: 320px;
    background: rgba(255,255,255,0.1);
    padding: 30px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    color: white
}
.form h2 {
    font-size: 18px;
    text-align: center;
    line-height: 20px;
    margin-bottom: 20px;
}
.form .label {
    color: #ddd;
    font-weight: bold;
    line-height: 25px;
    display: block
}
.form .username,
.form .password {
    display: flex;
    border-bottom: 1.5px solid #ddd;
    margin-bottom: 20px;
}
.form input {
    background: none;
    color: inherit;
    border: none;
    outline: none;
    display: block;
    flex-grow: 1;
    line-height: 35px;
    font-weight: bold;
    letter-spacing: 0.1ch
}
.form .password span {
    background: none;
    border: none;
    outline: none;
    font-weight: bold;
    margin-left: 20px;
    line-height: 35px
}
.form .submit button {
    display: block;
    width: 100%;
    height: 40px;
    background: none;
    border: 1.5px solid white;
    outline: none;
    color: inherit;
    font-weight: bold;
    border-radius: 40px;
    transition: all 0.1s;
}
.form .submit button:hover {
    background: white;
    color: seagreen;
}

JavaScript

পাসওয়ার্ড শো এবং হাইড করার মূল কারসাজি জাভাস্ক্রিপ্ট এর। নিচে পাসওয়ার্ড শো এবং হাইড করার ফাংশন এর জাভাস্ক্রিপ্ট কোড দেওয়া হলো।

const pass_field = document.querySelector("#password");//Select Password Field
const show_btn = document.querySelector("#show_btn");//Select Password Show Btn

function showPass() {
    if(pass_field.type === "password") {
        pass_field.type = "text";
        show_btn.innerHTML = "hide";
    } else {
        pass_field.type = "password";
        show_btn.innerHTML = "show";
    }
}

Download Project

তো পোস্ট মূলত শেষ। আপনি যদি পুরো প্রজেক্ট এর সকল কোড ডাউনলোড করে রাখতে চান তাহলে নিচে প্রজেক্ট এর গুগল ড্রাইভ লিঙ্ক দিলাম সেখান থেকে ডাউনলোড করতে পারবেন, ধন্যবাদ সবাইকে।

Download Project