Part 9 شرح النماذج في HTML Forms #برمجة #FSWD #HTML

النماذج هي الوسيلة الأساسية لجمع البيانات من المستخدمين، زي تسجيل البيانات في موقع، إرسال تعليقات، أو تسجيل دخول.

أولًا: وسم <form> والسمات الأساسية

الوسم <form> يُستخدم لتعريف نموذج. النموذج يُستخدم لجمع البيانات وإرسالها إلى الخادم (server).

✅ الشكل الأساسي للنموذج

<form action="destination.php" method="POST">
  <!-- عناصر النموذج هنا -->
</form>

action: يُحدد المكان الذي يتم إرسال البيانات إليه بعد تقديم النموذج.

method: يحدد طريقة الإرسال للبيانات. الخيارات الأكثر استخدامًا هي:

GET: البيانات تُرسل عبر الـ URL.

POST: البيانات تُرسل بشكل مخفي عبر الـ HTTP request

ثانيًا: عناصر النماذج

✅ 1. إدخال نصي <input type="text">

يُستخدم لإدخال نص عادي من قبل المستخدم

<label for="name">الاسم:</label>
<input type="text" id="name" name="user_name" placeholder="اكتب اسمك هنا">

 

2. كلمات السر <input type="password">

يُستخدم لإدخال كلمة سر. البيانات التي يُدخلها المستخدم تكون مخفية

<label for="password">كلمة السر:</label>
<input type="password" id="password" name="user_password" placeholder="اكتب كلمة السر هنا">

3. زر إرسال <input type="submit">

يُستخدم لإنشاء زر يُتيح للمستخدم إرسال البيانات

<input type="submit" value="إرسال">

 

4. الاختيارات <input type="radio">

يُستخدم لإعطاء المستخدم خيارًا واحدًا فقط من عدة اختيارات (مثال: نعم/لا)

<label>اختر جنسيتك:</label>
<input type="radio" id="egyptian" name="nationality" value="Egyptian">
<label for="egyptian">مصري</label>
<input type="radio" id="american" name="nationality" value="American">
<label for="american">أمريكي</label>

 

5. الاختيارات المتعددة <input type="checkbox">

يُستخدم للسماح للمستخدم باختيار أكثر من خيار

<label>اختر المهارات التي لديك:</label>
<input type="checkbox" id="html" name="skills" value="HTML">
<label for="html">HTML</label>
<input type="checkbox" id="css" name="skills" value="CSS">
<label for="css">CSS</label>
<input type="checkbox" id="js" name="skills" value="JavaScript">
<label for="js">JavaScript</label>

 

6. القوائم المنسدلة <select> و <option>

يُستخدم لإعطاء المستخدم قائمة من الخيارات يمكنه اختيار واحدة منها

<label for="country">اختر بلدك:</label>
<select id="country" name="country">
  <option value="egypt">مصر</option>
  <option value="usa">أمريكا</option>
  <option value="uk">بريطانيا</option>
</select>

 

7. مربعات النص <textarea>

يُستخدم لإدخال نصوص طويلة أو متعددة الأسطر، مثل التعليقات أو الملاحظات

<label for="comments">تعليقك:</label>
<textarea id="comments" name="user_comments" rows="4" cols="50" placeholder="اكتب تعليقك هنا"></textarea>

 

8. أزرار <button>

يُستخدم لإضافة زر يمكن تحديد نوعه (إرسال، إلغاء، إلخ)

<button type="submit">إرسال</button>

 

ثالثًا: سمات الإدخال

✅ 1. placeholder: نص يظهر داخل الحقل قبل أن يكتب المستخدم

<input type="text" placeholder="اكتب اسمك هنا">

2. required: يجعل الحقل إلزامي ويجب أن يُملأ قبل إرسال النموذج

<input type="text" required>

3. value: يُستخدم لتحديد القيمة الافتراضية للعنصر.

<input type="text" value="اسمك هنا">

4. name: يُستخدم لتحديد اسم الحقل الذي سيتم إرسال قيمته في النموذج.

<input type="text" name="user_name">

5. id: يُستخدم لتحديد هوية فريدة للعنصر

<input type="text" id="user_name">

6. disabled: يجعل الحقل غير قابل للتفاعل (لا يمكن للمستخدم تعديل قيمته)

<input type="text" disabled>

7. readonly: يجعل الحقل للقراءة فقط، بحيث يمكن للمستخدم رؤية القيمة لكن لا يمكنه تعديلها

<input type="text" readonly value="لا يمكن التعديل هنا">

فيديو مثال كامل للنموذج

💡 ملخص سريع:

السمة	المعنى
action	وجهة إرسال البيانات
method	طريقة الإرسال (GET أو POST)
input type="text"	حقل نصي
input type="password"	حقل كلمة سر
input type="submit"	زر إرسال
input type="radio"	اختيارات فردية
input type="checkbox"	اختيارات متعددة
select و option	قائمة منسدلة
textarea	مربع نص طويل
button	زر قابل للتخصيص
required	إلزامي
placeholder	نص مبدئي في الحقل
readonly	للقراءة فقط