الفرق بين المراجعتين لصفحة: «HTML/input/hidden»

من موسوعة حسوب
< HTML‏ | input
→ التعديل السابق
مرئينص الويكي
ط تغيير ترتيب التصنيفات
تعديل الأمثلة
 
(2 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة)
سطر 2: سطر 2:
عناصر <code>[[HTML/input|<input>]]</code> ذات النوع <code>hidden</code> تسمح لمطوري الويب بتضمين البيانات التي لا يمكن رؤيتها أو تعديلها من المستخدمين عند إرسال النموذج، فمثلًا يمكن تخزين مُعرِّف المحتوى الذي يتم طلبه حاليًا أو تعديله أو غير ذلك.
عناصر <code>[[HTML/input|<input>]]</code> ذات النوع <code>hidden</code> تسمح لمطوري الويب بتضمين البيانات التي لا يمكن رؤيتها أو تعديلها من المستخدمين عند إرسال النموذج، فمثلًا يمكن تخزين مُعرِّف المحتوى الذي يتم طلبه حاليًا أو تعديله أو غير ذلك.
الحقول المخفية لن تُعرَض في الصفحة ولا توجد أيّ طريقة (في HTML) لفعل ذلك.<syntaxhighlight lang="html">
الحقول المخفية لن تُعرَض في الصفحة ولا توجد أيّ طريقة (في HTML) لفعل ذلك.<syntaxhighlight lang="html">
<input id="prodId" name="prodId" type="hidden" value="xm234jq">
<input type="hidden" id="hidden_prop" name="hidden_prop" value="قيمة ما">


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


== أمثلة ==
== أمثلة ==
سننشِئ في هذا المثال نسخةً بسيطةً من النموذج الذي شرحناه في القسم السابق، وسنستخدم الحقل المخفي لحفظ مُعرِّف ID للعنصر الذي سنُعدِّله.
سننشِئ في هذا المثال نسخةً بسيطةً من النموذج الذي شرحناه في القسم السابق، وسنستخدم الحقل المخفي لحفظ مُعرِّف ID للعنصر الذي سنُعدِّله.<syntaxhighlight lang="html">
 
سيبدو نموذج HTML كما يلي:<syntaxhighlight lang="html">
<form>
<form>
   <div>
   <div>
     <label for="title">Post title:</label>
     <label for="title">عنوان المنشور:</label>
     <input type="text" id="title" name="title" value="My excellent blog post">
     <input type="text" id="title" name="title" value="تجربة الحقل المخفي">
   </div>
   </div>
   <div>
   <div>
     <label for="content">Post content:</label>
     <label for="content">محتوى المنشور:</label>
     <textarea id="content" name="content" cols="60" rows="5">
     <textarea id="content" name="content" cols="60" rows="5">هذا هو نص المنشور.</textarea>
This is the content of my excellent blog post. I hope you enjoy it!
    </textarea>
   </div>
   </div>
   <div>
   <div>
     <button type="submit">Update post</button>
     <button type="submit">تحديث المنشور</button>
   </div>
   </div>
   <input type="hidden" id="postId" name="postId" value="34657">
   <input type="hidden" id="postId" name="postId" value="34657">
</form>
</form>
</syntaxhighlight>أما شيفرة CSS، فستبدو كما يلي:<syntaxhighlight lang="css">
</syntaxhighlight>سيضبط الخادوم قيمة الحقل المخفي بمُعرِّف المنشور في قاعدة البيانات قبل إرسال النموذج إلى متصفح المستخدم، وسيستخدم تلك المعلومات عند إرسال المستخدم للنموذج إلى الخادوم لكي يعرف ما هو السجل الذي عليه تعديله، ولا حاجة لاستخدام JavaScript لإتمام هذا العمل.
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;
}
</syntaxhighlight>
سيضبط الخادوم قيمة الحقل المخفي بمُعرِّف المنشور في قاعدة البيانات قبل إرسال النموذج إلى متصفح المستخدم، وسيستخدم تلك المعلومات عند إرسال المستخدم للنموذج إلى الخادوم لكي يعرف ما هو السجل الذي عليه تعديله، ولا حاجة لاستخدام JavaScript لإتمام هذا العمل.
 
يمكنك النظر إلى [https://github.com/mdn/learning-area/blob/master/html/forms/hidden-input-example/index.html الشيفرة الكاملة] أو تجربة [https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html المثال الحي].


عند إرسال النموذج فستبدو البيانات كما يلي:
عند إرسال النموذج فستبدو البيانات كما يلي:
<syntaxhighlight lang="vim">
<syntaxhighlight lang="vim">
title=My+excellent+blog+post&content=This+is+the+content+of+my+excellent+blog+post.+I+hope+you+enjoy+it!&postId=34657
title=تجربة+الحقل+المخفي&content=هذا+هو+نص+المنشور.&postId=34657
</syntaxhighlight>وحتى لو كان الحقل مخفيًا، فهذا لا يمنع إرسال البيانات إلى الخادوم.
</syntaxhighlight>وحتى لو كان الحقل مخفيًا، فهذا لا يمنع إرسال البيانات إلى الخادوم.


سطر 96: سطر 58:
|مدعوم
|مدعوم
|}
|}
[[تصنيف:HTML]]
[[تصنيف:HTML|{{SUBPAGENAME}}]]
[[تصنيف:Forms]]
[[تصنيف:HTML Forms|{{SUBPAGENAME}}]]
[[تصنيف:Input Types]]
[[تصنيف:HTML Input Types|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 05:35، 27 فبراير 2018

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

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

<input type="hidden" id="hidden_prop" name="hidden_prop" value="قيمة ما">

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

الخاصية value

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

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

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

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

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

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

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

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

الفكرة هنا تكمن في الخطوة الثانية، فسيُخزَّن مُعرِّف 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
مدعوم مدعوم مدعوم مدعوم مدعوم
مجلوبة من «https://wiki.hsoub.com/index.php?title=HTML/input/hidden&oldid=2807»