إنشاء نماذج HTML

مرحبًا بكم في الدرس التالي! ستتعلمون في هذا الدرس كيفية إنشاء نماذج باستخدام HTML. تُعد النماذج ضرورية لجمع إدخالات المستخدم، والتي يمكنكم معالجتها لاحقًا باستخدام PHP. لنبدأ!

ما نماذج HTML؟

تُستخدم نماذج HTML لجمع إدخالات المستخدم. وتتيح للمستخدمين ملء الحقول وإجراء الاختيارات وإرسال البيانات إلى خادم لمعالجتها.

مثال: نموذج تسجيل دخول يُدخل فيه المستخدمون اسم المستخدم وكلمة المرور.

نقطة أساسية: تعمل النماذج كحلقة وصل بين المستخدم ونصوص PHP البرمجية.

إنشاء نموذج بسيط

إليكم طريقة إنشاء نموذج HTML أساسي:

الشرح:

• action: يحدد ملف PHP الذي سيتولى معالجة بيانات النموذج.
• method: يحدد كيفية إرسال البيانات (GET أو POST).
• required: يضمن تعبئة الحقل قبل الإرسال.

<form action="process.php" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">Submit</button>
</form>

عناصر النموذج

يمكن أن تتضمن النماذج أنواعًا مختلفة من حقول الإدخال لجمع أنواع متعددة من البيانات:

• text: لإدخال نص من سطر واحد.
• email: لعناوين البريد الإلكتروني.
• password: لإدخال كلمة المرور.
• checkbox: للاختيارات المتعددة.
• radio: لاختيار خيار واحد.
• submit: لإرسال النموذج.

مثال:

<form action="submit.php" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <button type="submit">Login</button>
</form>

استخدام أزرار الاختيار

تتيح أزرار الاختيار للمستخدمين تحديد خيار واحد من مجموعة. مثال:

نصيحة: استخدموا سمة name نفسها لجميع أزرار الاختيار في المجموعة.

<form action="submit.php" method="POST">
  <p>Choose your favorite color:</p>
  <input type="radio" id="red" name="color" value="Red">
  <label for="red">Red</label>
  <br>
  <input type="radio" id="blue" name="color" value="Blue">
  <label for="blue">Blue</label>
  <br>
  <button type="submit">Submit</button>
</form>

استخدام مربعات الاختيار

تتيح مربعات الاختيار للمستخدمين تحديد عدة خيارات. مثال:

نصيحة: استخدموا صيغة المصفوفة (hobbies[]) لجمع عدة قيم.

<form action="submit.php" method="POST">
  <p>Select your hobbies:</p>
  <input type="checkbox" id="reading" name="hobbies[]" value="Reading">
  <label for="reading">Reading</label>
  <br>
  <input type="checkbox" id="traveling" name="hobbies[]" value="Traveling">
  <label for="traveling">Traveling</label>
  <br>
  <button type="submit">Submit</button>
</form>

القوائم المنسدلة

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

نصيحة: استخدموا selected لتعيين خيار افتراضي.

<form action="submit.php" method="POST">
  <label for="country">Choose your country:</label>
  <select id="country" name="country">
    <option value="USA">USA</option>
    <option value="Canada">Canada</option>
    <option value="UK">UK</option>
  </select>
  <br>
  <button type="submit">Submit</button>
</form>

إمكانية الوصول إلى النماذج

احرصوا على أن تكون نماذجكم متاحة لجميع المستخدمين:

• استخدموا وسوم label المرتبطة بحقول الإدخال باستخدام سمات for.
• اجمعوا حقول الإدخال المرتبطة باستخدام fieldset وlegend.
• اختبروا سهولة استخدام النماذج على الأجهزة المحمولة.

نصيحة: تحسّن النماذج المتاحة تجربة المستخدم للجميع!

أحسنتم!

تهانينا! لقد تعلمتم كيفية إنشاء نماذج HTML باستخدام أنواع مختلفة من حقول الإدخال، بما في ذلك الحقول النصية وأزرار الاختيار ومربعات الاختيار والقوائم المنسدلة. تُعد النماذج أساس إدخال المستخدم في تطوير الويب. في الدرس التالي، سنتعلم كيفية معالجة بيانات النماذج باستخدام PHP. واصلوا البرمجة!