Forms in HTML

أكيد قابلت forms (نماذج) كتير وانت أونلاين. الـ form في الـ HTML بنستخدمها عشان نجمع بيانات من اليوزر (user input).

الـ form دي بتبقى عبارة عن حاوية (container) لمجموعة مختلفة من عناصر الإدخال (input elements أو controls).

عنصر الـ <form>

ده العنصر الأساسي اللي بيحتوي كل عناصر التحكم بتاعة الفورم.

<form>
    <!-- Input elements like text fields, checkboxes, buttons go here -->
    ...
    Elements
    ...
</form>

أهم Attributes للـ <form>

1. action

الـ attribute ده مهم جدًا.

• وظيفته: بيحدد المكان (غالبًا ملف أو URL على الـ server) اللي المفروض بيانات الفورم تتبعتله لما اليوزر يدوس على زرار الـ submit.
• الملف ده بيكون فيه script (كود شغال على السيرفر) بيستقبل البيانات دي ويعالجها.

<!-- Form data will be sent to /action_page.php on submit -->
<form action="/action_page.php">
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <!-- Input type must be "submit" to trigger the action -->
    <input type="submit" value="Submit">
</form>

• ملحوظة: لو محطتش الـ action attribute، الفورم هتبعت البيانات لنفس الصفحة الحالية.

2. autocomplete

• وظيفته: بيحدد إذا كان المتصفح (browser) المفروض يقترح قيم لليوزر وهو بيملى الفورم بناءً على بيانات دخلها قبل كده (يعني يعمل autocomplete).
• ممكن تخليها شغالة (on) أو مقفولة (off) للفورم كلها أو لعناصر معينة جواها.
• بتشتغل مع الـ <form> ومع أنواع <input> زي: text, search, url, tel, email, password, datepickers, range, color.

<!-- Autocomplete is enabled for this entire form -->
<form action="#" autocomplete="on">
    <label for="email">Email:</label><br>
    <!-- But it can be turned off for specific inputs -->
    <input type="email" id="email" name="email" autocomplete="off"><br><br>
    <input type="submit">
</form>

عنصر الـ <label>

الـ <label> ده عنصر مهم جدًا بيستخدم مع عناصر الإدخال.

• ليه مهم؟
  1. الـ Accessibility (سهولة الوصول): للناس اللي بتستخدم screen-reader، الـ screen-reader بيقرا الـ label لما اليوزر يوصل للـ input المرتبط بيه، فبيعرف المفروض يدخل إيه.
  2. الـ Usability (سهولة الاستخدام): بيساعد اليوزرز اللي عندهم صعوبة يدوسوا على حاجات صغيرة (زي الـ radio buttons أو الـ checkboxes). لما اليوزر يدوس على الكلام اللي جوه الـ <label>، ده بيشغل أو بيلغي تحديد الـ input المرتبط بيه.
• إزاي نربطه بالـ <input>؟
  • بنستخدم الـ for attribute في الـ <label>.
  • قيمة الـ for لازم تكون نفس قيمة الـ id attribute بتاع الـ <input> اللي عايزين نربطه بيه.

<form>
    <!-- Clicking on "First name:" text will focus the input with id="fname" -->
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname"><br>
</form>

• ليه مستخدمش <p> بداله؟
  • مينفعش تحط كلام يوصف الـ input في الهوا كده. الـ <label> ليه معنى ووظيفة محددة.
  • زي ما مكتوب في ملاحظاتك: “لأن البراوزر هيقول عليك متخلف لو عملت كدا في وسط الفورم”. الـ <label> هو الطريقة الصح والمعيارية لربط نص بعنصر إدخال.

---

عشان تعرف أكتر عن أنواع الـ controls (عناصر الإدخال) المختلفة اللي بنستخدمها جوه الفورم والـ attributes بتاعتها، شوف المقال ده: Input Types HTML