شرح صفوف ومحتوى الفقرة
من الأخطاء الشائعة الخلط بين سمتَي disabled وreadonly في النماذج. فالحقل المعطّل بسمة disabled يظهر بخلفية رمادية باهتة ولا يقبل التركيز بلوحة المفاتيح ولا تُرسل قيمته إطلاقاً ضمن بيانات النموذج إلى الخادم. أما الحقل المقيّد للقراءة فقط بسمة readonly فيمنع تعديل النص مع السماح بتحديده ونسخه وإرسال قيمته مع النموذج بشكل طبيعي.
وعندما ترغب في عرض قيمة ثابتة للقراءة فقط (مثل البريد الإلكتروني المسجّل للحساب) بهيئة نص أنيق مجرد من الإطار والخلفية مع الحفاظ على الهوامش الرأسية الدقيقة للحقول المجاورة، استبدل .form-control بالكلاس .form-control-plaintext.
HTML
<input class="form-control mb-2" type="text"
value="Disabled field" disabled>
<input class="form-control mb-2" type="text"
value="Readonly copyable value" readonly>
<input class="form-control-plaintext" type="text"
value="[email protected]" readonly>