انواع حقول الادخال وخصائصها

لماذا تهم انواع حقول الادخال

يوفر HTML مجموعة واسعة من انواع حقول الادخال وكل نوع مصمم لنوع محدد من البيانات. استخدام النوع الصحيح يحسن تجربة المستخدم من خلال عرض لوحة المفاتيح المناسبة على الاجهزة المحمولة ويفعل التحقق المدمج في المتصفح ويساعد التقنيات المساعدة على فهم البيانات المتوقعة. في هذا الدرس ستتعلم كل نوع من انواع حقول الادخال المتاحة في HTML والخصائص التي تتحكم في سلوكها.

انواع الادخال النصية

اكثر حقول الادخال شيوعا هي التي تتعامل مع النصوص بأشكال مختلفة. كل نوع يخبر المتصفح بنوع النص المتوقع مما يؤثر على التحقق وسلوك الاكمال التلقائي وتخطيط لوحة المفاتيح على الهواتف.

<form>
  <label for="username">اسم المستخدم:</label>
  <input type="text" id="username" name="username" placeholder="ادخل اسمك" required>

  <label for="pwd">كلمة المرور:</label>
  <input type="password" id="pwd" name="pwd" minlength="8">

  <label for="email">البريد الالكتروني:</label>
  <input type="email" id="email" name="email" multiple>

  <label for="phone">الهاتف:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{4}">

  <label for="website">الموقع الالكتروني:</label>
  <input type="url" id="website" name="website">

  <label for="q">البحث:</label>
  <input type="search" id="q" name="q">
</form>

النوع text هو الافتراضي ويقبل اي سلسلة نصية. النوع password يخفي الاحرف على شكل نقاط. النوع email يتحقق من ان القيمة تحتوي على رمز @ واسم نطاق. النوع tel لا يفرض تنسيقا معينا بذاته لكنه يعرض لوحة مفاتيح رقمية على الاجهزة المحمولة. النوع url يتطلب تنسيق رابط صالح يتضمن البروتوكول. النوع search يعمل مثل text لكن قد يتضمن زر مسح في بعض المتصفحات.

حقول التاريخ والوقت والارقام

قدم HTML5 منتقيات تاريخ ووقت اصلية مما يغني عن الحاجة لمكتبات JavaScript في كثير من الحالات. حقول الادخال الرقمية تسمح لك بتقييد القيم بخصائص الحد الادنى والاقصى والخطوة.

<label for="birthday">تاريخ الميلاد:</label>
<input type="date" id="birthday" name="birthday" min="1950-01-01" max="2010-12-31">

<label for="meeting">وقت الاجتماع:</label>
<input type="time" id="meeting" name="meeting" min="09:00" max="17:00">

<label for="appointment">الموعد:</label>
<input type="datetime-local" id="appointment" name="appointment">

<label for="month">شهر الميلاد:</label>
<input type="month" id="month" name="month">

<label for="week">الاسبوع المفضل:</label>
<input type="week" id="week" name="week">

<label for="qty">الكمية:</label>
<input type="number" id="qty" name="qty" min="1" max="100" step="1">

النوع date يعرض منتقي تاريخ في معظم المتصفحات. خصائص min و max تحدد النطاق القابل للاختيار. النوع datetime-local يجمع التاريخ والوقت في حقل واحد بدون معلومات المنطقة الزمنية. النوع number يعرض ازرار زيادة ونقصان وخاصية step تتحكم في الفاصل بين القيم الصالحة.

انواع الادخال الخاصة

بجانب النصوص والتواريخ يوفر HTML حقول ادخال للالوان والنطاقات والملفات والبيانات المخفية. هذه الانواع المتخصصة تخدم اغراضا مختلفة في تصميم النماذج.

<label for="color">اللون المفضل:</label>
<input type="color" id="color" name="color" value="#3498db">

<label for="volume">مستوى الصوت:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="5">

<label for="avatar">رفع صورة:</label>
<input type="file" id="avatar" name="avatar" accept="image/*" multiple>

<input type="hidden" name="user_id" value="12345">

النوع color يفتح منتقي الوان ويخزن القيمة كرمز سداسي عشري. النوع range يعرض شريط تمرير وهو مثالي للاعدادات مثل مستوى الصوت او السطوع. النوع file يفتح نافذة اختيار الملفات وخاصية accept تحدد انواع الملفات المعروضة. خاصية multiple تسمح باختيار عدة ملفات دفعة واحدة. النوع hidden يخزن بيانات ترسل مع النموذج لكنها لا تظهر للمستخدم مثل الرموز المميزة او المعرفات.

حقول الاختيار المربعة والدائرية

مربعات الاختيار تسمح للمستخدمين باختيار عدة خيارات بشكل مستقل بينما ازرار الاختيار الدائرية تفرض اختيارا واحدا ضمن المجموعة. يجب ان تشترك ازرار الاختيار الدائرية في نفس قيمة خاصية name لتكون مجموعة واحدة.

<!-- مربعات الاختيار: اختيارات متعددة مسموحة -->
<label><input type="checkbox" name="skills" value="html"> HTML</label>
<label><input type="checkbox" name="skills" value="css"> CSS</label>
<label><input type="checkbox" name="skills" value="js" checked> JavaScript</label>

<!-- ازرار الاختيار الدائرية: اختيار واحد فقط لكل مجموعة -->
<label><input type="radio" name="level" value="beginner"> مبتدئ</label>
<label><input type="radio" name="level" value="intermediate" checked> متوسط</label>
<label><input type="radio" name="level" value="advanced"> متقدم</label>

خصائص حقول الادخال الاساسية

الخصائص تعدل سلوك حقول الادخال. خاصية placeholder تعرض نصا توضيحيا يختفي عندما يبدا المستخدم بالكتابة. خاصية required تمنع ارسال النموذج اذا كان الحقل فارغا. خاصية disabled تجعل الحقل رماديا وتستبعد قيمته من الارسال بينما readonly تمنع التعديل لكنها ترسل القيمة. خاصية autofocus تضع المؤشر في الحقل تلقائيا عند تحميل الصفحة. خاصية autocomplete تتحكم في اقتراحات المتصفح للقيم المدخلة سابقا. خاصية maxlength تحدد الحد الاقصى لعدد الاحرف التي يمكن للمستخدم كتابتها. خاصية pattern تقبل تعبيرا نمطيا للتحقق المخصص.

عنصر datalist

يوفر عنصر <datalist> اقتراحات اكمال تلقائي لحقل الادخال دون تقييد المستخدم بتلك الخيارات. يجمع بين مرونة حقل النص وراحة القائمة المنسدلة.

<label for="framework">اطار العمل المفضل:</label>
<input type="text" id="framework" name="framework" list="frameworks">
<datalist id="frameworks">
  <option value="React">
  <option value="Vue">
  <option value="Angular">
  <option value="Svelte">
  <option value="Laravel">
</datalist>

يشير حقل الادخال الى datalist من خلال خاصية list التي يجب ان تتطابق مع id عنصر datalist. يمكن للمستخدمين اما اختيار اقتراح او كتابة قيمة مخصصة تماما.