إعلان
دورة تطوير التطبيقات باستخدام لغة JavaScript في هذه الدورة ستتعلم لغة جافا سكريبت, استخدام مكتبة React.js, بناء API الموقع بواسطة Node.js, تطوير تطبيق جوال باستخدام React Native, و في نهاية الدورة ستتعلم تطوير تطبيق محادثة شبيه بتطبيق WhatsApp. تعلم الآن
دورة تطوير واجهات المستخدم في هذه الدورة ستتعلم لغة HTML و لغة CSS و لغة JavaScript. من ناحية التطبيق العملي ستتعلم طريقة بناء واجهة متجر إلكتروني مكون من ست صفحات, تحويل خمسة تصاميم PSD إلى صفحات ويب, بناء واجهة مستخدم تشبه موقع يوتيوب, بناء لوحة تحكم إحترافية. تعلم الآن
تطوير تطبيقات باستخدام لغة بايثون في هذه الدورة ستتعلم أساسيات البرمجة بلغة بايثون وصولاً إلى التعامل مع أشهر أطر العمل (Flask و Django) و ستتعلم كيف تبني متجر إلكتروني يمكن للمستخدمين البيع و الشراء من خلاله. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة PHP في هذه الدورة ستتعلم لغة PHP من الصفر, استخدام إطار العمل Laravel بشرح مفصّل و عملي, كيفية تطوير شبكة اجتماعية تشبه Instagram, بناء API لتطبيق جوال وفق أسلوب RESTful, تطوير موقع إعلانات مبوبة, تطوير نظام إدارة محتوى CMS كامل. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة Ruby في هذه الدورة ستتعلم البرمجة بلغة Ruby إنطلاقاً من أبسط المفاهيم وحتى بناء تطبيق حقيقي, إستخدام إطار العمل Ruby on Rails بشرح مفصّل و عملي, بناء تطبيق حقيقي عبارة عن شبكة اجتماعية تشبه تويتر, تطوير مجتمع الكتروني يشبه حسوب I/O. تعلم الآن
دورة علوم الحاسوب هذه الدورة معدة لتكون مدخل لعلوم الحاسوب و لغات البرمجة حيث ستتعرف فيها على أنظمة التشغيل و ستتعمق في نظام لينكس و في كيفية التعامل معه من خلال موجه الأوامر, بالإضافة إلى قواعد البيانات و أساسيات الشبكات و الخوادم و مبادئ الحماية والأمان في الويب. تعلم الآن

    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 {
    	display: block;
    	margin-top: 0em;
    }
    	
    إعلان

    Eqla3Tech.com

    شروحات مكتوبة حول لغات البرمجة و تقنية المعلومات باللغة العربية مقدمة من إقلاع تك.

    لغة جافا لغة ++C قواعد البيانات نظام ويندوز نظام لينكس الشبكات تقنية المعلومات

    الدورات

    أدوات مساعدة

    الأقسام

    دورات
    مقالات أسئلة مشاريع كتب