أهم خصائص عنصر الفورم في HTML مع الأمثلة
في هذا الدرس من كورس تعلم HTML من الصفر، سنتعرف على أهم الخصائص (Form Attributes) التي يمكن استخدامها مع عنصر <form>، والتي تحدد طريقة عمل النموذج وسلوك إرسال البيانات.
مقدمة عن عنصر الفورم
عنصر <form> في HTML هو الوسيلة التي تتيح للمستخدم إدخال البيانات وإرسالها إلى الخادم (Server) لمعالجتها. يمكن أن يكون ذلك لإرسال رسالة، أو تسجيل دخول، أو البحث في الموقع، أو أي غرض آخر. لكن لكي يعمل هذا العنصر بالشكل المطلوب، يجب تحديد مجموعة من الخصائص (Attributes) التي تتحكم في طريقة الإرسال والمكان الذي سيتم الإرسال إليه.
1- الخاصية action
تحدد خاصية action المسار أو الملف الذي سيتم إرسال بيانات النموذج إليه عند النقر على زر الإرسال (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="submit" value="Submit">
</form>
في المثال أعلاه، عند النقر على زر Submit سيتم إرسال البيانات
إلى ملف action_page.php الموجود على الخادم. إذا لم يتم تحديد
الخاصية action، فسيتم إرسال البيانات إلى نفس الصفحة الحالية.
2- الخاصية target
تحدد خاصية target مكان عرض النتيجة بعد إرسال النموذج. يمكن أن تأخذ إحدى القيم التالية:
_blank: فتح النتيجة في تبويب أو نافذة جديدة._self: عرض النتيجة في نفس الصفحة (القيمة الافتراضية)._parent: عرض النتيجة في الإطار الأب._top: عرض النتيجة في كامل نافذة المتصفح.framename: عرض النتيجة داخل iframe باسم معين.
مثال عملي:
<form action="/action_page.php" target="_blank">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<input type="submit" value="Submit">
</form>3- الخاصية method
تحدد خاصية method طريقة إرسال البيانات إلى الخادم، وهناك طريقتان رئيسيتان:
طريقة GET
- يتم إرسال البيانات في شريط العنوان (URL) على شكل أزواج اسم/قيمة.
- لا يجب استخدامها للبيانات الحساسة لأنها تظهر في الرابط.
- محدودة الطول (حوالي 2048 حرف).
- مناسبة للبحث أو البيانات التي يمكن للمستخدم حفظها في المفضلة.
<form action="/action_page.php" method="get">
<label for="search">بحث:</label>
<input type="text" id="search" name="search">
<input type="submit" value="Search">
</form>طريقة POST
- يتم إرسال البيانات في جسم الطلب (HTTP Request Body).
- أكثر أمانًا للبيانات الحساسة.
- لا يوجد حد أقصى للحجم.
- لا يمكن حفظ النتيجة في المفضلة.
<form action="/action_page.php" method="post">
<label for="username">اسم المستخدم:</label>
<input type="text" id="username" name="username"><br>
<label for="password">كلمة المرور:</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="Login">
</form>ملاحظة: استخدم طريقة POST عند إرسال بيانات حساسة مثل كلمات المرور أو المعلومات الشخصية.
4- الخاصية autocomplete
تحدد خاصية autocomplete ما إذا كان المتصفح سيكمل القيم تلقائيًا استنادًا إلى ما أدخله المستخدم مسبقًا.
on: التكميل التلقائي مفعّل.off: التكميل التلقائي معطّل.
<form action="/action_page.php" autocomplete="on">
<label for="email">البريد الإلكتروني:</label>
<input type="email" id="email" name="email"><br>
<label for="phone">رقم الهاتف:</label>
<input type="tel" id="phone" name="phone"><br>
<input type="submit" value="إرسال">
</form>5- الخاصية novalidate
خاصية novalidate هي خاصية من نوع Boolean Attribute، أي مجرد وجودها يعني تفعيلها. وظيفتها إلغاء التحقق التلقائي من البيانات قبل الإرسال.
<form action="/action_page.php" novalidate>
<label for="username">اسم المستخدم:</label>
<input type="text" id="username" name="username" required><br>
<input type="submit" value="إرسال بدون تحقق">
</form>في المثال أعلاه، حتى لو كان الحقل مطلوب (Required)، فلن يقوم المتصفح بالتحقق قبل الإرسال.
الخاتمة
تعرفنا في هذا المقال على أهم خصائص عنصر الفورم <form> في HTML مع أمثلة عملية لكل خاصية، بدءًا من action لتحديد مسار الإرسال، مرورًا بـ target لتحديد مكان عرض النتيجة، وmethod لتحديد طريقة الإرسال، وautocomplete للتحكم في الإكمال التلقائي، وأخيرًا novalidate لإلغاء التحقق.
باستخدام هذه الخصائص، يمكنك تصميم نماذج احترافية تناسب جميع احتياجات موقعك، سواء كانت للتسجيل، أو البحث، أو جمع بيانات المستخدمين.