HTMLالوسم <form>

تعريفه

نستخدم الوسم <form> على هذا النحو <form> </form> لعرض نموذج في الصفحة بهدف استقبال بيانات من المستخدم.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <form>.

خصائصه

نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.

الخاصية accept-charset

يمكن إضافتها للوسم لتحديد نوع ترميز البيانات التي سيتم إرسالها من خلاله.
ملاحظة: في حال لم يتم تحديد نوع الترميز سيتم إعتماد الترميز الإفتراضي المحدد في الصفحة.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية action

يمكن إضافتها له لتحديد الرابط الذي سيتم إرسال البيانات المدخلة في النموذج إليه.
يجب تمرير الرابط الذي سيتم إرسال البيانات المدخلة في النموذج له كقيمة لها.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية autocomplete

في حال أردت جعل النموذج يظهر إقتراحات للمستخدم حين يقوم بملئ مربعات النصوص الموضوعة فيه يمكنك إضافة الخاصية autocomplete له و إعطاءها القيمة on في حال أردت إظهار إقتراحات و إعطاءها القيمة off إن لم ترد ذلك.
ملاحظة: الإكمال التلقائي يكون مفعلاً بشكل إفتراضي، أي يكون محدد على هذا النحو <form autocomplete="on"> حتى لو لم تحدد ذلك بنفسك.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية enctype

يمكن إضافتها له لتحديد نوع البيانات التي سيتم إرسالها من النموذج.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية enctype لتحديد نوع البيانات التي سيتم إرسالها.

الخاصية method

في حال كان الوسم نوعه submit يمكن إضافتها له لتحديد طريقة إرسال البيانات من النموذج إلى الموقع.
يجب تمرير القيمة get أو القيمة post لهذه الخاصية لتحديد الطريقة التي سيتم فيها إرسال البيانات.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية name

يمكن إضافتها للوسم بهدف إعطائه إسم حتى يتم إرساله مع البيانات التي يتم إرسالها في النموذج.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية novalidate

يمكن إضافتها له لإعلام المتصفح بأن يرسل بيانات النموذج كما هي حتى و إن كانت البيانات المدخلة في حقول النموذج أنواعها غير صحيحة و المتصفح يظهر تحذيرات تفيد بأنها كذلك.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية rel

يمكن إضافتها للوسم بهدف تحديد ما هي طبيعة العلاقة بين الرابط الحالي و الرابط الذي يتم توجيه المستخدم إليه و هذا الأمر مهم جداً بالنسبة لمحركات البحث.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية rel لتحدد ما هي طبيعة العلاقة بين الرابط الحالي و الرابط الذي يتم توجيه المستخدم إليه.

الخاصية target

يمكن إضافتها له لتحديد أين سيتم فتح الصفحة التي ستتلقى البيانات المرسلة من النموذج.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية target لتحدد أين سيتم فتح الرابط الذي يتم توجيه المستخدم إليه.

إستخدامه

في المثال التالي قمنا بإضافة نموذج تسجيل دخول مع تحديد أن بيانات النموذج سيتم إرسالها لصفحة أخرى في موقع هرمش قمنا بتجهيزها مسبقاً لتلقي بيانات المستخدم بأسلوب post و من ثم عرضها كما هي.

<form action="https://harmash.com/html/html-tags/resources/view-data" method="post">
    Username<br>
    <input type="text" name="username"><br><br>
    Password<br>
    <input type="password" name="password"><br><br>
    <input type="submit" value="Login">
</form>

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

form {
    display: block;
    margin-top: 0em;
}