HTML Password ( <input type="password"> )


HTML Password क्या है?

HTML में पासवर्ड फील्ड बनाने के लिए हम <input type="password"> का उपयोग करते हैं। यह यूज़र द्वारा टाइप किए गए अक्षरों को डॉट/स्टार के रूप में छुपा देता है ताकि पासवर्ड स्क्रीन पर दिखाई न दे।

नोट: यह सिर्फ दिखावट (masking) है—सिक्योरिटी सर्वर-साइड (HTTPS, hashing) से आती है।


बेसिक सिंटैक्स

<input type="password" name="password">


सामान्यतः उपयोग होने वाले Attributes

Attributeकाम
nameफील्ड का नाम (फॉर्म सबमिट होने पर key)
idलेबल/JS से जोड़ने के लिए यूनिक पहचान
placeholderबॉक्स में हल्का सा गाइड टेक्स्ट
requiredफील्ड को अनिवार्य बनाता है
minlength / maxlengthअक्षरों की न्यूनतम/अधिकतम सीमा
patternRegex से कस्टम वैलिडेशन (जैसे 1 uppercase, 1 digit)
autocompleteब्राउज़र को संकेत: "current-password" या "new-password"
readonly / disabledपढ़ने-योग्य या निष्क्रिय
inputmodeसामान्यतः पासवर्ड में उपयोग नहीं (text input के लिए)
spellcheck="false"स्पेलचेक बंद—अच्छा अभ्यास


उदाहरण pattern: कम से कम 8 अक्षर, 1 uppercase, 1 digit, 1 special

<input type="password"
       pattern="(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&]).{8,}"
       title="कम से कम 8 अक्षर, 1 Capital Letter, 1 Number और 1 Special Character जरूरी।">


उदाहरण 1: Simple Password Form

<!DOCTYPE html>
<html lang="hi">
<head>
  <meta charset="UTF-8">
  <title>HTML Password Example</title>
</head>
<body>
  <form action="login.php" method="post" autocomplete="on">
    <label for="user">यूज़रनेम</label><br>
    <input type="text" id="user" name="username" required><br><br>

    <label for="pass">पासवर्ड</label><br>
    <input type="password" id="pass" name="password"
           autocomplete="current-password" required minlength="6" spellcheck="false"><br><br>

    <button type="submit">लॉगिन</button>
  </form>
</body>
</html>


उदाहरण 2: Show/Hide Password (टॉगल)

<label for="p1">पासवर्ड</label><br>
<input type="password" id="p1" name="password" required>
<button type="button" id="toggle">Show</button>

<script>
  const p = document.getElementById('p1');
  const btn = document.getElementById('toggle');
  btn.addEventListener('click', () => {
    const isPassword = p.type === 'password';
    p.type = isPassword ? 'text' : 'password';
    btn.textContent = isPassword ? 'Hide' : 'Show';
  });
</script>


उदाहरण 3: New Password + Confirm Password वैलिडेशन

<form action="register.php" method="post" autocomplete="off">
  <label for="np">नया पासवर्ड</label><br>
  <input type="password" id="np" name="new_password"
         autocomplete="new-password" required
         minlength="8"
         pattern="(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&]).{8,}"
         title="कम से कम 8 अक्षर, 1 Capital, 1 Number, 1 Special जरूरी"><br><br>

  <label for="cp">कन्फर्म पासवर्ड</label><br>
  <input type="password" id="cp" name="confirm_password" required><br><br>

  <span id="msg" style="font-size:14px;"></span><br><br>
  <button type="submit">रजिस्टर</button>
</form>

<script>
  const np = document.getElementById('np');
  const cp = document.getElementById('cp');
  const msg = document.getElementById('msg');

  function checkMatch() {
    if (!cp.value) { msg.textContent = ''; return; }
    if (np.value === cp.value) {
      msg.textContent = '✔ पासवर्ड मैच कर रहा है';
      msg.style.color = 'green';
    } else {
      msg.textContent = '✖ पासवर्ड मैच नहीं कर रहा';
      msg.style.color = 'red';
    }
  }
  np.addEventListener('input', checkMatch);
  cp.addEventListener('input', checkMatch);
</script>


बेसिक Password Strength Meter (सरल JS)

<input type="password" id="pwd" placeholder="पासवर्ड दर्ज करें" required>
<div id="meter" style="height:8px;background:#ddd;margin-top:6px;"></div>
<small id="hint"></small>

<script>
  const pwd = document.getElementById('pwd');
  const meter = document.getElementById('meter');
  const hint = document.getElementById('hint');

  function score(s) {
    let n = 0;
    if (s.length >= 8) n++;
    if (/[A-Z]/.test(s)) n++;
    if (/\d/.test(s)) n++;
    if (/[@$!%*?&#^()_\-+={}[\]|\\:;'",.<>/~`]/.test(s)) n++;
    return n; // 0..4
  }

  pwd.addEventListener('input', () => {
    const s = score(pwd.value);
    const pct = (s / 4) * 100;
    meter.style.width = pct + '%';
    meter.style.background = ['#ddd', '#f66', '#fa0', '#cc3', '#2a2'][s];
    hint.textContent = ['खाली', 'कमज़ोर', 'ठीक-ठाक', 'अच्छा', 'मजबूत'][s];
  });
</script>


Accessibility व UX Best Practices

  • हमेशा <label for="..."> दें ताकि स्क्रीन-रीडर friendly रहे।

  • त्रुटि संदेश स्पष्ट रखें और title/aria-describedby से गाइड करें।

  • मोबाइल पर ऑटो-कैपिटलाइज़/स्पेल-चेक से बचें: spellcheck="false"।

  • Show/Hide टॉगल दें, पर default mask ही रखें।


Security Best Practices (बहुत ज़रूरी)

  • HTTPS इस्तेमाल करें (TLS)।

  • पासवर्ड कभी plain text में न रखें; सर्वर-साइड पर strong hashing (bcrypt/argon2 + salt) करें।

  • न्यूनतम आवश्यकताएँ लागू करें: minlength, pattern, और रेट-लिमिटिंग/ब्रूट-फोर्स प्रोटेक्शन।

  • autocomplete="new-password" रजिस्ट्रेशन/रीसेट फॉर्म में, और autocomplete="current-password" लॉगिन में दें।

  • पासवर्ड policies को यूज़र को पहले से बता दें (UI hints)।


आम गलतियाँ

  • केवल फ्रंट-एंड pattern पर निर्भर रहना (सर्वर-साइड वैलिडेशन ज़रूरी)।

  • पासवर्ड को LocalStorage/Log में लिख देना।

  • ईमेल से plain password भेजना (मत करें)।

  • placeholder को label की तरह उपयोग करना (label अलग दें)।