HTML: مرجع أنواع الإدخال في HTML

سمة type للعنصر <input> تحدد مظهر وسلوك حقل الإدخال. يوفر HTML أكثر من 20 نوع إدخال تغطي النص والأرقام والتواريخ والاختيار والأزرار والسيناريوهات الأخرى.

1. أنواع إدخال النص

تُستخدم أنواع إدخال النص لجمع أشكال مختلفة من المعلومات النصية:

• type="text" — النوع الافتراضي، إدخال نص سطر واحد
• type="password" — إدخال كلمة المرور، الأحرف مخفية
• type="email" — عنوان البريد الإلكتروني، يتحقق تلقائيًا من الصيغة، لوحات المفاتيح المحمولة تظهر @
• type="tel" — رقم الهاتف، لوحات المفاتيح المحمولة تظهر لوحة أرقام
• type="url" — إدخال URL، يتحقق تلقائيًا من صيغة URL
• type="search" — مربع بحث، بعض المتصفحات تظهر زر مسح

▶ مثال

<form>
<label>اسم المستخدم: <input type="text" name="username" placeholder="أدخل اسم المستخدم"></label><br>
<label>كلمة المرور: <input type="password" name="password" placeholder="6 أحرف على الأقل"></label><br>
<label>البريد الإلكتروني: <input type="email" name="email" placeholder="you@example.com"></label><br>
<label>الهاتف: <input type="tel" name="phone" placeholder="0555555555"></label><br>
<label>الموقع: <input type="url" name="website" placeholder="https://"></label><br>
<label>بحث: <input type="search" name="q" placeholder="كلمات البحث"></label>
</form>

2. أنواع إدخال الأرقام

تتيح أنواع إدخال الأرقام للمستخدمين تحديد أو إدخال قيم رقمية وقيم ألوان:

• type="number" — إدخال رقم، يمكن تقييد min و max و step
• type="range" — منزلق اختيار، يعيد قيمة رقمية
• type="color" — منتقي ألوان، يعيد قيمة لون ست عشرية

<form>
### ▶ مثال
<label>الكمية (1-10): <input type="number" name="qty" min="1" max="10" value="1"></label><br>
<label>مستوى الصوت: <input type="range" name="volume" min="0" max="100" value="50"></label><br>
<label>لون السمة: <input type="color" name="theme" value="#ff6600"></label>
</form>

<!-- مزامنة range و number (تتطلب JS) -->
<input type="range" id="slider" min="0" max="100" value="50">
<input type="number" id="numDisplay" min="0" max="100" value="50">
<script>
const slider = document.getElementById('slider');
const num = document.getElementById('numDisplay');
slider.addEventListener('input', () => num.value = slider.value);
num.addEventListener('input', () => slider.value = num.value);
</script>

3. أنواع إدخال التاريخ والوقت

تتيح أنواع إدخال التاريخ والوقت للمستخدمين اختيار التواريخ بسرعة من خلال تقويم أو منتقي وقت:

• type="date" — منتقي تاريخ (سنة-شهر-يوم)
• type="time" — منتقي وقت (ساعة:دقيقة)
• type="datetime-local" — تاريخ + وقت محلي
• type="month" — منتقي شهر (سنة-شهر)
• type="week" — منتقي أسبوع (سنة-أسبوع)

<form>
<label>التاريخ: <input type="date" name="date"></label><br>
<label>الوقت: <input type="time" name="time"></label><br>
### ▶ مثال
<label>التاريخ + الوقت: <input type="datetime-local" name="datetime"></label><br>
<label>الشهر: <input type="month" name="month"></label><br>
<label>الأسبوع: <input type="week" name="week"></label>
</form>

4. أنواع إدخال الاختيار

تتيح أنواع إدخال الاختيار للمستخدمين الاختيار من عدة خيارات:

• type="checkbox" — خانة اختيار، تسمح باختيارات متعددة
• type="radio" — زر اختيار، يمكن اختيار واحد فقط لكل مجموعة name
• type="file" — رفع ملف، استخدم accept لتقييد أنواع الملفات

<form>
<p>الهوايات (اختيارات متعددة):</p>
<label><input type="checkbox" name="hobby" value="reading"> قراءة</label>
<label><input type="checkbox" name="hobby" value="music"> موسيقى</label>
<label><input type="checkbox" name="hobby" value="sports"> رياضة</label>
### ▶ مثال

<p>الجنس (اختيار واحد):</p>
<label><input type="radio" name="gender" value="male"> ذكر</label>
<label><input type="radio" name="gender" value="female"> أنثى</label>

<p>رفع صورة شخصية (صور فقط):</p>
<input type="file" name="avatar" accept="image/png, image/jpeg, image/gif">
</form>

5. أنواع إدخال الأزرار

تُستخدم أنواع إدخال الأزرار لتفعيل إجراءات النموذج:

• type="submit" — زر إرسال، يرسل بيانات النموذج إلى الخادم
• type="reset" — زر إعادة تعيين، يستعيد عناصر التحكم في النموذج إلى قيمها الأولية
• type="button" — زر عام، يتطلب JavaScript ليكون فعالاً
• type="image" — زر صورة، يعمل مثل submit لكن يستخدم صورة بدلاً من نص

<form action="/submit" method="post">
<label>الاسم: <input type="text" name="name"></label><br>

<!-- زر إرسال -->
<input type="submit" value="إرسال النموذج">

<!-- زر إعادة تعيين -->
### ▶ مثال
<input type="reset" value="إعادة تعيين">

<!-- زر عام -->
<input type="button" value="انقرني" onclick="alert('مرحباً!')">

<!-- زر صورة -->
<input type="image" src="btn-submit.png" alt="إرسال">
</form>

6. الإدخالات المخفية والخاصة

حقول type="hidden" لا تظهر على الصفحة لكنها تُرسل مع النموذج. تُستخدم عادةً لتمرير البيانات الوصفية مثل معرفات المستخدمين ورموز CSRF:

<form action="/update-profile" method="post">
<!-- غير مرئي للمستخدمين، لكن يُرسل مع النموذج -->
<input type="hidden" name="user_id" value="12345">
<input type="hidden" name="token" value="abc123xyz">

<label>الاسم المستعار: <input type="text" name="nickname"></label>
<input type="submit" value="حفظ">
</form>

▶ مثال

7. جدول مرجعي كامل لأنواع الإدخال

النوعالوصفالسمات الشائعةtextنص سطر واحدplaceholder, maxlength, patternpasswordكلمة المرور (عرض مخفي)placeholder, maxlengthemailعنوان بريد إلكترونيplaceholder, multipletelرقم هاتفplaceholder, patternurlURL / عنوان ويبplaceholdersearchمربع بحثplaceholdernumberإدخال رقميmin, max, steprangeمنزلق نطاقmin, max, stepcolorمنتقي ألوان—dateمنتقي تاريخmin, max, steptimeمنتقي وقتmin, max, stepdatetime-localتاريخ + وقت محليmin, maxmonthمنتقي شهرmin, maxweekمنتقي أسبوعmin, maxcheckboxخانة اختيار (اختيار متعدد)checkedradioزر اختيارcheckedfileرفع ملفaccept, multiplesubmitزر إرسالvalue, formactionresetزر إعادة تعيينvaluebuttonزر عامvalue, onclickimageزر صورةsrc, althiddenحقل مخفيvalue

❓ أسئلة شائعة

📖 ملخص

• <input type="..."> له أكثر من 20 نوعًا، مصنفة حسب الاستخدام: نص، أرقام، تاريخ، اختيار، أزرار، ومخفي
• أنواع النص: text، password، email، tel، url، search
• الأنواع الرقمية: number (دقيق)، range (منزلق)، color (منتقي ألوان)
• أنواع التاريخ: date، time، datetime-local، month، week
• أنواع الاختيار: checkbox (اختيار متعدد)، radio (اختيار واحد)، file (رفع)
• أنواع الأزرار: submit، reset، button (عام)، image
• خاص: hidden (حقل مخفي لتمرير البيانات الوصفية)

📝 تمارين

1. نموذج تسجيل: أنشئ نموذج "اشتراك" يحتوي على 5+ أنواع إدخال: text (اسم المستخدم)، email، password، date (تاريخ الميلاد)، radio (الجنس)، checkbox (الهوايات)، file (رفع صورة)، submit، و reset.
2. مزامنة المنزلق: أنشئ منزلق نطاق وإدخال رقمي يزامنان قيمهما في الوقت الفعلي. النطاق: 0-100، الخطوة: 5.

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن