📝 أنواع حقول الإدخال في HTML: كل ما تحتاج معرفته للمبتدئين

مرحباً بك في درس جديد من دروس HTML! في هذا الدرس، سنتعلم معاً أحد أهم العناصر التي تجعل مواقع الويب تفاعلية - وهي حقول الإدخال (Input Fields). هذه الحقول هي التي تسمح للمستخدمين بإدخال البيانات والنقر على الأزرار والتفاعل مع موقعك.

🎯 ما هي خاصية type في عنصر <input>؟

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

<input type="نوع_الحقل" name="اسم_الحقل">

لكن تذكر: سنكتب الكود باللغة الإنجليزية دائماً! ⚠️

📄 النوع الأساسي: text (النص)

هو النوع الافتراضي والأكثر استخداماً. يستخدم لإدخال النصوص العادية مثل الاسم أو العنوان.

مثال عملي:

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

النتيجة: سيظهر مربع نصي عادي يمكن للمستخدم كتابة أي نص فيه.

📧 النوع email (البريد الإلكتروني)

مصمم خصيصاً للتحقق من صحة عناوين البريد الإلكتروني. بعض المتصفحات تتحقق تلقائياً من التنسيق الصحيح.

مثال عملي:

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

النتيجة: إذا أدخل المستخدم بريداً إلكترونياً غير صحيح، قد تظهر رسالة خطأ.

🔒 النوع password (كلمة المرور)

يخفي النص المدخل بعرض نجوم أو نقاط لحماية خصوصية المستخدم.

مثال عملي:

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

النتيجة: أي حرف تكتبه سيظهر كـ ●●●●● للحماية.

🔢 النوع number (الأرقام)

يسمح بإدخال الأرقام فقط. يمكنك أيضاً تحديد القيم الدنيا والقصوى.

مثال عملي:

<label for="user-age">العمر:</label>
<input type="number" id="user-age" name="age" min="1" max="120">

النتيجة: يظهر مع أزرار صغيرة لزيادة أو تقليل الرقم.

📅 النوع date (التاريخ)

يعرض منتقي تاريخ يساعد المستخدم على اختيار تاريخ بسهولة.

مثال عملي:

<label for="birth-date">تاريخ الميلاد:</label>
<input type="date" id="birth-date" name="birthdate">

النتيجة: يظهر تقويم منسدل لاختيار التاريخ.

☑️ النوع checkbox (خانة الاختيار)

يسمح للمستخدم باختيار خيار واحد أو أكثر من قائمة الخيارات.

مثال عملي:

<label>
  <input type="checkbox" name="hobbies" value="reading"> القراءة
</label>
<label>
  <input type="checkbox" name="hobbies" value="sports"> الرياضة
</label>

النتيجة: مربعات يمكن تحديدها أو إلغاء تحديدها.

🔘 النوع radio (زر الراديو)

يشبه checkbox لكن يسمح باختيار خيار واحد فقط من مجموعة.

مثال عملي:

<label>
  <input type="radio" name="gender" value="male"> ذكر
</label>
<label>
  <input type="radio" name="gender" value="female"> أنثى
</label>

النتيجة: دوائر يمكن اختيار واحدة فقط من المجموعة.

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

لنجمع ما تعلمناه في مثال عملي واحد:

<form>
  <label for="fullname">الاسم الكامل:</label>
  <input type="text" id="fullname" name="fullname"><br><br>
  
  <label for="user-email">البريد الإلكتروني:</label>
  <input type="email" id="user-email" name="email"><br><br>
  
  <label for="user-password">كلمة المرور:</label>
  <input type="password" id="user-password" name="password"><br><br>
  
  <input type="submit" value="تسجيل">
</form>