يعد عنصر <input> في HTML المكون الأساسي لجمع بيانات المستخدم وتفاعلاته داخل نماذج الويب.
أنواع عناصر الإدخال
الأنواع النصية والدلالية
| النوع | الوصف |
|---|---|
text |
نص عادي من سطر واحد |
password |
حقل إدخال نصي مخفي لكلمات المرور |
email |
عنوان بريد إلكتروني مع تحقق تلقائي من المتصفح |
url |
إدخال عناوين URL مطلقة |
tel |
إدخال أرقام الهواتف (يستدعي لوحة مفاتيح الهاتف في الأجهزة المحمولة) |
search |
حقل إدخال نصوص البحث مع زر تفريغ سريع |
الأنواع الرقمية والكمية
| النوع | الوصف |
|---|---|
number |
محدد أرقام تصاعدي وتنازلي (min و max و step) |
range |
شريط تمرير لتحديد قيمة تقريبية |
أنواع التاريخ والوقت
| النوع | الوصف |
|---|---|
date |
منتقي تاريخ التقويم (سنة، شهر، يوم) |
time |
منتقي توقيت الساعة (ساعات، دقائق) |
datetime-local |
تاريخ ووقت محلي بدون تحديد المنطقة الزمنية |
month |
محدد السنة والشهر |
week |
محدد السنة ورقم الأسبوع حسب ISO |
التحديد والإجراءات
| النوع | الوصف |
|---|---|
checkbox |
مفتاح تبديل ثنائي أو خيار تحديد متعدد |
radio |
خيار فردي متبادل ضمن مجموعة راديو محددة |
color |
لوحة اختيار الألوان |
file |
حقل تحميل وإرفاق الملفات (accept و multiple) |
hidden |
قيمة مخفية يتم إرسالها مع النموذج دون ظهورها للمستخدم |
submit |
زر إرسال النموذج |
reset |
زر إعادة تعيين النموذج إلى حالته الأصلية |
button |
زر عام قابل للبرمجة عبر JavaScript |
سمات التحقق والتحكم الأساسية
| السمة | السلوك والتأثير |
|---|---|
required |
يمنع إرسال النموذج إذا كان الحقل فارغا |
pattern="[A-Za-z0-9]+" |
تعبير نمطي عادي (Regex) يجب أن يطابق المدخل |
min="1" max="100" |
الحد الأدنى والأقصى للقيم الرقمية أو التواريخ |
step="0.5" |
مقدار الخطوة الصالحة للقيم الرقمية |
minlength="5" maxlength="20" |
الحد الأدنى والأقصى لعدد الأحرف النصية |
placeholder="..." |
نص توضيحي رمادي يختفي عند بدء الكتابة |
readonly |
يمنع تعديل القيمة مع السماح بإرسالها في النموذج |
disabled |
يعطل الحقل بالكامل ولا يتم إرسال قيمته |
autofocus |
يمنح التركيز للحقل تلقائيا عند تحميل الصفحة |
مثال شامل على نموذج مكتمل
<form action="/api/submit" method="POST">
<label for="user-email">البريد الإلكتروني:</label>
<input type="email" id="user-email" name="email" required placeholder="[email protected]" />
<label for="user-password">كلمة المرور (8 أحرف على الأقل):</label>
<input type="password" id="user-password" name="password" required minlength="8" />
<label for="user-age">العمر:</label>
<input type="number" id="user-age" name="age" min="18" max="120" step="1" />
<label>
<input type="checkbox" name="terms" required />
أوافق على الشروط والأحكام
</label>
<input type="submit" value="تسجيل الحساب" />
</form>