❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
عودة للدرس❯ ❮عودة للدرس

HTMLالوسم <form>

  • تعريفه
  • دعم المتصفحات
  • خصائصه
  • إستخدامه
  • تصميمه الإفتراضي

تعريفه

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

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

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم

خصائصه

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


الخاصية accept-charset

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

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم


الخاصية action

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

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم


الخاصية autocomplete

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

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم


الخاصية enctype

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

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم

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

القيمة معناها
application/x-www-form-urlencoded هذه القيمة الإفتراضية التي توضع عنك في حال لم تستخدم هذه الخاصية.
multipart/form-data في حال كان سيتم إرسال ملف (صورة مثلاً) من خلال النموذج.
text/plain في حال كان سيتم إرسال نص عادي من خلال النموذج بهدف الإختبار و هذا أمر لا يجب فعله عند إرسال بيانات حقيقية.


الخاصية method

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

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم


الخاصية name

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

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم


الخاصية novalidate

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

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
10 12 4 15 10.1 37 18 4 14 10.3 1.0


الخاصية rel

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

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم

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

القيمة معناها
external للإشارة إلى أن الرابط الموضوع ليس تابعاً للموقع الموجودة فيه الصفحة.
help للإشارة إلى أن الرابط الموضوع يقدم مساعدة.
license للإشارة إلى أن الرابط الموضوع يوضح رخصة المحتوى المعروض في الصفحة.
next للإشارة إلى أن الرابط الموضوع هو الرابط التالي الذي يجب الإنتقال إليه لمتابعة أمر ما.
nofollow للإشارة إلى أن الرابط الموضوع ليس مكملاً للموقع و بالتالي لا يعتبر جزء منه, و بشكل عام إذا كنت تستخدم إعلانات أدسينس فشركة جوجل تفرض إضافة هذا القيمة لكل رابط دعائي موضوع في الموقع حتى لا يتعارض مع سياسة الإعلانات الموضوعة من قبل أدسينس.
noreferrer لمنع المتصفح من إرسال أي معلومات مع طلب المستخدم مما يعني أن المستخدم سيكون مجهول بالنسبة للموقع الذي يتم نقله إليه حين ينقر على الرابط.
noopener لمنع النافذة التي تم فتحها في المتصفح بواسطة الكود window.open() عند النقر على الرابط من إمكانية تنفيذ أي كود جافا سكربت ضار من شأنه الوصول لمعلومات المستخدم الحساسة التي كان قد أدخلها في الصفحة السابقة.
prev للإشارة إلى أن الرابط الموضوع هو الرابط التالي الذي يجب الإنتقال إليه لمتابعة أمر ما.
search لإظهار زر للبحث مبني على نتائج بحث سابقة تم إجراؤها بواسطة المتصفح.
لا ننصح بهذا الأمر لأنه يتطلب ذكر معلومات خاصة تساعد في البحث في كل صفحة يتم إنشاؤها في الموقع حتى ينجح ذلك بالإضافة إلى أن المستخدم في العادة يفضل أن يستخدم مربع بحث عادي موجود في الموقع أو يستخدم بحث جوجل.


الخاصية target

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

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم

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

القيمة معناها
_self في حال أردت أن يتم فتح محتوى الرابط في نفس الصفحة المفتوحة حالياً (هذا الخيار الإفتراضي).
_blank في حال أردت أن يتم فتح تبويب جديد في المتصفح و إظهار محتوى الرابط فيه.
_top في حال أردت يتم فتح محتوى الرابط في نفس الصفحة مع إزالة أي صفحات متداخلة موضوعة في الصفحة الحالية.
_parent في حال أردت يتم فتح محتوى الرابط مكان الصفحة الموجودة فيها الصفحة الحالية.

إستخدامه

في المثال التالي قمنا بإضافة نموذج تسجيل دخول مع تحديد أن بيانات النموذج سيتم إرسالها لصفحة أخرى في موقع هرمش قمنا بتجهيزها مسبقاً لتلقي بيانات المستخدم بأسلوب 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 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;
}
form { display: block; margin-top: 0em; }
عودة للدرس❯ ❮عودة للدرس