سمات input في HTML
أنواع الإدخال اختارت وجه التحكم بـ type. سمات input تصقّل السلوك على نفس الوسم: تلميحات وتحقق مطلوب ونطاقات وحدود وطول وأنماط وحقول مقفلة. هذه الحصة كتالوج سمات يومية — ليست خريطة type ثانية ولا حيلة form= التالية.
لماذا سمات الإدخال مهمة
type الصحيح يترك فجوات: حقول مطلوبة فارغة وأعمار خارج المدى وأكواد طويلة. السمات تملأها بفحوص خفيفة. في التطبيقات الحقيقية تحقق على الخادم أيضاً.
إجابة مباشرة
1) احتفظ بـ name وid وvalue. 2) placeholder تلميح قصير — ليس بديلاً عن label. 3) required للحقول الإلزامية. 4) min وmax وstep للأرقام/التواريخ؛ maxlength للنص؛ أحياناً pattern. 5) readonly يظهر ويُرسل عادة؛ disabled يمنع الاستخدام وغالباً الإرسال. 6) السمات تصقّل type — لا تستبدله وهي منفصلة عن ارتباط form التالي.
📊 Handy input attributes
| Attribute | Role | Beginner tip |
|---|---|---|
| placeholder | Hint text in an empty field | Not a label — always keep a real label |
| required | Must be filled before submit | Browser may block empty submit |
| min / max / step | Limits for number/date-like types | Match the type you already chose |
| maxlength | Max characters for text-like types | Soft cap in the UI; still check on the server |
| pattern | Allowed character pattern | Keep patterns simple for beginners |
| disabled | Not usable; usually not submitted | Do not disable fields you still need to send |
| readonly | Visible, not editable; still submitted | Good for fixed display values |
ملف شخصي: مطلوب وتلميحات وطول
نموذج صغير: اسم كامل مطلوب مع placeholder، واسم مستخدم بـ maxlength وpattern، ومدينة اختيارية.
<form action="/profile" method="post">
<label for="fullname">Full name</label>
<input id="fullname" name="fullname" type="text"
placeholder="Ada Lovelace" required>
<label for="user">Username</label>
<input id="user" name="user" type="text"
maxlength="12" pattern="[A-Za-z0-9_]+"
placeholder="ada_lovelace" required>
<label for="city">City</label>
<input id="city" name="city" type="text"
placeholder="Optional">
<button type="submit">Save</button>
</form>
قراءة مثال الملف
- required على الاسم واسم المستخدم
- placeholder فقط عند الفراغ — الاسم من label
- maxlength=12
- pattern أحرف/أرقام/شرطة سفلية
- المدينة بلا required
- type=text مسبقاً؛ السمات تصقّله
حجز: نطاقات وحقول مقفلة
alأرقام والتواريخ تكتسب معنى مع min وmax وstep. رمز readonly يظهر ويُرسل؛ promo معطل عادة لا يُرسل.
<form action="/book" method="post">
<label for="guests">Guests</label>
<input id="guests" name="guests" type="number"
min="1" max="8" step="1" value="2" required>
<label for="night">Night</label>
<input id="night" name="night" type="date"
min="2026-10-01" max="2026-12-31" required>
<label for="code">Booking code</label>
<input id="code" name="code" type="text"
value="BK-1042" readonly>
<label for="promo">Promo (staff only)</label>
<input id="promo" name="promo" type="text"
value="STAFF" disabled>
<button type="submit">Book</button>
</form>
قراءة مثال الحجز
- min/max/step للضيوف والليلة
- value=2 بداية قابلة للتغيير
- readonly يبقي الرمز ويُرسل عادة
- disabled يمنع التعديل والإرسال غالباً
- حدود التاريخ مع type=date
- التالي: ربط input عبر form=id
اختيار المساعد المناسب
- إلزامي: required
- تلميح فارغ: placeholder (+ label)
- حدود رقم/تاريخ: min max step
- سقف أحرف: maxlength
- تنسيق بسيط: pattern
- عرض بلا تعديل مع إرسال: readonly
- قفل وغالباً بلا إرسال: disabled
- التوصيل: name id value
- لا تعد اختيار type هنا
تمرين — شدّ الحقول بالسمات
- انسخ الملف؛ أزل required ثم أعده
- أفرغ placeholder مع الإبقاء على label
- ارفع maxlength إلى 20
- جرب ضيوفاً خارج min/max
- بدّل readonly ثم أعده
- قارن إرسال الرمز مقابل promo
- جملة: السمات تصقّل السلوك؛ type اختار الوجه
أخطاء شائعة
- placeholder بدل label
- تعطيل حقل يجب إرساله
- الاعتماد فقط على فحوص المتصفح
- min/max على أنواع تتجاهلها
- pattern معقد
- الخلط مع كتالوج type
- القفز إلى form= مبكراً
ملخص
- السمات تصقّل السلوك بعد type
- أدوات يومية: required وplaceholder ونطاقات وmaxlength وpattern
- readonly يُرسل عادة؛ disabled لا
- placeholder تلميح؛ label يسمي
- احتفظ بـ name/id/value
- التالي: سمات form على input
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى