الحقل `password`

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

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

الخاصية `value`

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

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

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

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

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

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

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

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

<label for="password">كلمة المرور:</label>
<input type="password" id="password">

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

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

`on`

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

`off`

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

`current-password`

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

`new-password`

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

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

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

<label for="password">كلمة المرور:</label>
<input type="password" id="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">كلمة المرور</label>
<input id="userPassword" type="password" size="12">
<button id="selectAll">تحديد الكل</button>

شيفرة JavaScript:

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

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

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

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

<form>
  <label for="hexId">المعرّف الست عشري:</label>
  <input id="hexId" type="password" pattern="[0-9a-fA-F]{4,8}"
    title="أدخل معرفًا يستعمل نظام العد الست عشري ويتألف من 4-8 أرقام">
  <input type="submit" value="أرسل">
</form>

`disabled`

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

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

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

الخاصية value