حقول الإدخال في HTML
يا هلا بالجميع! اليوم بنتكلم عن حقول الإدخال في HTML، اللي هي أساس أي نموذج (Form) تشوفه في النت. من تسجيل الدخول لتعبئة بياناتك، كلها تعتمد عليها. الموضوع بسيط ومباشر، ويلا نبدأ.
1. أنواع حقول الإدخال (Input Types)
فيه أنواع كثيرة لحقول الإدخال، وكل نوع له استخدام معين. هذي أشهرها:
type="text"
هذا النوع هو الأساسي لأي نص عادي. الاسم، العنوان، أي شيء نصي.
<label for="username">اسم المستخدم:</label>
<input type="text" id="username" name="username">type="password"
لإدخال كلمات المرور. النص اللي تكتبه يكون مخفي (نجوم أو نقاط).
<label for="password">كلمة المرور:</label>
<input type="password" id="password" name="password">type="email"
لإدخال البريد الإلكتروني. المتصفح ممكن يسوي تحقق بسيط للتأكد إنه صيغة بريد إلكتروني صحيحة.
<label for="email">البريد الإلكتروني:</label>
<input type="email" id="email" name="email">type="number"
لإدخال الأرقام فقط. عادةً يعطيك أسهم تزيد وتنقص الرقم.
<label for="age">العمر:</label>
<input type="number" id="age" name="age" min="18" max="99">type="date"
لاختيار التاريخ. المتصفح يعرض لك تقويم تختار منه.
<label for="birthdate">تاريخ الميلاد:</label>
<input type="date" id="birthdate" name="birthdate">type="checkbox"
للاختيارات المتعددة. تقدر تختار أكثر من خيار.
<input type="checkbox" id="agree" name="agree" value="yes">
<label for="agree">أوافق على الشروط والأحكام</label>type="radio"
للاختيار الفردي. من مجموعة خيارات، تختار واحد بس. لازم يكون لها نفس الـ name عشان تشتغل صح.
<input type="radio" id="male" name="gender" value="male">
<label for="male">ذكر</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">أنثى</label>type="submit"
هذا الزر يرسل بيانات النموذج (Form) للخادم. هو أساسي لأي نموذج.
<input type="submit" value="إرسال البيانات">type="button"
زر عادي، ما يسوي شيء لحاله إلا إذا ربطت فيه جافاسكريبت عشان يسوي وظيفة معينة.
<input type="button" value="اضغط هنا" onclick="alert('مرحباً!')">type="file"
لرفع الملفات (صور، مستندات، إلخ). يعطيك زر "Choose File" عشان تختار ملف من جهازك.
<label for="profile_pic">صورة الملف الشخصي:</label>
<input type="file" id="profile_pic" name="profile_pic">2. بعض السمات المهمة (Important Attributes)
الحقول هذي لها سمات (attributes) كثيرة تتحكم في سلوكها وشكلها:
name: مهم جداً! هذا الاسم اللي يستخدمه الخادم عشان يتعرف على قيمة الحقل لما ترسل النموذج.id: معرف فريد للحقل، يستخدم في CSS و JavaScript، ومهم جداً لربطه بـlabel.value: القيمة الأولية للحقل، أو القيمة اللي ترسل للخادم.placeholder: نص رمادي يظهر داخل الحقل قبل ما يكتب المستخدم أي شيء، كـ "مثال" أو "تلميح".required: يخلي الحقل إجباري، ما تقدر ترسل النموذج إلا بعد ما تعبيه.disabled: يعطل الحقل، ما يقدر المستخدم يكتب فيه أو يغير قيمته. قيمته ما ترسل للخادم.readonly: يخلي الحقل للقراءة فقط، المستخدم ما يقدر يغير قيمته، لكن قيمته ترسل للخادم.min,max,step: تستخدم مع أنواع مثلnumberوdateعشان تحدد أقل وأعلى قيمة، أو مقدار الزيادة/النقصان.
ملاحظة: دائماً استخدم وسمlabelمع حقول الإدخال وربطها بـidالحقل. هذا يعطي تجربة مستخدم أفضل ويسهل الوصول (Accessibility) للمواقع.
3. مثال شامل
هذا مثال يجمع لك كم نوع وسمة عشان تشوف كيف شكلها مع بعض:
<form action="/submit-form" method="post">
<h3 style="color: #0056b3;">بيانات التسجيل</h3>
<p>
<label for="full_name">الاسم الكامل:</label>
<input type="text" id="full_name" name="full_name" placeholder="أدخل اسمك هنا" required>
</p>
<p>
<label for="user_email">البريد الإلكتروني:</label>
<input type="email" id="user_email" name="user_email" placeholder="example@domain.com" required>
</p>
<p>
<label for="new_password">كلمة المرور:</label>
<input type="password" id="new_password" name="new_password" minlength="8" required>
</p>
<p>
<label for="phone_number">رقم الجوال (اختياري):</label>
<input type="tel" id="phone_number" name="phone_number" placeholder="05xxxxxxxx">
</p>
<p>
<label for="birth_date">تاريخ الميلاد:</label>
<input type="date" id="birth_date" name="birth_date" max="2005-01-01">
</p>
<p>
<strong>الجنس:</strong><br>
<input type="radio" id="gender_male" name="gender" value="male" checked>
<label for="gender_male">ذكر</label>
<input type="radio" id="gender_female" name="gender" value="female">
<label for="gender_female">أنثى</label>
</p>
<p>
<input type="checkbox" id="newsletter" name="newsletter" value="yes">
<label for="newsletter">أرغب في استلام النشرة الإخبارية</label>
</p>
<p>
<label for="user_comment">ملاحظات:</label><br>
<textarea id="user_comment" name="user_comment" rows="4" cols="50" placeholder="اكتب ملاحظاتك هنا..."></textarea>
</p>
<p>
<input type="submit" value="تسجيل">
<input type="reset" value="مسح"> <!-- reset button clears form data -->
</p>
</form>الخلاصة
كذا نكون غطينا أهم أنواع حقول الإدخال والسمات الأساسية اللي تحتاجها عشان تبني نماذج HTML قوية وفعالة. الممارسة هي الأهم، جرب بنفسك وبتشوف كيف الموضوع يصير سهل. بالتوفيق!