HTML/input/password

عناصر <input> ذات النوع password تسمح للمستخدم بإدخال كلمة مرور بأمان، فهذا الحقل يبدو كحقل الإدخال النصي لكن النص الموجود داخله مشوش ولا يمكن قراءته، ويتم ذلك باستبدال كل محرف برمز آخر مثل رمز النجمة * أو النقطة • وسيختلف المحرف المستخدم بين المتصفحات وأنظمة التشغيل.

تفاصيل طريقة الإدخال تختلف من متصفح إلى متصفح، ففي الأجهزة المحمولة سيُعرَض عادةً الحرف المكتوب لبرهة من الزمن قبل تشويشه، مما يسمح للمستخدم أن يتأكد أنَّه ضغط على الزر الصحيح، وهذا مفيدٌ إذا وضعنا بالحسبان الحجم الصغير لأزرار لوحة المفاتيح وسهولة كتابة حرف فيها بدلًا من حرف.

الخاصية value

تحتوي الخاصية value في الحقل password على سلسلة نصية (DOMString) التي تُمثِّل محتويات الحقل النصي الذي يستخدم لإدخال كلمة المرور. وإذا لم يُدخِل المستخدم شيئًا فيه بعد فستكون قيمة هذه الخاصية فارغة.

إذا ضُبِطَت الخاصية required فيجب أن يحتوي هذا الحقل على قيمةٍ ما لكي يكون صالحًا.

إذا حُدِّدَت الخاصية pattern فيجب أن تُطابِق محتويات الحقل password النمط المُحدَّد، راجع قسم «التحقق من الحقل» لمزيدٍ من المعلومات.

لاحظ أنَّ محارف السطر الجديد (line feed) والعودة إلى بداية السطر (carriage return) لا يفترض أن تتواجد في الحقل password، وستُحذَف إن وجدت تلقائيًا.

استخدام حقل كلمة المرور

تعمل حقول كلمة المرور كغيرها من الحقول النصية، لكن الفرق الرئيسي هو أنَّ محتواها مشوش لمنع الأشخاص الموجودين بجوار المستخدم من قراءة كلمة المرور.

حقل إدخال كلمة مرور بسيط

هذا أبسط شكل لاستخدام حقل كلمة المرور، مع إضافة لافتة له باستخدام العنصر <label>:

<label for="userPassword">Password:</label>
<input id="userPassword" type="password">

السماح بالإكمال التلقائي

للسماح لمدير كلمات مرور المستخدم بإدخال كلمة المرور تلقائيًا، فحدِّد الخاصية autocomplete، والتي تأخذ إحدى القيم الآتية في حقول password:

on

السماح للمتصفح أو لمدير كلمات المرور بإكمال كلمة المرور تلقائيًا. هذه القيمة لا تعطي المتصفحات معلومات دقيقة كما في القيمتين current-password و new-password.

off

عدم السماح للمتصفح أو لمدير كلمات المرور بإكمال حقل كلمة المرور تلقائيًا.

current-password

السماح للمتصفح أو مدير كلمات المرور بإدخال كلمة المرور الحالية للموقع، وهذه القيمة توفِّر معلومات أكثر من القيمة on لأنها تُعلِم المتصفح أو مدير كلمات المرور أن تستعمل كلمة المرور الحالية لهذا الموقع بدلًا من إنشاء كلمة مرور جديدة.

new-password

السماح للمتصفح أو مدير كلمات المرور بإدخال كلمة مرور جديدة لهذا الموقع، ويمكن أن تولّد هذه الكلمة اعتمادًا على الخاصيات الأخرى لهذا الحقل، أو ربما يوفِّر المتصفح آليةً لتوليد كلمة مرور جديد.

جعل كلمة المرور إجباريةً

لإخبار المتصفح أنَّ حقل كلمة المرور إجباري ويجب ملؤه قبل إرسال النموذج، فيمكن تحديد الخاصية المنطقية required:

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" required>

تحديد نمط الإدخال

إذا كان من الأفضل استخدام نمط إدخال مختلف عن نمط الإدخال الافتراضي، فاستخدم الخاصية inputmode لتحديده، أكثر استخدام لهذه الخاصية يكون عندما يطلب النموذج إدخال قيمة رقمية ككلمة مرور (مثل رمز PIN).

الهواتف المحمولة التي لها لوحة مفاتيح وهمية قد تعرض لوحة مفاتيح رقمية بدلًا من لوحة المفاتيح الكاملة، مما يُسهِّل من إدخال الرمز:

<label for="pin">PIN:</label>
<input id="pin" type="password" inputmode="numeric">

ضبط الحدود القصوى لقيم الحقل password

وكالمعتاد، يمكننا استخدام الخاصيتين minlength و maxlength لتحديد ما هي القيم الدنيا والقصوى التي يقبلها حقل كلمة المرور. فسنستطيع الزيادة على المثال السابق بتحديد أنَّ رمز PIN يجب أن يكون 4 محارف على الأقل ولا يزيد عن 8، وسنستخدم الخاصية size لكي نعرض حقل password بعرض 8 محارف:

<label for="pin">PIN:</label>
<input id="pin" type="password" inputmode="numeric" minlength="4"
       maxlength="8" size="8">

تحديد المحتوى النصي الموجود في الحقل

وكما في بقية الحقول النصية، يمكننا استخدام الدالة select()‎ لتحديد جميع النص الموجود في حقل كلمة المرور.

شيفرة HTML:

<label for="userPassword">Password</label>
<input id="userPassword" type="password" size="12">
<button id="selectAll">Select All</button>

شيفرة JavaScript:

document.getElementById("selectAll").onclick = function(event) {
  document.getElementById("userPassword").select();
}

التحقق من الحقل

إذا كانت هنالك شروط خاصة يجب أن يحققها محتوى هذا الحقل، فيمكنك استخدام الخاصية pattern مع تعبير نمطي للتحقق تلقائيًا أنَّ كلمة المرور التي أدخلها المستخدم تحقق تلك الشروط.

ففي هذا المثال، لا يُسمَح إلا للقيم التي تحتوي على أربعة محارف في النظام الست عشري على الأقل لكن لا تزيد عن 8 محارف ست عشرية:

<label for="hexId">Hex ID:</label>
<input id="hexId" type="password" pattern="[0-9a-fA-F]{4,8}"
       title="Enter an ID consisting of 4-8 hexadecimal digits">

disabled

هذه الخاصية المنطقية تُشير إلى أنَّ حقل كلمة المرور غير متاح للتعديل، أضف إلى ذلك أنَّ الحقول المُعطّلة (أي التي ضُبِطَت هذه الخاصية عليها) لا تُرسَل مع النموذج.

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم