Frontend Academy · درس

عناصر التحكم في النماذج: أنواع input وselect وtextarea

استخدم حقول text وemail وnumber وdate وcheckbox وradio وrange وfile وcolor إلى جانب عنصري select وtextarea.

عناصر التحكم في النماذج: أنواع input وselect وtextarea درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

التشكيلة الكاملة لأنواع الإدخال

قدمت HTML5 العديد من أنواع الإدخال المتخصصة إلى جانب النص. يوضح كل نوع للمتصفح نوع البيانات المتوقع، ما يتيح التحقق الأصلي، ولوحات المفاتيح المناسبة على الأجهزة المحمولة، وعناصر التحكم الأصلية للمنصة.

حقول إدخال النص والبحث وعنوان URL

يمثل type="text" الخيار الاحتياطي للنص العادي. ويوحي type="search" باستخدام لوحة مفاتيح محسّنة للبحث، وغالبًا ما يعرض زرًا للمسح. ويتحقق type="url" من تنسيق عنوان URL ويعرض لوحة مفاتيح مخصصة لعناوين URL على الأجهزة المحمولة.

<input type="text" placeholder="Full name">
<input type="search" placeholder="Search...">
<input type="url" placeholder="https://example.com">

البريد الإلكتروني والهاتف

يتحقق type="email" من تنسيق البريد الإلكتروني ويعرض لوحة مفاتيح محسّنة للبريد الإلكتروني تتضمن مفتاح @. ويعرض type="tel" لوحة مفاتيح رقمية للهاتف، لكنه لا يتحقق من التنسيق لأن تنسيقات أرقام الهواتف تختلف من بلد إلى آخر.

<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">

أنواع الأرقام والنطاق والتاريخ

استخدم type="number" مع min/max/step للبيانات الرقمية. واستخدم type="range" لأشرطة التمرير. أما type="date" وtype="time" وtype="datetime-local" فهي مخصصة للبيانات الزمنية مع أدوات اختيار أصلية.

<input type="number" min="0" max="100" step="5" value="50">
<input type="range" min="0" max="100" value="60">
<input type="date" min="2025-01-01">
<input type="time">

خانة الاختيار وزر الاختيار

خانات الاختيار هي مفاتيح تبديل مستقلة. أما أزرار الاختيار الموجودة في المجموعة نفسها، أي التي تحمل الاسم نفسه، فلا تسمح إلا بتحديد خيار واحد. ويحتاج كل عنصر منها إلى تسمية مرتبطة به.

<fieldset>
  <legend>Notification preferences</legend>
  <label><input type="checkbox" name="email_notif" value="1"> Email</label>
  <label><input type="checkbox" name="sms_notif" value="1"> SMS</label>
</fieldset>

<fieldset>
  <legend>Plan</legend>
  <label><input type="radio" name="plan" value="free"> Free</label>
  <label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>

اللون والملف والمخفي

يعرض type="color" أداة اختيار ألوان أصلية. ويفتح type="file" مربع حوار لاختيار ملف؛ استخدم السمة accept لتقييد أنواع الملفات. أما type="hidden" فيرسل البيانات من دون عنصر تحكم مرئي.

<input type="color" name="theme_color" value="#3182ce">
<input type="file" accept="image/png, image/jpeg">
<input type="hidden" name="csrf_token" value="abc123">

القوائم المنسدلة Select

ينشئ العنصر <select> قائمة منسدلة. استخدم multiple للسماح بتحديد خيارات متعددة، مع أن ذلك نادرًا ما يوفر تجربة مستخدم جيدة. وجمّع الخيارات باستخدام <optgroup> عند التعامل مع القوائم الطويلة.

<select name="country">
  <option value="">Select a country...</option>
  <optgroup label="Europe">
    <option value="de">Germany</option>
    <option value="fr">France</option>
  </optgroup>
  <optgroup label="Americas">
    <option value="us">United States</option>
  </optgroup>
</select>

Textarea

ينشئ <textarea> حقل إدخال نص متعدد الأسطر. استخدم rows وcols لتحديد الحجم المبدئي، أو استخدم CSS لمزيد من التحكم. وتكون علامة الإغلاق مطلوبة، كما أن أي محتوى بين العلامتين يصبح القيمة الافتراضية.

<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="5" maxlength="500"
  placeholder="Write something about yourself..."></textarea>

Datalist — خيارات الإكمال التلقائي

يوفر <datalist> قائمة اقتراحات لحقل إدخال من دون تقييد النص الحر. اربط حقل الإدخال بقائمة datalist باستخدام السمتي list وid.

<input type="text" list="languages" name="language" placeholder="Type a language">
<datalist id="languages">
  <option value="JavaScript">
  <option value="TypeScript">
  <option value="Python">
  <option value="Rust">
</datalist>

السمةان value وname

تمثل name المفتاح المُرسل ضمن بيانات النموذج. وتحدد value القيمة الأولية. وبالنسبة إلى خانات الاختيار وأزرار الاختيار، تكون value هي القيمة التي تُرسل عند التحديد. أما في حقول إدخال النص، فتمثل value المحتوى المعبأ مسبقًا.

تحجيم input وplaceholder

يعرض placeholder نصًا إرشاديًا عندما يكون حقل الإدخال فارغًا. ويختفي عند التركيز على الحقل، ولا يُعد بديلًا عن تسمية مرئية. وتحدد size العرض المرئي بعدد المحارف؛ ويُفضّل استخدام CSS للتحجيم.

فحص سريع

ما نوع الإدخال الذي يعرض لوحة مفاتيح رقمية على الأجهزة المحمولة ويتحقق من أن القيمة المدخلة رقم صالح؟

مراجعة: عناصر التحكم في النماذج

استخدم أنواع الإدخال الدلالية: email للبريد الإلكتروني، وnumber للأرقام، وdate للتواريخ. استخدم select للخيارات الثابتة، وdatalist للإكمال التلقائي القائم على الاقتراحات، وtextarea للنص متعدد الأسطر. احرص دائمًا على تضمين سمات name للإرسال وسمات value عند الحاجة.

الأسئلة الشائعة

هل درس «عناصر التحكم في النماذج: أنواع input وselect وtextarea» مجاني؟

نعم — نص درس «عناصر التحكم في النماذج: أنواع input وselect وtextarea» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «عناصر التحكم في النماذج: أنواع input وselect وtextarea»؟

استخدم حقول text وemail وnumber وdate وcheckbox وradio وrange وfile وcolor إلى جانب عنصري select وtextarea. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «عناصر التحكم في النماذج: أنواع input وselect وtextarea»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

عناصر التحكم في النماذج: أنواع input وselect وtextarea
ARIA وإمكانية الوصول: label وrole وaria-*
HTML5 الدلالي: العناصر الدلالية مقابل حساء div
سمات التحقق من صحة النماذج

← العودة إلى Frontend Academy