readonly وdisabled: أي قيمة تصل مع نموذج HTML؟

الخلاصة السريعة

متى تحتاج إلى القراءة فقط؟

اختر readonly لحقل نص مدعوم تريد إبقاء قيمته قابلة للمراجعة؛ لا تعمل هذه السمة على select. [1]

تخيّل مرجعًا نصيًا تعرضه للمراجعة دون السماح بتعديله من الحقل. باستخدام readonly يستطيع القارئ الوصول إليه بالتركيز، مع بقاء الكتابة ممنوعة. تنطبق السمة على textarea وأنواع مدعومة من input، ومنها text وemail وnumber؛ لا تنقل القاعدة تلقائيًا إلى أي عنصر. لذلك، إذا أضفت readonly إلى قائمة select، فلا تعتمد عليه لمنع تغيير الاختيار. [1]

ماذا يغيّر تعطيل الحقل؟

اختر disabled عندما يكون الحقل غير متاح؛ قيمته الظاهرة لا تعني مشاركته في الإرسال. [2]

قد تكون الملاحظة مؤجلة إلى خطوة لاحقة، فتجعلها disabled. يتجاوزها الانتقال المعتاد بمفتاح Tab، ولا تدخل قيمتها ضمن البيانات التي يبنيها النموذج. إذا كان الحقل للقراءة فقط ومعطّلًا معًا، فالتعطيل ما زال يستبعده. وعندما يغيب حقل دون سمة تعطيل عليه مباشرة، افحص أيضًا ما إذا كان داخل fieldset معطّل. [2]

جرّب الفرق على قيمتين واضحتين

افحص الأزواج الناتجة من FormData: يحتاج الحقل إلى name، ويُستبعد الحقل المعطّل. [3]

احفظ المثال في ملف HTML وافتح وحدة التحكم في أدوات المطوّر. تظهر code بالقيمة R-17، وتغيب note؛ إنشاء FormData هنا لا يرسل طلبًا شبكيًا. بدّل disabled في الحقل الثاني إلى readonly وأعد التحميل: تدخل note بالقيمة D-18. ثم احذف name من الأول؛ يغيب رغم بقائه للقراءة فقط. [3]

مرّر الشيفرة أفقيًا عند الحاجة.

<form id="profile">
  <label>رمز القراءة
    <input name="code" value="R-17" readonly>
  </label>
  <label>ملاحظة مؤجلة
    <input name="note" value="D-18" disabled>
  </label>
</form>
<script>
  const form = document.querySelector("#profile");
  console.log([...new FormData(form)]);
</script>

لا تخلط الإدراج مع اجتياز التحقق

حقول النص ذات readonly والحقول المعطّلة لا تشارك في التحقق من القيود داخل المتصفح. [1] [2]

قد يحتوي حقل email للقراءة فقط على نص غير مطابق لصيغة البريد، دون منعه بتحقق المتصفح. إزالة readonly تعيد مشاركته في التحقق؛ إدراج القيمة في البيانات لا يثبت صلاحيتها. [1] [2]

أين تنتهي مسؤولية هاتين السمتين؟

منع التحرير في الواجهة لا يغني عن التحقق من البيانات في الخادم. [4]

السمة تصف سلوك الواجهة التي قدمتها، ولا تثبت أن الطلب الوارد إلى الخادم جاء دون تعديل. إذا كانت القيمة تحدد صاحب طلب أو صلاحية، فلا تمنحها الثقة لمجرد أن الحقل لم يكن قابلًا للكتابة. تحقّق في الخادم من شكل البيانات ومعناها المسموح، وحدد القيمة من سجلاتك عندما تكون هي المرجع. الاختبار المحلي يشرح سلوك الحقول، ولا يثبت سلامة تطبيق كامل. [4]