الحقل hidden
عناصر <input> ذات النوع hidden تسمح لمطوري الويب بتضمين البيانات التي لا يمكن رؤيتها أو تعديلها من المستخدمين عند إرسال النموذج، فمثلًا يمكن تخزين مُعرِّف المحتوى الذي يتم طلبه حاليًا أو تعديله أو غير ذلك.
الحقول المخفية لن تُعرَض في الصفحة ولا توجد أيّ طريقة (في HTML) لفعل ذلك.
<input type="hidden" id="hidden_prop" name="hidden_prop" value="قيمة ما">
إذا جرَّبتَ الشيفرة السابقة لكنك لم تجد أيّ نتيجة فهذا طبيعي، فتذكر أنَّ الحقول المخفية لن تظهر لزائر الصفحة.
الخاصية value
تحتوي الخاصية value في الحقل file على سلسلة نصية (DOMString) التي تُمثِّل البيانات التي تريد تضمينها عند إرسال النموذج إلى الخادوم، وتلك البيانات لا تُرى من المستخدم ولا يستطيع تعديلها.
تحذير: صحيحٌ أنَّ هذه القيمة لا تُعرَض في الصفحة، لكنها ستعرض -ويمكن تعديلها- عبر أدوات المطوِّر في المتصفح أو عبر عرض مصدر الصفحة. أي لا تعتمد على الحقول المخفية في أي شكل من أشكال الحماية.
استخدام الحقول المخفية
كما ذكرنا أعلاه، يمكن أن تستعمل الحقول المخفية في أي مكان تريد أن فيه تضمين بيانات لا يمكن أن يراها أو يعدلها المستخدم لكنها ستُرسَل مع النموذج إلى الخادوم.
لننظر إلى أحد استخدامات الحقول المخفية.
تتبع المحتوى المُعدَّل
أحد أشهر استخدامات الحقول المخفية هو تتبع ما هي سجلات قاعدة البيانات التي يجب تحديثها عندما يُرسَل النموذج، المخطط العام لهذا الاستخدام كالآتي:
- يُقرِّر المستخدم تعديل بعض المحتوى المسموح تعديله، مثل تدوينة، أو صفحة ويكي، وذلك بالضغط على زر التعديل الملائم.
- يؤخذ المحتوى من قاعدة البيانات ويُعرَض في نموذج ما للسماح للمستخدم بإجراء تعديلات.
- بعد التعديل، فسيُرسِل المستخدم النموذج، وستُحفَظ البيانات المُرسَلة في قاعدة البيانات.
الفكرة هنا تكمن في الخطوة الثانية، فسيُخزَّن مُعرِّف ID للعنصر الذي يُعدَّل في حقل مخفي، وعندما يرسل المستخدم النموذج في الخطوة الثالثة فسيُرسَل المُعرِّف تلقائيًا إلى الخادوم، وهذا المُعرِّف سيسمح للخادوم بمعرفة ما هي السجلات التي يجب تعديلها بما يتوافق مع محتويات النموذج.
أمثلة
سننشِئ في هذا المثال نسخةً بسيطةً من النموذج الذي شرحناه في القسم السابق، وسنستخدم الحقل المخفي لحفظ مُعرِّف ID للعنصر الذي سنُعدِّله.
<form>
<div>
<label for="title">عنوان المنشور:</label>
<input type="text" id="title" name="title" value="تجربة الحقل المخفي">
</div>
<div>
<label for="content">محتوى المنشور:</label>
<textarea id="content" name="content" cols="60" rows="5">هذا هو نص المنشور.</textarea>
</div>
<div>
<button type="submit">تحديث المنشور</button>
</div>
<input type="hidden" id="postId" name="postId" value="34657">
</form>
سيضبط الخادوم قيمة الحقل المخفي بمُعرِّف المنشور في قاعدة البيانات قبل إرسال النموذج إلى متصفح المستخدم، وسيستخدم تلك المعلومات عند إرسال المستخدم للنموذج إلى الخادوم لكي يعرف ما هو السجل الذي عليه تعديله، ولا حاجة لاستخدام JavaScript لإتمام هذا العمل.
عند إرسال النموذج فستبدو البيانات كما يلي:
title=تجربة+الحقل+المخفي&content=هذا+هو+نص+المنشور.&postId=34657
وحتى لو كان الحقل مخفيًا، فهذا لا يمنع إرسال البيانات إلى الخادوم.
دعم المتصفحات
| Chrome | Firefox | Edge | Safari | Opera |
|---|---|---|---|---|
| مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |