نموذج مع تسميات منمقة
كيفية تصميم ملصق نموذج باستخدام CSS. عنصر النموذج الذي يتم استخدامه لتسمية الحقول المختلفة ومناطق الإدخال في نموذج صفحة ويب هو عنصر التسمية. يمكن تصميمه باستخدام قواعد ورقة الأنماط المتتالية.
الخطوة 1
لتحديد نمط عناصر التسمية بالطريقة التي تظهر بها في الصورة في المقدمة ، تحتاج إلى استخدام عنصر التسمية مع السمة "من أجل". علاوة على ذلك ، تحتاج إلى إغلاق عنصر التسمية قبل إضافة عنصر "الإدخال" نفسه. HTML للنموذج الكامل كما هو موضح في الرسم التوضيحي.
فيديو اليوم
الخطوة 2
لتصميم عناصر التسمية ، قمت بعرض الملصقات كعناصر مستوى الكتلة ، والتي تم تحريكها إلى اليسار. ثم قمت بتعيين عرض للملصقات بحيث تكون جميع حقول الإدخال على مسافة موحدة من الملصقات. لقد قمت بتعيين لون وجعل النص غامقًا. لقد استخدمت المحتوى الذي تم إنشاؤه لإضافة نقطتين (:) بعد التسمية. (قد لا تظهر النقطتان في كل متصفح.)
هنا CSS:
التسمية {اللون: # B4886B؛ وزن الخط: عريض ؛ العرض محجوب؛ العرض: 150 بكسل ؛ تعويم: اليسار؛ } label: بعد {content: ":"}
الخطوه 3
فقط من أجل الاكتمال ، سأعرض لك أيضًا CSS المستخدم لتصميم مجموعة الحقول ، نظرًا لأن عناصر التسمية محاطة بمجموعة حقل مُحددة.
إليك CSS:
مجموعة الحقل {border: 1px solid # CCA383؛ العرض: 400 بكسل ؛ الخلفية: # FFE8EF ؛ الحشو: 3 بكسل ؛ } مفتاح مجموعة الحقول {background: # CCA383؛ الحشو: 6 بكسل ؛ وزن الخط: عريض ؛ }
الخطوة 4
يمكنك القيام بالعديد من الأشياء الأخرى لتصميم عناصر التسمية. المثال الخاص بي هو مجرد طريقة واحدة للقيام بذلك.
نموذج HTML
الأشياء ستحتاج
معرفة عملية بـ HTML
معرفة عملية بـ CSS
