Lesson 14 / الدرس 14
Forms: inputs, labels and errors / النماذج: الحقول والتسميات والأخطاء
Bootstrap styles form controls for you; Tailwind does not touch them until you say so. Both leave the two things that actually matter — the label and the error — entirely up to you.
ينسّق Bootstrap عناصر النموذج عنك؛ وTailwind لا يمسّها حتى تقول. وكلاهما يترك الشيئين المهمين فعلًا — التسمية والخطأ — لك تمامًا.
BOOTSTRAP
<label class="form-label" for="email">Email</label>
<input class="form-control" id="email" type="email">
TAILWIND
<label class="block text-sm font-medium mb-1" for="email">Email</label>
<input id="email" type="email"
class="w-full rounded border border-slate-300 px-3 py-2
focus:border-sky-500 focus:ring-1 focus:ring-sky-500">for and the id. That pair is what makes the label clickable and what a screen reader reads out when the field is focused, and no framework supplies it. Run the demonstration for a complete field, including the error state.
for وid. فذلك الزوج هو ما يجعل التسمية قابلة للنقر وما يقرؤه قارئ الشاشة حين يُركَّز الحقل، ولا يوفره أي إطار. شغّل العرض لحقل كامل بحالة الخطأ.The label is not optional
A placeholder is not a label. It disappears the moment someone types, so the person who looks away mid-form has no way to know what the field was; it is styled as faint grey, which often fails contrast; and a screen reader treats it as a hint rather than a name. Every field needs a real <label> joined by for and id. This is the HTML course's point, and neither framework will remind you.
<label> حقيقية موصولة بـfor وid. وهذه نقطة دورة HTML، ولن يذكّرك أي إطار.| Control | Bootstrap | Tailwind |
|---|---|---|
| Text input | form-control | A handful of border and padding classes |
| Select | form-select | The same, plus appearance-none if restyling |
| Checkbox | form-check-input | accent-sky-600, or a plugin |
| Textarea | form-control | The same as a text input |
| A whole field group | mb-3 wrapping label and input | space-y-1 on a wrapper |
| Invalid state | is-invalid + invalid-feedback | border-red-500 + your own message |
Tailwind publishes an official forms plugin that resets controls to something sensible before you style them. Without it, a <select> keeps the operating system look, which is jarring beside styled inputs — this is the one place a Tailwind page needs a plugin to look finished.
<select> بمظهر نظام التشغيل، وهو نشاز بجانب حقول منسَّقة — وهذا الموضع الوحيد الذي تحتاج فيه صفحة Tailwind إضافةً لتبدو منتهية.Errors that help
A useful error message does three things: it appears beside the field it is about, it says what is wrong in words rather than only in red, and it says what would be right. "Invalid input" fails all three. "That does not look like an email address — it needs an @" passes all three and is no harder to write.
aria-describedby لتُقرأ مع الحقل لا أن تبقى شاردة في موضع ما من الصفحة.Both frameworks also offer validation styles that appear as the user types. Use them carefully: telling someone their email is invalid while they are still typing the first three letters is worse than saying nothing. Validate on leaving a field, or on submit, and remove the error the moment they start fixing it.
type وautocomplete الصحيحتين من دورة HTML. فـtype="email" يعطي الهاتف لوحة مفاتيح فيها @، وtype="tel" يعطيه أرقامًا، وautocomplete="email" يتيح للمتصفح ملأه. ولا يفعل أي إطار هذا عنك وهو يحسّن النموذج أكثر من أي تنسيق.Try it live / جرّب بنفسك
Check yourself / اختبر نفسك
1. Why is a placeholder not a substitute for a label?
Every field needs a real label joined by for and id. Neither framework supplies that pair.
for وid. ولا يوفر أي إطار ذلك الزوج.
2.
What does aria-describedby do on an invalid field?
aria-describedby على حقل غير صالح؟Without it the message is stranded somewhere on the page and a screen reader user never hears it beside the field it belongs to.
3. Which costs nothing and improves a form more than any styling?
type="email" changes the phone keyboard and autocomplete lets the browser fill the field. No framework does it for you.
type="email" تغيّر لوحة مفاتيح الهاتف وautocomplete تتيح للمتصفح ملء الحقل. ولا يفعله أي إطار عنك.Score / النتيجة: 0 / 3
Your task / مهمتك
Build the same four-field form in both frameworks — name, email, a select and a message — with real labels, correct input types and autocomplete attributes. Then show one field in its error state, with a message that says what is wrong and what would be right, tied to the field with aria-describedby. Finish by filling the form using only the keyboard and reporting anything awkward.
ابنِ النموذج نفسه بأربعة حقول في الإطارين — اسم وبريد وقائمة ورسالة — بتسميات حقيقية وأنواع حقول صحيحة وسمات autocomplete. ثم أظهر حقلًا واحدًا في حالة الخطأ، برسالة تقول ما الخطأ وما الصواب، مربوطة بالحقل بـaria-describedby. واختم بملء النموذج بلوحة المفاتيح وحدها والإبلاغ عن كل ما كان محرجًا.
- Four fields, in both frameworks, every one labelled أربعة حقول في الإطارين، كل واحد موسوم
- Correct type and autocomplete on each type وautocomplete صحيحان على كل واحد
- An error state with a message in words حالة خطأ برسالة بالكلمات
- Filled with the keyboard only, and reported مملوء بلوحة المفاتيح وحدها، مبلَّغ عنه