HTML Tutorial

عنصر <form>

ما هو استخدام <form>؟

يستخدم وسم <form> في HTML لإنشاء نموذج يسمح للمستخدمين بإدخال البيانات وإرسالها إلى الخادم.

سمات <form>

  • action: تحدد عنوان URL الذي سيتم إرسال بيانات النموذج إليه.
  • method: تحدد طريقة إرسال البيانات، إما "GET" أو "POST".
  • enctype: تحدد نوع التشفير المستخدم للبيانات المُرسلة.
  • target: تحدد الإطار أو النافذة التي يجب تحميل نتيجة النموذج فيها.

أمثلة باستخدام <form>

  • نموذج بسيط لإدخال النص:
<form action="submit.php" method="post">
  <label for="name">الاسم:</label>
  <input type="text" id="name">
  <input type="submit" value="إرسال">
</form>
  • نموذج اختيار متعدد:
<form action="submit.php" method="post">
  <label for="color">اللون المفضل:</label>
  <select id="color">
    <option value="red">أحمر</option>
    <option value="blue">أزرق</option>
    <option value="green">أخضر</option>
  </select>
  <input type="submit" value="إرسال">
</form>

استكشاف وسم <form>

  1. إنشاء النموذج: استخدم وسم <form> مع السمات المناسبة.
  2. إضافة عناصر الإدخال: أضف عناصر إدخال مثل عناصر إدخال النص أو مربعات الاختيار أو الأزرار.
  3. تعيين معالجات الأحداث: استخدم معالجات الأحداث مثل ()onSubmit للتحقق من صحة البيانات قبل إرسالها.
  4. إرسال البيانات: استخدم وسم <input> من النوع "submit" لإرسال بيانات النموذج إلى الخادم.

نصائح لسهولة الاستخدام:

  • استخدم تسميات واضحة: وضح الغرض من كل عنصر إدخال باستخدام التسميات.
  • قم بإعداد التحقق من صحة البيانات: تحقق من صحة البيانات المقدمة لضمان صحتها.
  • استخدم أزرارًا مرئية: اجعل أزرار الإرسال واضحة وسهلة الوصول.
  • املأ قيم الحقول مسبقًا: املأ حقول النموذج بقيم افتراضية لتوفير الوقت للمستخدمين.