في المثال التالي قمنا بإضافة ملف صوتي في الصفحة مع إظهار أزرار التحكم به.
تحديد حجم الإطار
الإطار الذي تعرضه في الصفحة يتم عرضه في مساحة صغيرة جداً فيها ما لم تحدد الحجم بنفسك كما رأيت في المثال السابق.
في العادة حجم الإطار نقوم بتحديده بواسطة كود CSS لأنها توفر طرق سهلة و أفضل لذلك و لكن بما أننا ندرس لغة HTML سنركز على الخصائص التي توفرها لنا لغة HTML لتحديد حجم الإطار:
-
width
نستخدمها لتحديد عرض الإطار الذي سيتم عرضه بالبكسل.-
height
نستخدمها لتحديد طول الإطار الذي سيتم عرضه بالبكسل.-
معلومة
العرض يمكنك تحديده بنسبة مئوية فمثلاً يمكنك جعل عرض الإطار
100% حتى يساوي عرض كامل الصفحة.
الطول في حال وضعته 100% لن تلاحظ أي فرق و سبب ذلك أنك بحاجة لجعل طول الصفحة الأساسي هو 100% حتى يعمل.
لا تشغل بالك بموضوع طول الإطار لأنك ستتعلم كيف تتلاعب فيه بكل سهولة حين تدرس لغة CSS.
في المثال التالي قمنا بعرض إطار في الصفحة مع تحديد أن عرضه 400 بكسل و طوله 400 بكسل و فيه سيتم عرض محتوى الصفحة الأولى في الدورة.
المثال الأول
<iframe src="https://harmash.com/tutorials/html" width="400" height="400"></iframe> جرب الكود
في المثال التالي قمنا بعرض إطار في الصفحة مع تحديد أن عرضه 100% و طوله 400 بكسل و فيه سيتم عرض محتوى الصفحة الأولى في الدورة.
المثال الثاني
<iframe src="https://harmash.com/tutorials/html" width="100%" height="400"></iframe> جرب الكود
إضافة عنوان للإطار
العنوان الذي نضعه للإطار ليس الهدف منه أن يتم عرضه في الصفحة, أي لا يتم عرضه في الصفحة أمام المستخدم.
أهمية العنوان الذي نضعه للإطار هو أنه في حال كان المستخدم كفيف و يعتمد على قارئ الشاشة ( Screen Reader ) حتى يقرأ له محتوى الصفحة, فإن القارئ سيقرأ العنوان الموضوع في الإطار و هكذا سيعلم المستخدم أنه يوجد إطار في الصفحة.
لوضع عنوان للإطار قم بإضافة الخاصية
title للوسم <iframe> و تمرير العنوان لها كقيمة على هذا النحو <iframe title="text">.
في المثال التالي قمنا بوضع عنوان للإطار الذي أضفناه في الصفحة مع تحديد حجم الإطار و رابط الصفحة التي سيتم عرض محتواها فيه.
مثال
<iframe src="https://harmash.com/tutorials/html" width="100%" height="400" title="First lesson in the HTML tutorial"></iframe> جرب الكود
عرض فيديو من يوتيوب في الصفحة
أي فيديو تجده في يوتيوب يمكنك عرضه بكل سهولة بداخل الصفحة بدون الحاجة لكتابة أي كود بنفسك حيث أن يوتيوب يوفر لك خيار إسمه تضمين ( Embed ) بمجرد النقر عليه يعطيك كود إطار يعرض الفيديو.
معلومة
لتجد خيار التضمين ( Embed ) أنقر على زر المشاركة ( Share ) الذي تجده تحت الفيديو و سيظهر لك.
بعدها أنقر عليه حتى يعطيك الكود الذي يمكنك نسخه و وضعه في الصفحة.
في المثال التالي قمنا بوضع كود حصلنا عليه بعد النقر على زر التضمين ( Embed ) لفيديو موجود في يوتيوب.
مثال
<iframe width="560" height="315" src="https://www.youtube.com/embed/bfaPnlYE8Jo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> جرب الكود
مفهوم النموذج
النموذج ( Form ) في العادة عبارة عن مجموعة عناصر توضع في الصفحة بهدف جعل المستخدم يدخل بيانات فيها.
من الأمثلة الشائعة التي نتعامل فيها مع نماذج, هي صفحات تسجيل الدخول, صفحات إنشاء حساب جديد, إضافة تعليق, إضافة منشور إلخ..
النموذج بحد ذاته ليس شيئاً يتم عرضه في الصفحة بل هو بمثابة حاوية للوسوم التي نضعها فيه.
الفكرة الأساسية من النموذج هي تجميع المعلومات التي يدخلها المستخدم في العناصر الموضوعة فيه و إرسالها دفعة واحدة للمكان الذي سنحفظها فيه.
في هذا الدرس سنتعرف على الخصائص التي يمكن وضعها في النموذج و دور كل منها.
معلومة تقنية
ترتيب العناصر التي نريد من المستخدم تعبئة المعلومات فيها بداخل نموذج له عدة فوائد ستتعرف عليها مستقبلاً حين تتعلم لغة جافا سكريبت حيث ستقوم بالتشييك على كل المعلومات المدخلة في النموذج قبل إرسالها للمكان الذي سيتم حفظها.كمثال بسيط, ستقوم بإعلام المستخدم الذي يحاول إنشاء حساب جديد أن كلمة المرور التي أدخلها غير مقبولة في حال وجدت أنه أدخل 5 احرف فقط و إعلامه بأنها يجب أن تتألف من 8 أحرف على الأقل.
إضافة نموذج في الصفحة
بشكل عام نستخدم الوسم
<form> على النحو التالي لإضافة نموذج في الصفحة.
<form> <!-- هنا يجب إضافة كل العناصر التابعة للنموذج --></form>
في المثال التالي قمنا بإضافة نموذج يتضمن مربع نصي لإدخال إسم المستخدم و مربع نصي لإدخال كلمة المرور و زر لإرسال المعلومات التي تم إدخالها للموقع.
ملاحظة: هذا مجرد تصميم المراد منه إعطاءك فكرة عامة كيف ترتب العناصر بداخل النموذج.
مثال
<form> Username<br> <input type="text"><br><br> Password<br> <input type="password"><br><br> <input type="button" value="Login"></form> جرب الكود
إضافة زر لإرسال محتوى النموذج
كل نموذج تقوم بإنشائه يجب أن تضع فيه زر واحد نوعه
submit على النحو التالي <input type="submit"> بهدف إعلام المتصفح أن هذا الزر مخصص لإرسال البيانات المدخلة في النموذج إلى الموقع.
معلومة تقنية
إفتراضياً, عند النقر على زر نوعه
submit يتوقع المتصفح أنه يجب عرض صفحة جديدة للمستخدم نسبةً للبيانات التي تم تمريرها للنموذج.
في حال لم يتم تحديد الصفحة التي سيتم نقل المستخدم إليها فإن المتصفح سيقوم بفتح الصفحة الحالية من جديد في الصفحة التي يوجد فيها النموذج.
طريقة تحديد الصفحة التي سيتم إرسال البيانات لها سنتعلمها بعد قليل و لكن الآن ركز فقط على فكرة زر إرسال المحتوى.
في المثال التالي قمنا بإضافة زر لإرسال بيانات النموذج مع الإشارة إلى أننا قمنا بإظهار الكلمة
Login عليه.
ملاحظة: عند النقر على زر الإرسال ستلاحظ أن المتصفح سيقوم بإعادة عرض كامل الصفحة مكان ظهور الصفحة الحالية و سبب ذلك أننا لم نحدد الصفحة التي نريد الإنتقال إليها عند إرسال بيانات النموذج.
مثال
<form> Username<br> <input type="text"><br><br> Password<br> <input type="password"><br><br> <input type="submit" value="Login"></form> جرب الكود
تحديد أسلوب إرسال بيانات النموذج
عند إرسال بيانات النموذج, يجب تحديد الأسلوب الذي سيتم إعتماده لنقل البيانات و هنا يوجد أسلوبين أساسيين هما
post و get.
لتحديد أسلوب إرسال البيانات في النموذج نضيف الخاصية method و نمرر لها إما القيمة get و إما القيمة post كالتالي.
<!-- get إذا كنا سنستخدم أسلوب --><form method="get"><!-- post إذا كنا سنستخدم أسلوب --><form method="post">
معلومات حول أسلوب get
-
- البيانات المدخلة في النموذج يتم إضافتها لرابط الصفحة التي سيتم إرسالها لها.
-
- رابط الصفحة محدود بعدد الأحرف حيث لا يمكن أن يتجاوز حجم الرابط
2048
حرفاً. -
- بما أن كل البيانات التي يتم إرسالها تكون مرئية في الرابط فإن هذا الأسلوب لا يصلح في حال كانت البيانات المرسلة حساسة مثل كلمة مرور المستخدم.
-
- هذا الأسلوب ممتاز في حال كنت تريد إتاحة حفظ الصفحة كمرجع ( Bookmark ).
-
معلومات حول أسلوب post
-
- البيانات المدخلة في النموذج يتم إرسالها بشكل لا يراه المستخدم العادي.
-
- يمكنك إرسال ما شئت من البيانات بدون القلق حول حجم البيانات التي سيتم إرسالها.
-
- هذا الأسلوب جيد في حال كانت البيانات المرسلة حساسة مثل كلمة مرور المستخدم أو معلومات بطاقته الإئتمانية.
-
- هذا الأسلوب غير مفيد في حال كنت تريد إتاحة حفظ الصفحة كمرجع ( Bookmark ).
-
ملاحظة
كمصمم صفحات ( Web Designer ) لا يهمك إطلاقاً معرفة الفرق بين أساليب إرسال البيانات لأن هذا الأمر يقع على عاتق مطور الموقع ( Web Developer ) الذي يتولى برمجته و بالطبع ستفهم ذلك بدقة أكثر حين تبدأ مستقبلاً بتعلم برمجة المواقع.
إعطاء أسماء للوسوم الموضوعة في النموذج
أي وسم موضوع في النموذج بهدف أن يدخل المستخدم بياناته فيه أو أن يختار بياناته منه يجب أن يملك الخاصية
name مع الإشارة إلى أنه يجب إعطاء كل وسم قيمة مختلفة للخاصية name كالتالي.
مثال
<form> <!-- "username" و أعطيناها القيمة name هذا الوسم أضفنا فيه الخاصية --> <input type="text" name="username"> <!-- "password" و أعطيناها القيمة name هذا الوسم أضفنا فيه الخاصية --> <input type="password" name="password"> <!-- لأننا لن ندخل قيمة فيه name هذا الوسم لا يحتاج أن نضيف فيه الخاصية --> <input type="submit"></form>
الكلمة
name المعطاة للوسوم لا تظهر أمام المستخدم و لكنها تجعل المتصفح يقوم بتخزين ما يدخله المستخدم في المربع الأول بإسم username و ما يدخله في المربع الثاني بإسم password بحيث تصبح كل معلومة تم إدخالها تملك قيمة مفتاحية تميزها عن غيرها.
هنا إذا إفترضنا أن المستخدم أدخل القيمة
Mhamad في أول مربع نص و القيمة 1234 في ثاني مربع فإنه سيخزّن القيم برمجياً على هذا الشكل البسيط.
[ username: "Mhamad", password: "1234"]
معلومة تقنية
عندما يتم إعطاء الوسم إسم بواسطة الخاصية
name فإنك تجد المتصفح يصبح قادر على عرض إقتراحات لك عندما تقوم بملئه.
كمثال بسيط, عندما تحاول تسجيل الدخول في أي موقع تجده يظهر لك المعلومات السابقة التي استخدمتها لتسجيل الدخول فيه في حال أردت اختيارها نفسها.
تحديد أين سيتم إرسال محتوى النموذج
لتحديد أين سيتم إرسال محتوى النموذج عند النقر على الزر الذي نوعه
submit نقوم بإضافة الخاصية action و تمرير رابط الموقع الذي سيتلقى البيانات منها.
معلومة تقنية
الموقع يمكنه أن يعرض البيانات كما هي بداخل صفحة أخرى و يمكنه إجراء تعديل عليها و حفظها في قاعدة بيانات إلخ..
هذه الأمور ستتعلمها حين تتعلم كيفية تطوير موقع كامل و ليس الآن لأنك حالياً تتعلم الجزء الخاص بتصميم الصفحات فقط.
في المثال التالي قمنا بتحديد أن بيانات النموذج سيتم إرسالها لصفحة أخرى في موقع هرمش قمنا بتجهيزها مسبقاً لتلقي بيانات المستخدم بأسلوب
post و من ثم عرضها كما هي.
مثال
<form action="/tryit/submitted" 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> جرب الكود
تفعيل الإكمال التلقائي في النموذج
في حال أردت جعل النموذج يظهر إقتراحات للمستخدم حين يقوم بملئ مربعات النصوص الموضوعة فيه يمكنك إضافة الخاصية
autocomplete في الوسم <form> و إعطاءها القيمة on في حال أردت إظهار إقتراحات و إعطاءها القيمة off إن لم ترد ذلك.
إفتراضياً, الإكمال التلقائي يكون مفعلاً بشكل إفتراضي, أي يكون محدد على هذا النحو
<form autocomplete="on"> حتى لو لم تحدد ذلك بنفسك.
في المثال التالي قمنا بتفعيل الإكمال التلقائي في النموذج.
إذاَ هنا ستلاحظ عند تعبئة النموذج أن المتصفح سيقترح عليك اختيار معلومات قمت أنت في السابق بإدخالها في مربعات النصوص.
المثال الأول
<form autocomplete="on"> ...</form> جرب الكود
في المثال التالي قمنا بإيقاف الإكمال التلقائي في النموذج.
إذاَ هنا ستلاحظ عند تعبئة النموذج أن المتصفح لن يقترح عليك اختيار أي معلومات قمت سابقاً بإدخالها.
المثال الثاني
<form autocomplete="off"> ...</form> جرب الكود
إلغاء التشييك على القيم المدخلة في النموذج
إفتراضياً, يقوم النموذج بالتأكد من أنواع القيم المدخلة فيه حين ينقر المستخدم على زر الإرسال قبل أن يقوم بإرسالها.
في حال وجدها صحيحة فإنه يقوم بإرسالها, و في حال لم تكن كذلك فإنه يظهر لك رسالة يخبرك فيها بالأخطاء التي يجب أن تصححها حتى تتمكن من إرسال البيانات.
الآن, في حال أردت إلغاء التشييك التلقائي الذي يجريه المتصفح على القيم المدخلة في النموذج قبل إرسالها يمكنك إضافة الخاصية
novalidate للوسم <form> على هذا النحو <form novalidate>.
ملاحظة: الخاصية
novalidate تعمل على أغلب المتصفحات المشهورة باستثناء متصفح Safari.
في المثال التالي قمنا بإلغاء التشييك التلقائي على القيم المدخلة في النموذج.
هنا قمنا بإضافة الخاصية
novalidate للوسم <form> لجعل المتصفح لا يهتم بما إن كان البريد الإلكتروني الذي تم إدخاله صحيحاً أم لا.
مثال
<form novalidate> ...</form> جرب الكود
تحديد أين سيتم فتح الصفحة التي تستقبل بيانات النموذج
إفتراضياً, عند النقر على زر إرسال البيانات فإنه يتم فتح الصفحة التي تستقبل البيانات مكان الصفحة الحالية كما لاحظنا في الأمثلة السابقة.
في حال أردت تحديد أين سيتم فتح الصفحة التي تستقبل البيانات يجب أن تضيف الخاصية
target في الوسم <form> و إعطائها إحدى القيم التالية:
-
_self
في حال أردت أن يتم فتح الصفحة الجديدة مكان الصفحة المفتوحة حالياً (هذا الخيار الإفتراضي).-
_blank
في حال أردت أن يتم فتح تبويب جديد في المتصفح و فتح الصفحة فيه.-
_top
في حال أردت أن يتم فتح الصفحة الجديدة في نفس الصفحة الحالية مع إزالة أي صفحات متداخلة موضوعة فيها.-
_parent
في حال أردت أن يتم فتح الصفحة الجديدة مكان الصفحة الموجودة فيها الصفحة الحالية.-
framename
في حال أردت أن يتم فتح الصفحة الجديدة بداخل إطار ( <iframe> ) موجود في نفس الصفحة.-
في المثال التالي قمنا بإضافة نموذج عند إرسال البيانات لصفحة أخرى يقوم بفتح الصفحة الثانية في تبويب جديد.
المثال الأول
<form> ...</form> جرب الكود
في المثال التالي قمنا بإضافة نموذج عند إرسال البيانات لصفحة أخرى يقوم بفتح الصفحة الثانية بداخل إطار موضوع في نفس الصفحة إسمه
my_iframe.
المثال الثاني
<form target="my_iframe"> ...</form><iframe name="my_iframe"></iframe> جرب الكود
أهم الوسوم التي تستخدم مع النماذج
هناك وسوم عديدة يمكن إضافتها في النماذج لجعل المستخدم يدخل المعلومات التي تريدها منه أو لجعله يختار إحدى المعلومات التي قمت بتجهيزها مسبقاً له و مستقبلاً ستتعرف على مكتبات جاهزة يمكنك استخدامها للحصول على وسوم رائعة يمكن إضافتها في النماذج.
فيما يلي ذكرنا أهم الوسوم التي عليك معرفتها:
-
<label>
يستخدم لوضع إسم خاص للعنصر الموضوع في النموذج.-
<button>
يستخدم للحصول على زر.-
<textarea>
يستخدم للحصول على مربع نص يتألف من أكثر من سطر.-
<select>
يستخدم للحصول على قائمة منسدلة يجب إختيار أحد قيمها.-
<datalist>
يستخدم للحصول على قائمة منسدلة يمكن إختيار أحد قيمها.-
<fieldset>
يستخدم لإضافة حدود للنموذج مما يظهره بشكل أجمل.-
<input>
يعتبر من أهم الوسوم حيث يمكن استخدامه للحصول على أشكال عديدة.-
أشكال الوسم <input>
بالنسبة للأشكال التي يمكن الحصول عليها بواسطة هذا الوسم, فيجب أن تضيف الخاصية
type له و إعطاؤه إحدى القيم المعرفة مسبقاً لتحديد الشكل الذي تريد الحصول عليه. هذه تعتبر أهم الأشكال التي يمكن الحصول عليها لأنها تعمل على جميع المتصفحات:
-
<input type="text">
للحصول على مربع نص عادي و هذا هو النوع الإفتراضي له.-
<input type="password">
للحصول على مربع نص مخصص لإدخال كلمة المرور.-
<input type="number">
للحصول على مربع نص مخصص لإدخال الرقام.-
<input type="email">
للحصول على مربع نص مخصص لإدخال بريد إلكتروني.-
<input type="button">
للحصول على زر عادي.-
<input type="submit">
للحصول على زر خاص لإرسال بيانات النموذج.-
<input type="reset">
للحصول على زر خاص لإعادة القيم الأولية لجميع عناصر النموذج.-
<input type="file">
للحصول على زر خاص لجعل المستخدم يختار ملف في جهازه.-
<input type="range">
للحصول على شريط يمكن تحريكه لاختيار قيمة عددية.-
<input type="checkbox">
للحصول على زر مربع الشكل يمكن اختياره أو عدم إختياره.-
<input type="radio">
للحصول على زر دائري الشكل يمكن إختياره أو عدم اختياره.-
ستتعلم كيفية التعامل مع هذه الوسوم في دروس لاحقة و نود الإشارة إلى أن بعض هذه الوسوم يمكن إضافة وسوم أخرى بداخلها أيضاً.
أهمية عنونة العناصر
في حال أضفت نص عادي كإسم لأي عنصر موضوع في النموذج فإن هذا الأسلوب لا يعتبر أفضل طريقة لفعل ذلك لأن المتصفح لن يعرف أنهما مرتبطين ببعضهما.
طريقة وضع أسماء لعناصر النموذج كما فعلنا في الدرس السابق لا تُعتبر أفضل طريقة لفعل ذلك و ليست الطريقة التي يجب إتباعها لفعل ذلك.
في المثال التالي الطريقة التي قمنا فيها بوضع عنوان لمربع النص ليست الطريقة التي يجب إتباعها رغم أنها تظهر بشكل عادي جداً في المتصفح.
المشكلة في هذه الطريقة هي أن المتصفح لا يعرف أن النص
Username مرتبط بمربع النص الموضوع بعده و بالتالي في حال قام المستخدم بالنقر على النص فإنه لن يعرف أنه يريد البدء بالكتابة بداخل مربع النص الخاص به و بالتالي سيضطر المستخدم بالنقر بداخل مربع النص حتى يتمكن من الكتابة فيه.
مثال
Username<br><input type="text"> جرب الكود
الطريقة الصحيحة لعنونة العناصر
أي عنصر في النموذج تريد وضع نص خاص له سواء بجانبه أو فوقه يفترض أن تضعه بداخل
<label> </label>.
عند إضافة النص بداخل
<label> و ربطه بالعنصر الموضوع من أجله يصبح تعامل المتصفح مع هذا العنصر أفضل حيث أنه في حال نقر المستخدم على النص الموضوع للعنصر فإنه سيتم إعتبار أنه نقر على العنصر نفسه و بالتالي يمكنه مباشرةً البدء بالكتابة فيه.
على الحاسوب قد لا تجد لهذا الأمر أي أهمية لأنك تستخدم الماوس للنقر على ما تريد و لكن على الهواتف المحمولة التي تعمل باللمس سيكون من الصعب جداً على المستخدم النقر بإصبعه بداخل مربع النص حتى يبدأ بالكتابة فيه و على الأغلب سيضطر للمحاولة عدة مرات حتى ينقر بداخله.
من ناحية أخرى فإن هذا الأمر مفيد جداً حين تتعلم كيفية تعديل تصميم الصفحات بواسطة كود CSS لأن ذلك سيمكنك من إضافة مؤثرات جميلة جداً على العناصر الموضوعة في النموذج حين يتفاعل المستخدم معها.
الآن, لربط أي عنصر موضوع في النموذج بإسم خاص به يجب:
-
- إضافة الخاصية
id
للعنصر و إعطاؤها إسم خاص للعنصر. -
- إضافة الخاصية
for
في الوسم <label>
و تمرير نفس قيمة الخاصية id
التي وضعناها للعنصر لها. -
في المثال التالي قمنا بإضافة مربع نص
<input type="text"> مربوط بإسم <label> في النموذج.
مثال
<label for="username">Username</label><br><input type="text" id="username"> جرب الكود
إضافة مربع نص
لإضافة مربع نص في الصفحة يمكنك استخدام الوسم
<input> مع الإشارة إلى أن هذا الوسم يمكن استخدامه لإضافة الكثير من الأشياء الأخرى و التي سنتعرف عليها في دروس لاحقة.
يمكنك إضافة الخصائص التالية لهذا الوسم:
-
id
نضيفها له في حال أردنا ربطه بوسم <label>.-
name
نضيفها له حتى يتم إرسال القيمة الموضوعة فيه عند النقر على زر الإرسال.-
type
لتحديد النوع أو الشكل الذي سيتم عرضه مكان الوسم في الصفحة.-
value
لإعطائه قيمة أولية.-
readonly
لجعل قيمته غير قابلة للتغيير.-
disabled
لجعله يظهر بلون باهت و قيمته غير قابلة للنسخ أو التغيير.-
size
لتحديد كم حرف تريد أن يظهر بداخل المربع (كأنك تحدد حجمه نسبةً لعدد الأحرف التي يمكن إدخالها فيه).-
maxlength
لتحديد أقصى عدد أحرف يمكن أن إدخلها فيه.-
placeholder
لإظهار تلميح بداخل مربع النص يظهر في حال كان فارغاً.-
required
يمكنك إضافتها له لإجبار المستخدم على إدخال قيمة في مربع النص في حال تركه فارغاً و نقر على زر إرسال البيانات.-
تحديد نوع مربع النص
بالنسبة لنوع مربع النص الذي نحدده بواسطة الخاصية
type فإن الأشكال التالية هي الأكثر أهمية:
-
<input type="text">
للحصول على مربع نص عادي و هذا هو النوع الإفتراضي له.-
<input type="password">
للحصول على مربع نص مخصص لإدخال كلمة المرور.-
<input type="number">
للحصول على مربع نص مخصص لإدخال الرقام.-
<input type="email">
للحصول على مربع نص مخصص لإدخال بريد إلكتروني.-
إفتراضياً في حال لم تحدد شكل الوسم
<input> سيتم إعتبار أنك تريد عرض مربع نص عادي <input type="text">.
في المثال التالي قمنا بعرض مربع نص بدون تحديد نوعه.
المثال الأول
<label for="username">Username</label><br><input id="username" name="username"> جرب الكود
في المثال التالي قمنا بعرض مربع نص مخصص لإدخال بريد إلكتروني و مربع نص مخصص لإدخال كلمة مرور.
ملاحظة: هنا في حال لم يدخل المستخدم نص يشبه البريد الإلكتروني فإنه لن يتمكن من النقر على زر إرسال البيانات .
المثال الثاني
<label for="email">Email</label><br><input type="email" id="email" name="email"><br><br><label for="password">Password</label><br><input type="password" id="password" name="password"> جرب الكود
في المثال التالي قمنا بعرض مربع نص مخصص لإدخال رقم.
ملاحظة: هنا يسمح للمستخدم بإدخال أعداد فقط بداخل مربع النص.
المثال الثالث
<label for="age">Your age</label><br><input type="number" id="age" name="age"> جرب الكود
في المثال التالي قمنا بتحديد أن عدد الأحرف التي يمكن أن تظهر بداخل مربع النص هو 20 و عدد الأحرف الأقصى التي يمكن إدخالها فيه هو 25.
المثال الرابع
<label for="username">Username</label><br><input type="text" id="username" name="username" size="20" maxlength="25"> جرب الكود
في المثال التالي قمنا بإضافة قيمة أولية في مربع النص.
المثال الخامس
<label for="username">Username</label><br><input type="text" id="username" name="username" value="mhamad"> جرب الكود
في المثال التالي قمنا بجعل قيمة مربع النص قابلة للقراءة فقط, أي لا يمكن تغييرها.
المثال السادس
<label for="username">Username</label><br><input type="text" id="username" name="username" value="mhamad" readonly> جرب الكود
في المثال التالي قمنا بجعل مربع النص يظهر بشكل غير مفعّل مما يعني أنه يظهر بلون باهت و قيمته غير قابلة للنسخ أو التغيير.
المثال السابع
<label for="username">Username</label><br><input type="text" id="username" name="username" value="mhamad" disabled> جرب الكود
في المثال التالي قمنا بجعل مربعات النصوص تظهر تلميحات في حال كانت فارغة.
المثال الثامن
<label for="email">Email</label><br><input type="email" id="email" name="email" placeholder="Enter your email address"><br><br><label for="password">Password</label><br><input type="password" id="password" name="password" placeholder="Enter your password"> جرب الكود
في المثال التالي قمنا بجعل المستخدم مجبر على ملئ مربعات النصوص في حال تركها فارغة و نقر على زر إرسال البيانات.
المثال التاسع
<label for="email">Email</label><br><input type="email" id="email" name="email" required><br><br><label for="password">Password</label><br><input type="password" id="password" name="password" required> جرب الكود
إضافة مربع نص متعدد الأسطر
نستخدم الوسم
<textarea> على هذا النحو <textarea>text</textarea> لعرض مربع نص يتألف من أكثر من سطر.
مكان الكلمة text نمرر كل النص الذي نريد عرضه بداخله.
في العادة نستخدم مربع نص متعدد الأسطر حين نطلب من المستخدم إدخال عنوانه أو نبذة عنه.
يمكنك إضافة الخصائص التالية لهذا الوسم:
-
id
نضيفها له في حال أردنا ربطه بوسم <label>.-
name
نضيفها له حتى يتم إرسال القيمة الموضوعة فيه عند النقر على زر الإرسال.-
readonly
نضيفها له في حال أردنا جعل قيمته غير قابلة للتغيير.-
disabled
نضيفها له في حال أردنا جعله يظهر بلون باهت و قيمته غير قابلة للنسخ أو التغيير.-
cols
نضيفها له في حال أردنا تحديد كم حرف كحد أقصى يمكن أن يظهر فيه على نفس السطر, أي كأنك تحدد عرضه نسبةً لعدد الأحرف الأقصى التي يمكن إدخالها في كل سطر.-
rows
نضيفها له في حال أردنا تحديد كم سطر يمكن أن يظهر فيه في كل مرة, أي كأنك تحدد طوله نسبةً لعدد الأسطر التي تحددها له.-
في المثال التالي قمنا بإضافة مربع نص يتألف من أكثر من سطر مع وضع قيمة أولية فيه.
المثال الأول
<label for="biography">Biography</label><br><textarea name="biography" id="biography">Harmash.com is published in 2014.</textarea> جرب الكود
في المثال التالي قمنا بإضافة مربع نص يتألف من أكثر من سطر مع تحديد عدد الأحرف الأقصى التي يمكن أن تظهر في كل سطر و عدد الأسطر الإفتراضية التي ستظهر فيه.
المثال الثاني
<label for="biography">Biography</label><br><textarea name="biography" id="biography" cols="40" rows="4">Harmash.com is published in 2014.</textarea> جرب الكود
في المثال التالي قمنا بإضافة مربع نص يتألف من أكثر من سطر مع تحديد حجمه و جعل قيمته قابلة للقراءة فقط.
المثال الثالث
<label for="biography">Biography</label><br><textarea name="biography" id="biography" cols="40" rows="4" readonly>Harmash.com is published in 2014.</textarea> جرب الكود
في المثال التالي قمنا بإضافة مربع نص يتألف من أكثر من سطر مع تحديد حجمه و جعله غير مفعّل, أي لا يمكن تغيير قيمته أو نسخها.
المثال الرابع
<label for="biography">Biography</label><br><textarea name="biography" id="biography" cols="40" rows="4" disabled>Harmash.com is published in 2014.</textarea> جرب الكود
أنواع الأزرار
بشكل عام هناك 4 أنواع مهمة من الأزرار التي يمكن إضافتها في النماذج و جميعها يمكن إضافها بواسطة الوسم
<input>.
لتحديد نوع الزر الذي سيتم إظهاره يجب إضافة الخاصية
type للوسم و تمرير إحدى القيم المجهزة مسبقاً كالتالي:
-
<input type="button">
للحصول على زر عادي.-
<input type="submit">
للحصول على زر مخصص لإرسال بيانات النموذج.-
<input type="reset">
للحصول على زر مخصص لإعادة تعيين البيانات الأولية في النموذج.-
<input type="file">
للحصول على زر مخصص لجعل المستخدم يختار ملف موجود في جهازه.-
ملاحظة
إفتراضياً في حال لم تحدد شكل الوسم
<input> سيتم إعتبار أنك تريد عرض مربع نص عادي <input type="text">.
إضافة زر عادي
للحصول على زر عادي يمكنك استخدام الوسم
<button type="button">text</button> أو استخدام الوسم <input type="button" value="text">.
طبعاً, في الحالتين مكان الكلمة text يجب أن تمرر النص الذي تريده أن يظهر على الزر.
الفرق الأساسي بينهما هو أن الوسم
<button> يمكن وضع وسم آخر بداخله في حين أن الوسم <input> يمكن وضع نص فقط بداخله.
كمثال بسيط, يمكنك وضع وسم <img> بداخل الوسم <button> لعرض أيقونة في الزر.
معلومة تقنية
بالنسبة لتحديد ما سيحدث عند النقر على الزر يجب أن تستخدم لغة جافا سكريبت لأجل ذلك.
لا تشغل بالك بهذا الأمر الآن لأنه يعتبر من أسهل الأمور التي ستتعلمها حين تدرس لغة جافا سكريبت مستقبلاً.
في المثال التالي قمنا بعرض زرين, الأول بواسطة الوسم
<button> و الثاني بواسطة الوسم <input>.
المثال الأول
<button type="button">Button 1</button><input type="button" value="Button 2"> جرب الكود
في المثال التالي قمنا بعرض زرين, الأول بواسطة الوسم
<button> و الثاني بواسطة الوسم <input>.
عند النقر على أي زر منهما سيتم عرض رسالة تنبيه للمستخدم بداخلها النص
"Hello User".
بالمبدأ قمنا بإضافة الخاصية onclick للزرين و تمرير نص الذي نريد عرضه عند النقر عليهما بواسطة كود جافا سكريبت.
المثال الثاني
<button type="button" onclick="alert('Hello User');">Display Message</button><input type="button" value="Display Message" onclick="alert('Hello User');"> جرب الكود
في المثال التالي قمنا بوضع أيقونة بداخل الزر.
المثال الثالث
<button type="button">Play <img src="play.PNG"></button> جرب الكود
إضافة زر لإرسال بيانات النموذج
لإضافة زر يقوم بإرسال بيانات النموذج بشكل تلقائي للموقع عندما يتم النقر عليه نستخدم الوسم
<input> مع تحديد أن نوعه submit.
إفتراضياً في حال لم تحدد النص الذي سيظهر على الزر الذي نوعه
submit سيظهر عليه الكلمة Submit.
لتحديد الكلمة التي ستظهر عليه يمكنك إضافة الخاصية value له و تمرير النص الذي تريد عرضه عليه كقيمة لها.
في المثال التالي قمنا بإضافة زر خاص لإرسال بيانات النموذج.
مثال
<input type="submit" value="Login"> جرب الكود
إضافة زر لإعادة تعيين قيم النموذج
لإضافة زر يقوم بحذف القيم المدخلة لعناصر النموذج و إعادتها لقيمها الأولية بشكل تلقائي عندما يتم النقر عليه نستخدم الوسم
<input> مع تحديد أن نوعه reset.
إفتراضياً في حال لم تحدد النص الذي سيظهر على الزر الذي نوعه
reset سيظهر عليه الكلمة Reset.
لتحديد الكلمة التي ستظهر عليه يمكنك إضافة الخاصية value له و تمرير النص الذي تريد عرضه عليه كقيمة لها.
في المثال التالي قمنا بإضافة زر خاص لإعادة قيم النموذج الأولية.
مثال
<input type="reset" value="Reset Values"> جرب الكود
إضافة زر يتيح للمستخدم اختيار ملف من حاسوبه
لإضافة زر يتيح للمستخدم اختيار ملف موجود في جهازه عندما يقوم بالنقر عليه نستخدم الوسم
<input> مع تحديد أن نوعه file.
ملاحظة: على هذا الزر بالتحديد يظهر النص "Choose File" مع الإشارة إلى أن هذا النص ثابت لا يمكنك تغييره.
في المثال التالي قمنا بإضافة زر يسمح للمستخدم باختيار ملف في حاسوبه.
مثال
<input type="file"> جرب الكود
مفهوم خانة الاختيار
خانة الاختيار ( Check Box ) عبارة عن زر مربع الشكل عند النقر عليه يظهر بداخله علامة صح تشير إلى أنه قد تم اختياره و عند النقر عليه مجدداً تختفي علامة الصح للإشارة إلى أنه لم يعد مختاراً.
نستخدم خانات الاختيار في العادة لعرض عدة خيارات أمام المستخدم و جعله قادراً على اختيار ما يريد منها أو حتى اختيارها كلها.
إضافة خانة اختيار
لإضافة خانة اختيار يمكنك استخدام الوسم
<input> على هذا النحو <input type="checkbox">.
يمكنك إضافة الخصائص التالية لهذا الوسم:
-
id
نضيفها له في حال أردنا ربطه بوسم <label>.-
name
نضيفها له حتى يتم إرسال القيمة الموضوعة فيه عند النقر على زر الإرسال.-
value
لإعطائه القيمة التي سيتم إرسالها عند النقر على زر الإرسال.-
disabled
لجعله يظهر بلون باهت و قيمته غير قابلة للتغيير.-
checked
نضيفها له لجعله مختاراً بشكل افتراضي عندما تفتح الصفحة.-
معلومة تقنية
بالنسبة للنص الذي ستظهره بجانب الخانة, قم دائماً بوضعه بواسطة الوسم
<label> مع ربطه بالخانة لأن المتصفح سيعتبر المستخدم نقر على الخانة نفسها عندما ينقر على النص المربوط بها.
بالنسبة للإسم الذي تضعه للخانة بواسطة الخاصية
name فيمكنك إعطاء الخانات أسماء مختلفة في حال أردت إرسال إسم و قيمة كل خيار موضوع سواء قام المستخدم باختياره أم لم يفعل على هذا النحو option1=arabic & option2=english & option3=null و يمكنك إعطاءهم نفس الإسم في حال أردت إرسال القيم التي اختارها منهم فقط على شكل مصفوفة على هذا النحو [arabic, english].
لا تقلق في حال لم تفهم ما ذكرناه حول الخاصية
name لأنك الآن تدرس كيفية تصميم الموقع و ليس كيفية برمجته.
في المثال التالي قمنا بعرض ثلاث خانات اختيار مع إعطاء إسم و قيمة مختلفة لكل واحد منهم.
المثال الأول
<input type="checkbox" id="ar" name="option1" value="arabic"><label for="ar">Arabic</label><br><input type="checkbox" id="en" name="option2" value="english"><label for="en">English</label><br><input type="checkbox" id="fr" name="option3" value="french"><label for="fr">French</label> جرب الكود
في المثال التالي قمنا بعرض ثلاث خانات اختيار مع إعطائهم نفس الأسماء.
ملاحظة: بالنسبة للمستخدم فإنه لن يشعر بأي فرق بين هذا المثال و المثال السابق حيث سيرى نفس الصفحة أما بالنسبة للصفحة التي ستتلقى البيانات فهذه المرة سيصلها فقط القيم التي قام المستخدم باختيارها و ستلاحظ هذا الأمر بنفسك عند تجربة المثال.
المثال الثاني
<input type="checkbox" id="ar" name="languages[]" value="arabic"><label for="ar">Arabic</label><br><input type="checkbox" id="en" name="languages[]" value="english"><label for="en">English</label><br><input type="checkbox" id="fr" name="languages[]" value="french"><label for="fr">French</label> جرب الكود
ملاحظة
عند إعطاء الخانات نفس الإسم بواسطة الخاصية
name يجب إضافة الرمز [] في نهاية الإسم حتى يعلم المتصفح أن المستخدم قد يرسل أكثر من قيمة مما يجعله يقوم بإرسال جميع القيم التي يختارها عند النقر على زر إرسال البيانات كما فعلنا في المثال السابق حيث وضعنا name="languages[]" و ليس name="languages".
في المثال التالي قمنا بعرض ثلاث خانات اختيار مع جعل الأول يظهر مُختاراً بشكل إفتراضي.
المثال الثالث
<input type="checkbox" id="ar" name="option1" value="arabic" checked><label for="ar">Arabic</label><br><input type="checkbox" id="en" name="option2" value="english"><label for="en">English</label><br><input type="checkbox" id="fr" name="option3" value="french"><label for="fr">French</label> جرب الكود
في المثال التالي قمنا بعرض ثلاث خانات اختيار مع جعل الأول يظهر مُختاراً بشكل إفتراضي و غير مفعّل أيضاً لجعل المستخدم غير قادر على تغيير قيمته.
المثال الرابع
<input type="checkbox" id="ar" name="option1" value="arabic" checked disabled><label for="ar">Arabic</label><br><input type="checkbox" id="en" name="option2" value="english"><label for="en">English</label><br><input type="checkbox" id="fr" name="option3" value="french"><label for="fr">French</label> جرب الكود
مفهوم زر الراديو
زر الراديو ( Radio Button ) عبارة عن زر دائري الشكل عند النقر عليه يظهر بداخله نقطة كبيرة تشير إلى أنه قد تم اختياره.
نستخدم أزرار الراديو في العادة لعرض عدة خيارات أمام المستخدم و جعله قادراً على اختيار أحدها فقط.
إضافة زر راديو
لإضافة زر راديو يمكنك استخدام الوسم
<input> على هذا النحو <input type="radio">.
يمكنك إضافة الخصائص التالية لهذا الوسم:
-
id
نضيفها له في حال أردنا ربطه بوسم <label>.-
name
نضيفها له حتى يتم إرسال القيمة الموضوعة فيه عند النقر على زر الإرسال.-
value
لإعطائه القيمة التي سيتم إرسالها عند النقر على زر الإرسال.-
disabled
لجعله يظهر بلون باهت و قيمته غير قابلة للتغيير.-
checked
نضيفها له لجعله مختاراً بشكل افتراضي عندما تفتح الصفحة.-
معلومة تقنية
كل مجموعة أزرار راديو يتم إضافتها في الصفحة يجب إعطاؤها نفس الإسم - أي إعطاؤها
name موحّد - لأنه حين يجد المتصفح أزرار راديو تملك نفس الإسم سيفهم مباشرةً أنها تنتمي لمجموعة واحدة و بالتالي يجب جعل المستخدم قادر على اختيار أحدها فقط و ليس كلها.
و بالنسبة للنص الذي ستظهره بجانب الزر, قم دائماً بوضعه بواسطة الوسم
<label> مع ربطه بالزر لأن المتصفح سيعتبر المستخدم نقر على الزر نفسها عندما ينقر على النص المربوط به.
في المثال التالي قمنا بعرض ثلاث أزرار راديو.
المثال الأول
<input type="radio" id="ar" name="language" value="arabic"><label for="ar">Arabic</label><br><input type="radio" id="en" name="language" value="english"><label for="en">English</label><br><input type="radio" id="fr" name="language" value="french"><label for="fr">French</label> جرب الكود
في المثال التالي قمنا بعرض ثلاث أزرار راديو مع جعل الأول يظهر مُختاراً بشكل إفتراضي.
المثال الثاني
<input type="radio" id="ar" name="language" value="arabic" checked><label for="ar">Arabic</label><br><input type="radio" id="en" name="language" value="english"><label for="en">English</label><br><input type="radio" id="fr" name="language" value="french"><label for="fr">French</label> جرب الكود
في المثال التالي قمنا بعرض ثلاث أزرار راديو مع جعل الأول يظهر مُختاراً بشكل إفتراضي و الثالث غير مفعّل لجعل المستخدم غير قادر على تغيير قيمته.
المثال الثالث
<input type="radio" id="ar" name="language" value="arabic" checked><label for="ar">Arabic</label><br><input type="radio" id="en" name="language" value="english"><label for="en">English</label><br><input type="radio" id="fr" name="language" value="french" disabled><label for="fr">French</label> جرب الكود
في المثال التالي قمنا بعرض مجموعتين من أزرار الراديو مع جعل الزر الأول في كل مجموعة يظهر مختاراً بشكل إفتراضي.
المجموعة الأولى أعطيناها الإسم
gender و الثانية أعطيناها الإسم language.
المثال الرابع
<!-- ينتمي للمجموعة الأولى "gender" كل زر راديو يملك الإسم --><input type="radio" id="male" name="gender" value="male" checked><label for="male">Male</label><br><input type="radio" id="female" name="gender" value="female"><label for="female">Female</label><br><!-- ينتمي للمجموعة الثانية "language" كل زر راديو يملك الإسم --><input type="radio" id="ar" name="language" value="arabic" checked><label for="ar">Arabic</label><br><input type="radio" id="en" name="language" value="english"><label for="en">English</label><br><input type="radio" id="fr" name="language" value="french"><label for="fr">French</label> جرب الكود
مفهوم القائمة المنسدلة
القائمة المنسدلة ( Dropdown ) عبارة عن قائمة تشبه الزر عند النقر عليها تظهر جميع العناصر الموجودة فيها.
إفتراضياً يظهر في الصفحة العنصر الأول في القائمة فقط و يكون بإمكان المستخدم اختيار عنصر واحد منها, و لكنك تستطيع تحديد عدد العناصر التي ستظهر بالإضافة لجعله قادر على اختيار أكثر من قيمة منها.
إضافة قائمة منسدلة
لإظهار قائمة منسدلة تحتوي مجموعة عناصر يمكن إختيار أحدها, يمكنك إضافة الوسم
<select> </select> لإعلام المتصفح أنك تريد عرض قائمة منسدلة و كل عنصر تريد وضعه بداخلها تضعه بداخل <option> </option>.
خصائص الوسم <select>
-
id
نضيفها له في حال أردنا ربطه بوسم <label>.-
name
نضيفها له حتى يتم إرسال القيمة المختار فيه عند النقر على زر الإرسال.-
size
نضيفها له في حال أردنا تحديد عدد العناصر التي ستظهر بداخل القائمة, إفتراضياً يظهر عنصر واحد.-
multiple
نضيفها له في حال أردنا جعل المستخدم قادر على اختيار أكثر من قيمة في نفس الوقت.-
disabled
نضيفها له في حال أردنا جعله غير مفعّل, أي ليظهر بلون باهت و لا يمكن النقر على أي قيمة موضوعة فيه.-
خصائص الوسم <option>
-
value
نضيفها له لنحدد قيمة الخيار و يجب وضع قيمة مختلفة لكل <option>.-
selected
نضيفها له في حال أردنا جعل العنصر مختاراً بشكل إفتراضي.-
disabled
نضيفها له في حال أردنا جعله يظهر بلون باهت و لا يمكن اختياره.-
معلومة تقنية
النص الذي تظهره بجانب القائمة, قم دائماً بوضعه بواسطة الوسم
<label> مع ربطه بها لأن المتصفح سيعتبر المستخدم نقر على القائمة نفسها عندما ينقر على النص المربوط به. و هنا نود الإشارة إلى أن القائمة قد لا تفتح عند النقر على النص المربوط بها و لكن سيظهر بشكل واضح للمستخدم أنه يقف عندها الآن و في حال كان يستخدم حاسوب فإنه سيتمكن من تغيير القيمة المختارة فيها بواسطة الأسهم الموجودة في الكيبورد.
في المثال التالي قمنا بإضافة قائمة منسدلة تحتوي على 4 عناصر.
المثال الأول
<label for="languages">Choose your language:</label><select id="languages" name="languages"> <option value="arabic">Arabic</option> <option value="english">English</option> <option value="french">French</option> <option value="spanish">Spanish</option></select> جرب الكود
في المثال التالي قمنا بإضافة قائمة مع تحديد أن العنصر الثالث سيكون مختاراً بشكل إفتراضي عندما تفتح الصفحة.
المثال الثاني
<label for="languages">Choose your language:</label><select id="languages" name="languages"> <option value="arabic">Arabic</option> <option value="english">English</option> <option value="french" selected>French</option> <option value="spanish">Spanish</option></select> جرب الكود
في المثال التالي قمنا بإضافة قائمة مع جعلها تظهر أربع عناصر (أي كل العناصر الموضوعة فيها) و يمكن إختيار أكثر من عنصر فيها.
معلومة: حتى تتمكن من اختيار أكثر من عنصر يجب أن تبقي إصبعك على الزر Ctrl عند اختيار العناصر.
المثال الثالث
<label for="languages">Choose your languages:</label><select id="languages" name="languages[]" size="4" multiple> <option value="arabic">Arabic</option> <option value="english">English</option> <option value="french">French</option> <option value="spanish">Spanish</option></select> جرب الكود
ملاحظة
عند استخدام الخاصية
multiple يجب إضافة الرمز [] في آخر الإسم الذي تعطيه للقائمة بواسطة الخاصية name حتى يعلم المتصفح أن المستخدم قد يرسل أكثر من قيمة مما يجعله يقوم بإرسال جميع القيم التي يختارها عند النقر على زر إرسال البيانات كما فعلنا في المثال السابق حيث وضعنا name="languages[]" و ليس name="languages".
في المثال التالي قمنا بإضافة قائمة مع جعل آخر عنصرين في القائمة غير قابلين للإختيار.
المثال الرابع
<label for="languages">Choose your language:</label><select id="languages" name="languages"> <option value="arabic">Arabic</option> <option value="english">English</option> <option value="french" disabled>French</option> <option value="spanish" disabled>Spanish</option></select> جرب الكود
في المثال التالي قمنا بإضافة قائمة مع جعلها غير مفعّلة, أي لا يمكن تغيير قيمة العنصر المختار فيها.
المثال الخامس
<label for="languages">Choose your language:</label><select id="languages" name="languages" disabled> <option value="arabic">Arabic</option> <option value="english">English</option> <option value="french">French</option> <option value="spanish">Spanish</option></select> جرب الكود
مفهوم نطاق الإختيار
نطاق الإختيار ( Range ) عبارة عن شريط مخصص لاختيار قيم رقمية ضمن نطاق محدد مثلاً من 0 إلى 100.
هذا الشريط يكون عليه زر يمكن تحريكه لاختيار قيمة.
إضافة نطاق إختيار
لإضافة نطاق إختيار يمكنك استخدام الوسم
<input> على هذا النحو <input type="range">.
يمكنك إضافة الخصائص التالية لهذا الوسم:
-
id
نضيفها له في حال أردنا ربطه بوسم <label>.-
name
نضيفها له حتى يتم إرسال القيمة الموضوعة فيه عند النقر على زر الإرسال.-
value
لإعطائه قيمة أولية.-
min
لتحديد أصغر قيمة فيه.-
max
لتحديد أكبر قيمة فيه.-
step
لتحديد كم ستزيد قيمته كلما تم إزاحته.-
disabled
لجعله يظهر بلون باهت و قيمته غير قابلة للتغيير.-
في المثال التالي قمنا بعرض نطاق قيمه يمكن أن تتراوح بين
0 و 20 و قيمته الإفتراضية هي 10.
المثال الأول
<label for="volume">Volume between (0 and 20):</label><input type="range" id="volume" name="volume" min="0" max="20" step="1" value="10"> جرب الكود
في المثال التالي قمنا بعرض نطاق قيمه يمكن أن تتراوح بين
0 و 20 و قيمته الإفتراضية هي 10.
بالإضافة لذلك جعلنا قيمته تزيد أو تقل بمقدار 5 وحدات كلما تم تحريكه.
المثال الثاني
<label for="volume">Volume between (0 and 20):</label><input type="range" id="volume" name="volume" min="0" max="20" step="5" value="10"> جرب الكود
في المثال التالي قمنا بعرض نطاق قيمه يمكن أن تتراوح بين
0 و 20 و قيمته الإفتراضية هي 7.
هنا قمنا بجعل النطاق غير مفعّل و بالتالي لا يمكن تغيير قيمته.
المثال الثالث
<label for="volume">Volume between (0 and 20):</label><input type="range" id="volume" name="volume" min="0" max="20" step="1" value="7" disabled> جرب الكود
مفهوم تجميع العناصر
تجميع العناصر يقصد به رسم حدود حول العناصر المشتركة و إعطاءها عنوان مما يظهر النموذج بشكل أجمل.
يمكنك رسم حدود حول كل عناصر النموذج و يمكنك رسم حدود حول العناصر الموضوعة بداخله أيضاً.
إضافة حدود حول العناصر
يستخدم الوسم
<fieldset> لإضافة حدود على شكل مربع حول عناصر النموذج مع إمكانية إضافة عنوان مميز له.
عنوان النموذج يتم إضافته بواسطة الوسم <legend> حتى يظهر بشكل جميل جداً ضمن خطوط المربع.
في المثال التالي قمنا بإضافة حدود و عنوان للنموذج نفسه.
المثال الأول
<form> <fieldset> <legend>Login Form</legend> <!-- هنا نضيف العناصر التي ستظهر بداخل الحدود --> </fieldset></form> جرب الكود
في المثال التالي قمنا بإضافة حدود و عناوين للعناصر الموجودة في النموذج بشكل تظهر مقسومة لمجموعتين.
المثال الثاني
<form> <fieldset> <fieldset> <legend>Name</legend> <!-- هنا وضعنا حدود و عنوان للمجموعة الأولى بداخل النموذج --> </fieldset> <fieldset> <legend>Favourite Language</legend> <!-- هنا وضعنا حدود و عنوان للمجموعة الأولى بداخل النموذج --> </fieldset> </fieldset></form> جرب الكود
في المثال التالي قمنا بإضافة حدود و عنوان للنموذج نفسه و حدود عناوين للعناصر الموجودة فيه بشكل تظهر مقسومة لمجموعتين.
المثال الثالث
<form> <fieldset> <legend>Questionnaire</legend> <!-- هنا وضعنا حدود و عنوان لكل العناصر التي ستظهر بداخل النموذج --> <fieldset> <legend>Name</legend> <!-- هنا وضعنا حدود و عنوان للمجموعة الأولى بداخل النموذج --> </fieldset> <fieldset> <legend>Favourite Language</legend> <!-- هنا وضعنا حدود و عنوان للمجموعة الأولى بداخل النموذج --> </fieldset> </fieldset></form> جرب الكود
طريقة عرض رموز الإيموجي
رموز الإيموجي ( Emojy ) عبارة عن مجموعة أحرف إن تم وضعها مع بعضها يقوم المتصفح بعرض رمز إيموجي محدد مكانها.
هذه الأحرف مهمة جداً فهي تتيح لك إمكانية عرض أي رمز تريد في الصفحة حتى و إن كان غير موجوداً على الكيبورد الذي تستخدمه.
الأحرف التي نستخدمها لعرض الرموز يمكن وضعها بأسلوب عشري ( Decimal ) أو بأسلوب سداسي عشري ( Hexadecimal ).
قاعدة عامة
-
- عند استخدام الأسلوب Decimal يجب إضافة &# قبل وضع أحرف الرمز.
-
- عند استخدام الأسلوب Hexadecimal يجب إضافة &#x قبل وضع أحرف الرمز.
-
كما أنه يفضّل دائماً وضع فاصلة منقوطة ; بعد كتابة أحرف الرمز و هذا أمر اختياري و لكننا ننصح بفعله.
في الجدول التالي قمنا بذكر كل الرموز المتاحة التي يمكن استخدامها لعرض رموز الإيموجي.
| الرمز | Decimal | Hexadecimal | إسمه | مثال |
|---|
| ⌚ | ⌚ | ⌚ | Watch | جربه |
| ⌛ | ⌛ | ⌛ | Hourglass Done | جربه |
| ⏩ | ⏩ | ⏩ | Fast-Forward Button | جربه |
| ⏪ | ⏪ | ⏪ | Fast Reverse Button | جربه |
| ⏫ | ⏫ | ⏫ | Fast Up Button | جربه |
| ⏬ | ⏬ | ⏬ | Fast Down Button | جربه |
| ⏭ | ⏭ | ⏭ | Next Track Button | جربه |
| ⏮ | ⏮ | ⏮ | Last Track Button | جربه |
| ⏯ | ⏯ | ⏯ | Play or Pause Button | جربه |
| ⏰ | ⏰ | ⏰ | Alarm Clock | جربه |
| ⏱ | ⏱ | ⏱ | Stopwatch | جربه |
| ⏲ | ⏲ | ⏲ | Timer Clock | جربه |
| ⏳ | ⏳ | ⏳ | Hourglass Not Done | جربه |
| ⏸ | ⏸ | ⏸ | Pause Button | جربه |
| ⏹ | ⏹ | ⏹ | Stop Button | جربه |
| ⏺ | ⏺ | ⏺ | Record Button | جربه |
| Ⓜ | Ⓜ | Ⓜ | Circled M | جربه |
| ☔ | ☔ | ☔ | Umbrella with Rain Drops | جربه |
| ☕ | ☕ | ☕ | Hot Beverage | جربه |
| ☝ | ☝ | ☝ | Index Pointing Up | جربه |
| ♈ | ♈ | ♈ | Aries | جربه |
| ♉ | ♉ | ♉ | Taurus | جربه |
| ♊ | ♊ | ♊ | Gemini | جربه |
| ♋ | ♋ | ♋ | Cancer | جربه |
| ♌ | ♌ | ♌ | Leo | جربه |
| ♍ | ♍ | ♍ | Virgo | جربه |
| ♎ | ♎ | ♎ | Libra | جربه |
| ♏ | ♏ | ♏ | Scorpio | جربه |
| ♐ | ♐ | ♐ | Sagittarius | جربه |
| ♑ | ♑ | ♑ | Capricorn | جربه |
| ♒ | ♒ | ♒ | Aquarius | جربه |
| ♓ | ♓ | ♓ | Pisces | جربه |
| ♟ | ♟ | ♟ | Chess Pawn | جربه |
| ♿ | ♿ | ♿ | Wheelchair Symbol | جربه |
| ⚓ | ⚓ | ⚓ | Anchor | جربه |
| ⚡ | ⚡ | ⚡ | High Voltage | جربه |
| ⚪ | ⚪ | ⚪ | White Circle | جربه |
| ⚫ | ⚫ | ⚫ | Black Circle | جربه |
| ⚽ | ⚽ | ⚽ | Soccer Ball | جربه |
| ⚾ | ⚾ | ⚾ | Baseball | جربه |
| ⛄ | ⛄ | ⛄ | Snowman Without Snow | جربه |
| ⛅ | ⛅ | ⛅ | Sun Behind Cloud | جربه |
| ⛎ | ⛎ | ⛎ | Ophiuchus | جربه |
| ⛏ | ⛏ | ⛏ | Pick | جربه |
| ⛑ | ⛑ | ⛑ | Rescue Worker’s Helmet | جربه |
| ⛓ | ⛓ | ⛓ | Chains | جربه |
| ⛔ | ⛔ | ⛔ | No Entry | جربه |
| ⛩ | ⛩ | ⛩ | Shinto Shrine | جربه |
| ⛪ | ⛪ | ⛪ | Church | جربه |
| ⛰ | ⛰ | ⛰ | Mountain | جربه |
| ⛱ | ⛱ | ⛱ | Umbrella on Ground | جربه |
| ⛲ | ⛲ | ⛲ | Fountain | جربه |
| ⛳ | ⛳ | ⛳ | Flag in Hole | جربه |
| ⛴ | ⛴ | ⛴ | Ferry | جربه |
| ⛵ | ⛵ | ⛵ | Sailboat | جربه |
| ⛷ | ⛷ | ⛷ | Skier | جربه |
| ⛸ | ⛸ | ⛸ | Ice Skate | جربه |
| ⛹ | ⛹ | ⛹ | Person Bouncing Ball | جربه |
| ⛺ | ⛺ | ⛺ | Tent | جربه |
| ⛽ | ⛽ | ⛽ | Fuel Pump | جربه |
| ✂ | ✂ | ✂ | Scissors | جربه |
| ✅ | ✅ | ✅ | White Heavy Check Mark | جربه |
| ✈ | ✈ | ✈ | Airplane | جربه |
| ✉ | ✉ | ✉ | Envelope | جربه |
| ✊ | ✊ | ✊ | Raised Fist | جربه |
| ✋ | ✋ | ✋ | Raised Hand | جربه |
| ✌ | ✌ | ✌ | Victory Hand | جربه |
| ✍ | ✍ | ✍ | Writing Hand | جربه |
| ✏ | ✏ | ✏ | Pencil | جربه |
| ✒ | ✒ | ✒ | Black Nib | جربه |
| ✔ | ✔ | ✔ | Heavy Check Mark | جربه |
| ✖ | ✖ | ✖ | Heavy Multiplication X | جربه |
| ✝ | ✝ | ✝ | Latin Cross | جربه |
| ✡ | ✡ | ✡ | Star of David | جربه |
| ✨ | ✨ | ✨ | Sparkles | جربه |
| ✳ | ✳ | ✳ | Eight-Spoked Asterisk | جربه |
| ✴ | ✴ | ✴ | Eight-Pointed Star | جربه |
| ❄ | ❄ | ❄ | Snowflake | جربه |
| ❇ | ❇ | ❇ | Sparkle | جربه |
| ❌ | ❌ | ❌ | Cross Mark | جربه |
| ❎ | ❎ | ❎ | Cross Mark Button | جربه |
| ❓ | ❓ | ❓ | Question Mark | جربه |
| ❔ | ❔ | ❔ | White Question Mark | جربه |
| ❕ | ❕ | ❕ | White Exclamation Mark | جربه |
| ❗ | ❗ | ❗ | Exclamation Mark | جربه |
| ❣ | ❣ | ❣ | Heavy Heart Exclamation | جربه |
| ❤ | ❤ | ❤ | Red Heart | جربه |
| ➕ | ➕ | ➕ | Heavy Plus Sign | جربه |
| ➖ | ➖ | ➖ | Heavy Minus Sign | جربه |
| ➗ | ➗ | ➗ | Heavy Division Sign | جربه |
| ➡ | ➡ | ➡ | Right Arrow | جربه |
| ➰ | ➰ | ➰ | Curly Loop | جربه |
| ➿ | ➿ | ➿ | Double Curly Loop | جربه |
| ⤴ | ⤴ | ⤴ | Right Arrow Curving Up | جربه |
| ⤵ | ⤵ | ⤵ | Right Arrow Curving Down | جربه |
| ⬅ | ⬅ | ⬅ | Left Arrow | جربه |
| ⬆ | ⬆ | ⬆ | Up Arrow | جربه |
| ⬇ | ⬇ | ⬇ | Down Arrow | جربه |
| ⬛ | ⬛ | ⬛ | Black Large Square | جربه |
| ⬜ | ⬜ | ⬜ | White Large Square | جربه |
| ⭐ | ⭐ | ⭐ | Star | جربه |
| ⭕ | ⭕ | ⭕ | Heavy Large Circle | جربه |
| 〰 | 〰 | 〰 | Wavy Dash | جربه |
| 〽 | 〽 | 〽 | Part Alternation Mark | جربه |
| ㊗ | ㊗ | ㊗ |
| جربه |
| ㊙ | ㊙ | ㊙ | Japanese “Congratulations” Button | جربه |
| ? | 🀄 | 🀄 | Mahjong Red Dragon | جربه |
| ? | 🃏 | 🃏 | Joker | جربه |
| ? | 🅰 | 🅰 | A Button (Blood Type) | جربه |
| ? | 🅱 | 🅱 | B Button (Blood Type) | جربه |
| ? | 🅾 | 🅾 | O Button (Blood Type) | جربه |
| ? | 🅿 | 🅿 | P Button | جربه |
| ? | 🆎 | 🆎 | Ab Button (Blood Type) | جربه |
| ? | 🆑 | 🆑 | Cl Button | جربه |
| ? | 🆒 | 🆒 | Cool Button | جربه |
| ? | 🆓 | 🆓 | Free Button | جربه |
| ? | 🆔 | 🆔 | Id Button | جربه |
| ? | 🆕 | 🆕 | New Button | جربه |
| ? | 🆖 | 🆖 | Ng Button | جربه |
| ? | 🆗 | 🆗 | Ok Button | جربه |
| ? | 🆘 | 🆘 | Sos Button | جربه |
| ? | 🆙 | 🆙 | Up! Button | جربه |
| ? | 🆚 | 🆚 | Vs Button | جربه |
| ? | 🈁 | 🈁 | Japanese “Here” Button | جربه |
| ? | 🈂 | 🈂 | Japanese “Service Charge” Button | جربه |
| ? | 🈚 | 🈚 | Japanese “Free of Charge” Button | جربه |
| ? | 🈯 | 🈯 | Japanese “Reserved” Button | جربه |
| ? | 🈲 | 🈲 | Japanese “Prohibited” Button | جربه |
| ? | 🈳 | 🈳 | Japanese “Vacancy” Button | جربه |
| ? | 🈴 | 🈴 | Japanese “Passing Grade” Button | جربه |
| ? | 🈵 | 🈵 | Japanese “No Vacancy” Button | جربه |
| ? | 🈶 | 🈶 | Japanese “Not Free of Charge” Button | جربه |
| ? | 🈷 | 🈷 | Japanese “Monthly Amount” Button | جربه |
| ? | 🈸 | 🈸 | Japanese “Application” Button | جربه |
| ? | 🈹 | 🈹 | Japanese “Discount” Button | جربه |
| ? | 🈺 | 🈺 | Japanese “Open For Business” Button | جربه |
| ? | 🉐 | 🉐 | Japanese “Bargain” Button | جربه |
| ? | 🉑 | 🉑 | Japanese “Acceptable” Button | جربه |
| ? | 🌀 | 🌀 | Cyclone | جربه |
| ? | 🌁 | 🌁 | Foggy | جربه |
| ? | 🌂 | 🌂 | Closed Umbrella | جربه |
| ? | 🌃 | 🌃 | Night with Stars | جربه |
| ? | 🌄 | 🌄 | Sunrise Over Mountains | جربه |
| ? | 🌅 | 🌅 | Sunrise | جربه |
| ? | 🌆 | 🌆 | Cityscape At Dusk | جربه |
| ? | 🌇 | 🌇 | Sunset | جربه |
| ? | 🌈 | 🌈 | Rainbow | جربه |
| ? | 🌉 | 🌉 | Bridge At Night | جربه |
| ? | 🌊 | 🌊 | Water Wave | جربه |
| ? | 🌋 | 🌋 | Volcano | جربه |
| ? | 🌌 | 🌌 | Milky Way | جربه |
| ? | 🌍 | 🌍 | Globe Showing Europe-Africa | جربه |
| ? | 🌎 | 🌎 | Globe Showing Americas | جربه |
| ? | 🌏 | 🌏 | Globe Showing Asia-Australia | جربه |
