الأزرار هي عنصر مهم في نماذج الويب. تسمح للمستخدم بالتفاعل مع النموذج أو إرسال البيانات إلى الخادم أو تنفيذ إجراءات أخرى. إذا كنت تريد معرفة كيفية إضافة أزرار لتشكيل ج ، سوف تحتاج إلى بعض المعرفة حول هتمل و كس.
الخطوة الأولى هي إنشاء عنصر باستخدام علامة هتمل. يمكنك تعيين نص الزر داخل العلامة أو استخدام سمة القيمة. على سبيل المثال ، أرسل أو.
ثم يمكنك إضافة أنماط إلى الزر باستخدام كس. يمكنك تغيير لون الخلفية ولون النص وتعيين الحدود والمزيد. للقيام بذلك ، يمكنك استخدام محددات كس مثل زر,.فئة أو # معرف لتحديد زر معين أو مجموعة من الأزرار.
على سبيل المثال ، يمكنك استخدام رمز كس التالي لتغيير أنماط الأزرار: زر { لون الخلفية: #4285 ف 4 ؛ اللون: #ففف ؛ الحدود: لا شيء ؛ الحشو: 10 بكسل 20 بكسل؛}
وأخيرا ، لجعل زر وظيفية ، يمكنك إضافة معالج الحدث باستخدام جافا سكريبت. يسمح لك معالج الأحداث بتحديد الإجراء الذي يجب أن يحدث عند النقر فوق الزر. يمكنك استخدام السمة أونكليك لتحديد وظيفة جافا سكريبت مباشرة ، أو إضافة معالج باستخدام طريقة أديفنتليستينر.
- الأزرار الموجودة في النموذج: دليل خطوة بخطوة
- التحضير لإضافة أزرار
- اختيار نوع الزر
- 1. زر عادي
- 2. زر الاختيار
- 3. مربع الاختيار
- 4. القائمة المنسدلة (اختر)
- 5. زر الصورة
- 6. تحميل الملف (زر تحميل الملف)
- 7. زر إرسال (زر إرسال)
- إنشاء زر باستخدام رمز هتمل
- 1. باستخدام العلامة
- 2. باستخدام العلامة
- 3. سمات إضافية
- 4. إضافة الأنماط
- أنماط الترميز للأزرار
- إضافة أزرار إلى النموذج
- سؤال وجواب
- كيف يمكنني إضافة زر إلى نموذج?
- التي الطبقة المغلق يجب أن تستخدم لنمط زر?
- هل من الممكن إضافة رمز إلى زر?
- كيف يمكنني تعيين إجراء عند النقر على زر?
- هل من الممكن أن أزرار نمط باستخدام المغلق?
الأزرار الموجودة في النموذج: دليل خطوة بخطوة
يمكن أن تؤدي إضافة الأزرار إلى النموذج إلى تحسين واجهة المستخدم بشكل كبير وتسهيل التفاعل مع النموذج. في هذا الدليل التفصيلي ، سننظر في كيفية إضافة أزرار إلى نموذج.
- بشكل افتراضي ، يكون للأزرار الموجودة في النموذج مظهر قياسي. يمكنك تخصيص نمط الأزرار باستخدام كس لتتناسب بشكل أفضل مع تصميم موقعك. هنا مثال على رمز كس الذي يغير لون خلفية الأزرار إلى اللون الأحمر:
}
الانتهاء.
مبارك! لقد نجحت في إضافة أزرار إلى النموذج. الآن أصبح النموذج الخاص بك أكثر سهولة في الاستخدام.
التحضير لإضافة أزرار
قبل إضافة أزرار إلى النموذج ، تحتاج إلى اتباع بعض الخطوات:
إنشاء نموذج باستخدام علامة
.
حدد الموضع الذي سيتم وضع الأزرار فيه. للقيام بذلك ، استخدم العلامة
مع معرف فريد أو فئة.
حدد نوع الأزرار التي سيتم استخدامها. على سبيل المثال ، يمكنك استخدام العلامة
,
أو
.
حدد النص الذي سيتم عرضه على الزر. للقيام بذلك ، استخدم محتويات العلامة
أو سمة
القيمة
من العنصر
.
يمكن تعريف الإجراءات الرئيسية التي يتعين تنفيذها عند النقر فوق الزر باستخدام السمة
أونكليك
أو إضافة معالج حدث.
عند اكتمال هذه الخطوات ، ستكون جاهزا لإضافة أزرار إلى النموذج والمضي قدما في مزيد من التخصيص والتصميم.
اختيار نوع الزر
- عند إنشاء نموذج بأزرار ، تحتاج إلى تحديد نوع الزر المناسب ، اعتمادا على الاستخدام المقصود. هناك أنواع مختلفة من الأزرار التي يمكن استخدامها في النماذج.
- 1. الزر المعتاد
- الزر العادي هو نوع أساسي من الأزرار يستخدم عادة لتنفيذ إجراء معين عند النقر فوقه. عادة ما يتم عرض هذا الزر كمستطيل ، وغالبا ما يكون بداخله نص.
2. زر الاختيار
زر التبديل هو نوع من الأزرار يسمح للمستخدم بتحديد أحد الخيارات العديدة. على سبيل المثال ، في نموذج تسجيل المستخدم ، يمكنك استخدام أزرار التبديل لتحديد الجنس: ذكر أو أنثى.
3. مربع الاختيار
مربع الاختيار هو نوع من الأزرار يسمح للمستخدم بتحديد خيار واحد أو أكثر من الخيارات المقترحة. على سبيل المثال ، في نموذج الطلب ، يمكنك استخدام مربعات الاختيار لتحديد خيارات أو خدمات إضافية.
4. القائمة المنسدلة (اختر)
القائمة المنسدلة هي نوع من الأزرار التي تسمح للمستخدم بتحديد خيار واحد من الخيارات المقترحة. عند النقر فوق الزر ، يتم عرض قائمة بالخيارات ويمكن للمستخدم تحديد أحدها. على سبيل المثال ، في نموذج الطلب ، يمكنك استخدام القائمة المنسدلة لتحديد بلد التسليم.
5. زر الصورة
زر الصورة هو نوع من الأزرار التي تستخدم صورة بدلا من النص لتمثيل زر بصريا. على سبيل المثال ، في نموذج التسجيل ، يمكنك استخدام زر صورة مع صورة شعار الشركة.
6. تحميل الملف (زر تحميل الملف)
زر تحميل الملف هو نوع من الأزرار التي تسمح للمستخدم بتحديد الملفات وتحميلها من أجهزته إلى الخادم. على سبيل المثال ، في نموذج إرسال السيرة الذاتية ، يمكنك استخدام زر تحميل الملف لتحميل ملفات السيرة الذاتية ورسالة الغلاف.
7. زر إرسال (زر إرسال)
زر إرسال النموذج هو نوع من الأزرار التي يتم استخدامها لإرسال بيانات النموذج إلى الخادم للمعالجة. على سبيل المثال ، في نموذج التسجيل ، قد يسمى زر إرسال النموذج "تسجيل" أو "إرسال".
- هذه ليست سوى بعض أنواع الأزرار التي يمكن استخدامها عند إنشاء نموذج. يعتمد اختيار نوع معين من الأزرار على تفضيلات المصمم والأهداف التي يجب تحقيقها عند استخدام النموذج.
- إنشاء زر باستخدام رمز هتمل
- الزر هو أحد عناصر التحكم الرئيسية في صفحة الويب. إنشاء زر باستخدام رمز هتمل بسيط جدا.
- يمكنك استخدام علامة أو علامة لإنشاء زر في هتمل.
- 1. باستخدام العلامة
- مثال على إنشاء زر باستخدام علامة :
- ادفعني
2. باستخدام العلامة
لإنشاء زر باستخدام علامة ، تحتاج إلى تحديد سمة النوع بالقيمة "زر".
مثال على إنشاء زر باستخدام علامة :
سيتم إنشاء زر بعنوان "انقر فوق".
3. سمات إضافية
يمكنك أيضا استخدام سمات إضافية لتخصيص مظهر وسلوك الزر:
اسم-اسم الزر.
القيمة-قيمة الزر المعروض عليه.
معطل-الزر غير متاح للضغط.
4. إضافة الأنماط
لتغيير مظهر الزر ، يمكنك استخدام أنماط كس. على سبيل المثال ، يمكنك تعيين لون الخلفية ولون النص وحجم الزر وما إلى ذلك.
هنا مثال على التصميم زر باستخدام كس:
زر {
لون الخلفية: أزرق;
اللون: أبيض;
الحشو: 10 بكسل 20 بكسل;
نصف قطر الحدود: 5 بكسل;
}
الآن أنت تعرف كيفية إنشاء زر باستخدام رمز هتمل. لديك وقتا طيبا خلق أزرار على صفحات الويب الخاصة بك!
أنماط الترميز للأزرار
لإضافة نمط إلى الأزرار الموجودة في النموذج ، ستحتاج إلى استخدام كس. فيما يلي بعض الخصائص الأساسية التي يمكن استخدامها لتخصيص مظهر الأزرار:
لون الخلفية: يحدد لون خلفية الزر;
اللون: يحدد لون النص على الزر;
دائرة نصف قطرها الحدود: يحدد دائرة نصف قطرها من زوايا مدورة من الزر;
الحشو: يضبط المسافة البادئة حول النص داخل الزر;
حجم الخط: يحدد حجم الخط على الزر;
محاذاة النص: يضبط المحاذاة الأفقية للنص على الزر;
زخرفة النص: يضبط نمط زخرفة النص (على سبيل المثال ، تسطير أو يتوسطه خط) على الزر;
مثال على استخدام كس لنمط زر:
زر {
لون الخلفية: أزرق;
اللون: أبيض;
دائرة نصف قطرها الحدود: 5 بكسل;
الحشو: 10 بكسل;
حجم الخط: 16 بكسل;
محاذاة النص: المركز;
زخرفة النص: لا شيء;
}
في هذا المثال ، سيكون للزر خلفية زرقاء ونص أبيض وزوايا مستديرة. سيتم توسيط النص على الزر ، ولن يكون هناك زخرفة عليه.
يمكنك أيضا إضافة أنماط إضافية لتغيير مظهر الزر عند التمرير أو النقر فوقه.:
- زر: تحوم {
- الخلفية اللون: ليتبلو;
- }
زر: نشط {
لون الخلفية: دارك بلو;
| } | في هذا المثال ، سيغير الزر لون الخلفية عند التمرير (باللون الأزرق الفاتح) أو عند النقر عليه (باللون الأزرق الداكن). |
|---|---|
| ولكن إلى جانب استخدام خصائص كس القياسية ، يمكنك أيضا إضافة الطبقات المخصصة الخاصة بك ومعرفات لتخصيص مظهر الأزرار كما تراه مناسبا. على سبيل المثال: | إرسال |
| ثم يمكنك كتابة الأنماط المناسبة لهذه الفئة أو المعرف في ملف كس الخاص بك أو داخل العلامة على الصفحة: | .زر مخصص{ |
لون الخلفية: أخضر;
اللون: أبيض;
}
# إرسال-زر {
لون الخلفية: أحمر;
اللون: أبيض;
}
في هذه الحالة ، سيكون للزر الذي يحتوي على فئة "الزر المخصص" خلفية خضراء ونص أبيض ، وسيكون للزر الذي يحتوي على معرف "إرسال-زر" خلفية حمراء ونص أبيض.
ستساعد الأزرار المصممة بنجاح في تحسين التجربة المرئية للمستخدمين وجعل النموذج الخاص بك أكثر جاذبية.
إضافة أزرار إلى النموذج
لإضافة أزرار إلى النموذج ، يجب عليك استخدام علامة هتمل المناسبة -.
تنشئ العلامة زرا تفاعليا يمكن للمستخدم النقر فوقه لتنفيذ إجراء معين. يمكنك إضافة نص أو عناصر هتمل أخرى داخل العلامة لجعل الزر أكثر إفادة أو مزينة.
مثال على إضافة زر إلى نموذج:
ادفعني!
النتيجة:
انقر لي!
يحتوي الزر الافتراضي على الأنماط التالية:
يتم عرضه على شكل مستطيل مع زوايا مدورة;
يعرض النص الخاص بك في المركز;
يستخدم سلوك المتصفح القياسي عند الضغط على زر الماوس أو تحريره ، بالإضافة إلى الزخارف اللازمة لحالات التمرير.