الحقل hidden

عناصر <input> ذات النوع hidden تسمح لمطوري الويب بتضمين البيانات التي لا يمكن رؤيتها أو تعديلها من المستخدمين عند إرسال النموذج، فمثلًا يمكن تخزين مُعرِّف المحتوى الذي يتم طلبه حاليًا أو تعديله أو غير ذلك.

الحقول المخفية لن تُعرَض في الصفحة ولا توجد أيّ طريقة (في HTML) لفعل ذلك.

<input id="prodId" name="prodId" type="hidden" value="xm234jq">

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

الخاصية value

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

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

استخدام الحقول المخفية

كما ذكرنا أعلاه، يمكن أن تستعمل الحقول المخفية في أي مكان تريد أن فيه تضمين بيانات لا يمكن أن يراها أو يعدلها المستخدم لكنها ستُرسَل مع النموذج إلى الخادوم.

لننظر إلى أحد استخدامات الحقول المخفية.

تتبع المحتوى المُعدَّل

أحد أشهر استخدامات الحقول المخفية هو تتبع ما هي سجلات قاعدة البيانات التي يجب تحديثها عندما يُرسَل النموذج، المخطط العام لهذا الاستخدام كالآتي:

1. يُقرِّر المستخدم تعديل بعض المحتوى المسموح تعديله، مثل تدوينة، أو صفحة ويكي، وذلك بالضغط على زر التعديل الملائم.
2. يؤخذ المحتوى من قاعدة البيانات ويُعرَض في نموذج ما للسماح للمستخدم بإجراء تعديلات.
3. بعد التعديل، فسيُرسِل المستخدم النموذج، وستُحفَظ البيانات المُرسَلة في قاعدة البيانات.

الفكرة هنا تكمن في الخطوة الثانية، فسيُخزَّن مُعرِّف ID للعنصر الذي يُعدَّل في حقل مخفي، وعندما يرسل المستخدم النموذج في الخطوة الثالثة فسيُرسَل المُعرِّف تلقائيًا إلى الخادوم، وهذا المُعرِّف سيسمح للخادوم بمعرفة ما هي السجلات التي يجب تعديلها بما يتوافق مع محتويات النموذج.

أمثلة

سننشِئ في هذا المثال نسخةً بسيطةً من النموذج الذي شرحناه في القسم السابق، وسنستخدم الحقل المخفي لحفظ مُعرِّف ID للعنصر الذي سنُعدِّله.

سيبدو نموذج HTML كما يلي:

<form>
  <div>
    <label for="title">Post title:</label>
    <input type="text" id="title" name="title" value="My excellent blog post">
  </div>
  <div>
    <label for="content">Post content:</label>
    <textarea id="content" name="content" cols="60" rows="5">
This is the content of my excellent blog post. I hope you enjoy it!
    </textarea>
  </div>
  <div>
    <button type="submit">Update post</button>
  </div>
  <input type="hidden" id="postId" name="postId" value="34657">
</form>

أما شيفرة CSS، فستبدو كما يلي:

html {
  font-family: sans-serif;
}

form {
  width: 500px;
}

div {
  display: flex;
  margin-bottom: 10px;
}

label {
  flex: 2;
  line-height: 2;
  text-align: right;
  padding-right: 20px;
}

input, textarea {
  flex: 7;
  font-family: sans-serif;
  font-size: 1.1rem;
  padding: 5px;
}

textarea {
  height: 60px;
}

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

يمكنك النظر إلى الشيفرة الكاملة أو تجربة المثال الحي.

عند إرسال النموذج فستبدو البيانات كما يلي:

title=My+excellent+blog+post&content=This+is+the+content+of+my+excellent+blog+post.+I+hope+you+enjoy+it!&postId=34657

وحتى لو كان الحقل مخفيًا، فهذا لا يمنع إرسال البيانات إلى الخادوم.

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

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