🧩 خصائص الإدخال (Input Attributes): سر تفاعل النماذج في HTML

في الدروس السابقة، تعلمنا أساسيات إنشاء النماذج في HTML باستخدام العنصر <form> وعنصر <input> الأساسي. اليوم، سنتعمق أكثر ونتعرف على خصائص الإدخال (Input Attributes) - وهي الأدوات السحرية التي تتحكم في سلوك وشكل حقول الإدخال، مما يجعل نماذجك أكثر ذكاءً وسهولة في الاستخدام.

فكر في خصائص الإدخال كإعدادات خاصة لكل حقل. هل تريد حقل كلمة مرور يخفي النص؟ هل تريد حقل بريد إلكتروني يتحقق من صحة التنسيق تلقائياً؟ كل هذا وأكثر ممكن باستخدام هذه الخصائص! 🚀

📝 ما هي خصائص الإدخال (Attributes)؟

الخاصية (Attribute) هي معلومات إضافية نضيفها داخل وسم الفتح للعنصر في HTML. بالنسبة لعنصر <input>، هناك العديد من الخصائص التي تحدد وظيفته ومظهره وسلوكه.

الصيغة العامة هي:

<input attribute1="value1" attribute2="value2">

دعنا نبدأ بأهم خاصية على الإطلاق، وهي التي تغير شكل ووظيفة الحقل تماماً.

🔤 الخاصية type: تحديد نوع حقل الإدخال

الخاصية type هي أهم خاصية لعنصر <input>. هي التي تقرر نوع البيانات التي سيتم إدخالها، وبالتالي تغير شكل الحقل وسلوك المتصفح معه.

مثال أساسي:

<!-- حقل نص عادي -->
<input type="text" name="username">

<!-- حقل كلمة مرور (يخفي النص) -->
<input type="password" name="user_password">

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

في المثال أعلاه، كل حقل له وظيفة مختلفة بسبب تغيير خاصية type.

🎯 أهم قيم خاصية type التي يجب معرفتها

لنلقِ نظرة على بعض الأنواع الأكثر استخداماً:

  1. type="text": الحقل النصي القياسي. (الإعداد الافتراضي إذا لم تحدد نوعاً).
  2. type="password": يحول النص المدخل إلى نقاط أو نجوم لإخفائه.
  3. type="email": يحث المتصفح على التحقق من تنسيق البريد الإلكتروني (مثل وجود @).
  4. type="number": يعرض عادة أزرار زيادة/نقصان، ويقبل الأرقام فقط.
  5. type="submit": يحول العنصر إلى زر لإرسال النموذج.
  6. type="reset": زر لمسح جميع البيانات المدخلة في النموذج.

مثال عملي يجمع بين عدة أنواع:

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

<label for="user_age">العمر:</label>
<input type="number" id="user_age" name="age">

<input type="submit" value="تسجيل">
<input type="reset" value="مسح النموذج">

💡 خصائص تحسين تجربة المستخدم

هذه الخصائص تجعل النماذج أكثر وضوحاً وسهولة في الاستخدام للمبتدئين.

  • الخاصية placeholder: تضع نصاً تلميحياً داخل الحقل يختفي عند البدء بالكتابة. مثالي لإعطاء مثال. 
    <input type="text" name="search" placeholder="ابحث عن منتج...">
  • الخاصية value: تحدد القيمة الابتدائية/المبدئية للحقل. تبقى ظاهرة ويمكن للمستخدم تعديلها. 
    <input type="text" name="country" value="السعودية">

الفرق بين placeholder و value مهم:

  • placeholder هو مجرد تلميح يختفي.
  • value هي بيانات حقيقية ستُرسل مع النموذج ما لم يغيرها المستخدم.

🛡️ خصائص التحكم في الإدخال والصلاحيات

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

  • الخاصية required: تجعل تعبئة الحقل إلزامية قبل إرسال النموذج. لا تحتاج إلى قيمة (required فقط). 
    <input type="text" name="full_name" required>
<!-- يجب تعبئة هذا الحقل -->
  • الخاصية readonly: تجعل الحقل للقراءة فقط. يظهر البيانات ولكن المستخدم لا يمكنه تعديلها. 
    <input type="text" name="order_id" value="ORD-12345" readonly>
  • الخاصية disabled: تعطل الحقل تماماً. لا يمكن التفاعل معه، ولا تُرسل قيمته مع النموذج. 
    <input type="text" name="coupon" value="HOLIDAY22" disabled>
  • الخاصية maxlength: تحد أقصى عدد من الأحرف التي يمكن إدخالها. 
    <!-- لا يمكن كتابة أكثر من 10 أحرف في هذا الحقل -->
<input type="text" name="promo_code" maxlength="10">

🧪 مثال شامل: نموذج تسجيل مبسط

لنطبق ما تعلمناه في نموذج بسيط لتسجيل مستخدم جديد:

<form>
  <h3>انشاء حساب جديد</h3>

  <label for="fname">الاسم الكامل (مطلوب):</label><br>
  <input type="text" id="fname" name="full_name" placeholder="أدخل اسمك الثلاثي" required>
  <br><br>

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

  <label for="pwd">كلمة المرور:</label><br>
  <input type="password" id="pwd" name="password" maxlength="20" required>
  <br><br>

  <label for="phone">رقم الهاتف:</label><br>
  <input type="text" id="phone" name="phone" value="+966">
  <br><br>

  <input type="submit" value="إنشاء الحساب">
  <input type="reset" value="إعادة تعيين">
</form>

ملاحظة: جرب تشغيل هذا المثال في متصفحك! حاول إرسال النموذج دون تعبئة الحقول المطلوبة (required) أو أدخل بريداً إلكترونياً خاطئاً في حقل type="email" وشاهد كيف يتفاعل المتصفح. ✨