كيفية تنسيق عناصر النموذج الشائعة باستخدام CSS

اختار المؤلف صندوق التنوع في التكنولوجيا لتلقي تبرع كجزء من برنامج الكتابة من أجل التبرعات.

مقدمة

نماذج الويب هي عنصر شائع في تصميم مواقع الويب، تتراوح تعقيدها من حقل نموذج بحث إلى نماذج اتصال وتصفية بيانات معقدة. معرفة كيفية استخدام CSS لتنسيق والعمل مع هذه العناصر يساعد في توفير حلول أفضل لهذه المشكلات اليومية، ويمكن أن يحسن تجربة المستخدم لموقع الويب الخاص بك.

يغطي هذا البرنامج التعليمي إنشاء وتنسيق نموذج ويب يطلب بيانات متنوعة من المستخدم. سيستخدم النموذج حقول نصية، وأزرار راديو، وخانات اختيار، واختيارات منسدلة، ومنطقة نصية، وأزرار إرسال وإعادة تعيين. ستقوم بإنشاء هذا النموذج وتنسيقه وعناصره عن طريق إعادة ضبط الأنماط باستخدام خاصية appearance، وإعداد نمط متسق خاص بك للنموذج، وإضافة إجابات بديلة لحقول النص، وتخصيص أزرار الراديو والخانات اختيار باستخدام مجموعة متنوعة من الصفوف الزائفة والعناصر الزائفة.

المتطلبات المسبقة

تجربة استخدام المحددات المتقدمة للعثور على العناصر في HTML وتطبيق الأنماط عليها باستخدام CSS. لمزيد من المعلومات حول هذا الموضوع، يُرجى الاطلاع على البرنامج التعليمي “كيفية تحديد عناصر HTML باستخدام محددات الهوية والفئة والسمة في CSS“.
معرفة نموذج مربع CSS، الذي يمكنك العثور عليه في البرنامج التعليمي “كيفية العمل مع نموذج المربع في CSS“.
الاطلاع على الصفات الزائفة في CSS. يُمكنك مشاهدة مقدمة في البرنامج التعليمي “كيفية استخدام الروابط والأزرار مع صفات الحالة الزائفة في CSS“.
ملف HTML فارغ محفوظ على جهاز الكمبيوتر المحلي الخاص بك بعنوان index.html الذي يمكنك الوصول إليه من محرر النصوص الخاص بك ومتصفح الويب المفضل لديك. للبدء، يُرجى الاطلاع على البرنامج التعليمي “كيفية إعداد مشروع HTML الخاص بك“، واتباع “كيفية استخدام وفهم عناصر HTML” للحصول على تعليمات حول كيفية عرض ملف HTML الخاص بك في متصفح الويب الخاص بك. إذا كنت جديدًا على HTML، جرب سلسلة “كيفية بناء موقع ويب باستخدام HTML” بأكملها.

إعداد الHTML و CSS الأساسي

في هذا القسم الأول، ستقوم بإعداد الHTML والأنماط الأولية التي ستعمل معها خلال بقية البرنامج التعليمي. سيقوم هذا الHTML بإعداد هيكل الصفحة وإنشاء حقول النموذج التي ستقوم بتنسيقها لاحقًا.

ابدأ بفتح ملف index.html في محرر النصوص الخاص بك. ثم، أضف الHTML التالي لتوفير هيكل أساسي للملف:

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main>
    </main>
  </body>
</html>

العناصر الموجودة داخل عنصر <head> تعرف اسم الصفحة باستخدام العنصر <title> ومكان تحميل ورقة الأنماط عبر العنصر <link>. الوسوم <meta> تعرف ترميز الأحرف وتوجه المتصفح حول كيفية عرض الموقع على أجهزة الشاشة الصغيرة. ستتواجد محتويات النموذج الرئيسية داخل الوسوم <body> و <main>.

بعد ذلك، داخل عنصر <main>، قم بإنشاء عنصر <form>. داخل <form> ستضيف مختلف عناصر النموذج وعناصر <div> للمساعدة في التخطيط. في هذا البرنامج التعليمي، يتم تمييز الإضافات إلى الكود من الخطوات السابقة. أضف الHTML المميزة من الكود التالي إلى ملف index.html الخاص بك:

index.html

...
<main>
  <form>
    <div>
      <label for="name">Name</label>
      <input id="name" type="text" />
    </div>
    <div>
      <label for="email">Email</label>
      <input id="email" type="email" />
    </div>
    <div>
      <label for="comp">Favorite CSS Compiler</label>
      <select id="comp">
        <option value="sass">Sass</option>
        <option value="less">Less</option>
        <option value="stylus">Stylus</option>
        <option value="postcss">PostCSS</option>
        <option value="other">Other</option>
      </select>
    </div>
    <div>
      <fieldset>
        <legend>Are you familiar with CSS Grid?</legend>
        <input type="radio" name="grid" id="yes" value="yes" />
        <label for="yes">Yes</label>
        <input type="radio" name="grid" id="no" value="no" />
        <label for="no">No</label>
      </fieldset>
    </div>
    <div class="full-width">
      <label for="message">Message</label>
      <textarea id="message"></textarea>
    </div>
    <div class="full-width">
      <input type="checkbox" id="newsletter" />
      <label for="newsletter">Receive our newsletter?</label>
    </div>
    <div class="full-width">
      <button type="submit">Send Response</button>
      <button type="reset">Clear Form</button>
    </div>
  </form>
</main>
...

تتكون هيكلية نموذج HTML من قيم السمات المتصلة ببعضها البعض للعمل بشكل صحيح. ينشئ هذا الكود نموذجًا يطلب من المستخدم اسمه وبريده الإلكتروني، ويطلب منه محول CSS المفضل لديه وما إذا كان يعرف الشبكة المرنة لـ CSS، ويوفر حقلًا لرسالة يقوم المستخدم بإنشائها، ويحتوي على خانة اختيار للتسجيل في النشرة الإخبارية. لمعرفة المزيد حول كيفية تنظيم النماذج في HTML، انظر إلى صفحة Mozilla Web Docs عن هيكلية نموذج الويب.

تأكد من حفظ تغييراتك في ملف index.html، ثم قم بإنشاء ملف جديد في نفس الدليل يسمى styles.css.

افتح styles.css في محرر النصوص الخاص بك. يوفر هذا الملف الأنماط التي سيقوم المستعرض بتطبيقها على محتويات index.html. أضف الكود CSS التالي إلى ملف styles.css الخاص بك:

styles.css

body {
  margin: 0;
  background-color: hsl(0, 0%, 98%);
  color: #333;
  font: 100% / normal sans-serif;
}

main {
  margin: 0 auto;
  padding: 4rem 0;
  width: 90%;
  max-width: 60rem;
}

form {
  box-sizing: border-box;
  padding: 2rem;
  border-radius: 1rem;
  background-color: hsl(0, 0%, 100%);
  border: 4px solid hsl(0, 0%, 90%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.full-width {
  grid-column: span 2;
}

ينشئ محددو العناصر body و main بعض التنسيق الأولي للنص والتخطيط للصفحة بشكل عام. ينشئ محدد العنصر form أنماطًا لحاوية النموذج العامة ومن ثم يحدد شبكة CSS تتألف من عمودين من نفس الحجم بـ grid-template-columns: 1fr 1fr;. ثم يقوم gap: 2rem بتوفير تباعد 2rem بين كل صف وعمود في الشبكة. وأخيرًا، يسمح محدد الفئة .full-width بتمديد الحاويات التي تحمل هذه الفئة بين العمودين بدلاً من البقاء في عمود واحد.

احفظ تغييراتك في styles.css. بعد ذلك، افتح متصفح الويب الخاص بك. حدد عنصر القائمة File في المتصفح ثم حدد الخيار Open. بعد ذلك، انتقل إلى مجلد مشروعك وقم بتحميل ملف index.html في المتصفح. تظهر الصورة التالية كيفية عرض الصفحة في المتصفح:

يتم عرض النموذج في مربع أبيض على خلفية رمادية فاتحة. يتم توزيع كل عنصر نموذج عبر الشبكة مع أول أربعة عناصر تتناوب بين العمودين والثلاثة الأخيرة مكدسة، ممتدة عبر العمودين. التنسيق الافتراضي لعناصر النموذج هو كما يظهر في Firefox؛ كل متصفح له تنسيق افتراضي مختلف لعناصر النموذج.

في هذا القسم، قمت بإعداد HTML و CSS الأولي اللازم للعمل مع عناصر النموذج. تعلمت أيضًا أن كل متصفح يتعامل مع تنسيق هذه العناصر بطريقة مختلفة. في القسم التالي، ستستخدم خاصية appearance لتعديل تنسيق عناصر النموذج عبر جميع المتصفحات.

إعادة تعيين تنسيق النموذج باستخدام خاصية `appearance`

يتعامل كل متصفح بطريقة مختلفة مع التنسيق البصري لعناصر النموذج. في كثير من الأحيان، يتجاوز تنسيق هذه العناصر القدرات الأولية لـ CSS ويتبع الجماليات لنظام التشغيل أو لغة التصميم الخاصة بالمتصفح. من أجل إنشاء تنسيق متسق لجميع المتصفحات، في هذا القسم ستستخدم خاصية appearance وخواص أخرى لإزالة أنماط المتصفح الافتراضية.

للبدء، افتح styles.css في محرر النصوص الخاص بك. أنشئ محدد مجموعة جديدًا يتكون من button، fieldset، input، legend، select، و textarea. ثم داخل كتلة المحدد، أضف خاصية appearance معينة إلى none، كما هو موضح في كتلة الكود التالية:

styles.css

...
button,
fieldset,
input,
legend,
select,
textarea {
  appearance: none;
}

تعتبر خاصية appearance الطريقة المقصودة لإزالة التنسيق الخاص من عناصر النموذج. ومع ذلك، نظرًا لعمر وتنفيذ هذه الخاصية، لا يزال معظم المتصفحات يتطلبون إضافة بادئة للبائع إلى اسم الخاصية. البادئة الخاصة بالبائع هي إضافة مُعرَّفة مُخصَّصة مضافة إلى اسم الخاصية كمعرِّف لمتصفح محدد. بالنسبة لمتصفحي Chrome، Safari، والإصدارات الحديثة من Edge و Opera، تكون تلك البادئة هي -webkit-. بينما يستخدم Firefox البادئة -moz-.

عند العمل مع بادئات البائع، من المهم وضع إصدارات بادئات البائع للخاصية أولاً والانتهاء بالإصدار غير المبادئ للخاصية. بهذه الطريقة، ستستخدم المتصفحات القديمة التي تدعم فقط الخاصية المبادئية البادئة الخاصة بها، البادئة، لكن المتصفحات الجديدة التي تدعم كل من البادئة والإصدارات غير المبادئ ستستخدم الإصدار القياسي غير المبادئ. أضف البادئة المظللة appearance الخاصة بالخصائص كما هو مهيأ في الكود التالي:

styles.css

legend,
fieldset,
select,
textarea,
input,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

احفظ تغييراتك في styles.css ثم افتح index.html في متصفحك. تمت إزالة التنسيق الزخرفي لخصائص appearance وانتقلت إلى نمط أبسط، كما هو موضح في الصورة التالية:

خاصية appearance تسمح فقط لك بتغيير التنسيق الخاص بالمتصفح. أكبر تغيير أحدثه القيمة appearance: none للخاصية كان في إزالة أزرار الاختيار والاختيار بالكامل. بالنسبة لبقية عناصر النموذج، هناك حاجة إلى بضع خصائص إضافية لإزالة الأنماط الافتراضية بشكل كامل. الخصائص المظللة لـ CSS في الكود التالي تضيف الأنماط اللازمة لإزالة الأنماط الافتراضية:

styles.css

...
button,
fieldset,
input,
legend,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

هذا الـ CSS يزيل لون الخلفية ويعيد تعيين معلمات نموذج الصندوق. ليست جميع هذه الأنماط ضرورية لجميع العناصر، ولكن من المقبول تجميع هذه الأنماط الإعادة عبر جميع العناصر.

احفظ تغييراتك في styles.css، ثم قم بتحديث index.html في المتصفح. اختفت عناصر النموذج تمامًا من الصفحة، كما هو موضح في الصورة التالية:

في هذا القسم، استخدمت appearance وخصائص إضافية لإزالة الأنماط الافتراضية تمامًا من عناصر النموذج. كما استخدمت بادئات البائعين لتطبيق الخاصية بشكل مناسب لإصدارات المتصفح المستقبلية. في القسم التالي، ستبدأ في تخصيص النمط البصري لحقول النموذج.

ضبط الأنماط المتسقة عبر حقول النموذج

الآن بعد إزالة الأنماط الافتراضية للمتصفح تمامًا، ستقوم بتطبيق مظهر مخصص متسق عبر جميع عناصر النموذج. سينطوي هذا على إنشاء محددات مجموعة مختلفة تستهدف خصائص النموذج المحددة لتلقي الأنماط المناسبة.

للبدء، افتح styles.css في محرر النصوص الخاص بك. ثم، قم بإنشاء محدد مجموعة يتكون من input، select، و textarea. أضف الأنماط المميزة من الكود التالي:

styles.css

...
legend,
fieldset,
select,
textarea,
input,
button {
  ...
}

input,
select,
textarea {
  border: 2px solid #333;
  background-color: white;
  border-radius: 0.25rem;
}

هذه الأنماط تضيف حدودًا رمادية داكنة بسمك 2 بكسل حول كل عنصر إدخال بيانات، إلى جانب خلفية بيضاء وزوايا مستديرة.

بعد ذلك، ستقوم بتطبيق أنماط لعناصر إدخال البيانات التي تحتوي على نص بداخلها. ستستخدم محدد السمات لتحديد العناصر input المستهدفة استنادًا إلى قيمة السمة type. الـ CSS المميزة في الكود التالي توفر الأنماط للعناصر الضرورية:

styles.css

...
input,
textarea,
select {
  ...
}

input[type="text"],
input[type="email"],
select,
textarea {
  font: 1.25rem / 1.5 sans-serif;
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem 0.75rem;
}

تطبق هذه الأنماط حجم وعائلة خط متسقة عبر جميع العناصر. على سبيل المثال، العنصر <textarea>، لا يرث إعدادات الخط من العنصر body. توفر خصائص display، box-sizing، width، و padding تخطيطًا وهيكلًا متسقين لكل من عناصر إدخال البيانات هذه.

احفظ التغييرات على styles.css ثم افتح index.html في متصفح الويب الخاص بك. كما هو موضح في الصورة التالية، الحقول الآن لديها حدود رمادية داكنة أسمك ونص العنصر <select> أكبر بكثير الآن:

بعد ذلك، هناك عنصران يحتاجان إلى بعض التنسيق الخاص بالإضافة إلى التنسيق الشامل الذي قمت بكتابته بالفعل. الأول هو منح المزيد من الارتفاع للعنصر textarea، والثاني هو تطبيق سهم منسدل مخصص على العنصر <select>.

عد إلى styles.css وأضف محدد العنصر textarea. داخل كتلة المحدد، قم بإنشاء خاصية min-height مع تعيين قيمة 10rem. هذا سينشئ مساحة أكبر في البداية لمستخدم النموذج لملء النص فيها. يوضح الكود المميز في الكود التالي كيفية كتابة ذلك:

styles.css

...
input[type="text"],
input[type="email"],
select,
textarea {
  ...
}

textarea {
  min-height: 10rem;
}

بعد إضافة الأنماط لعنصر textarea، الشيء التالي لإنجازه هو إنشاء مجلد image. يمكن القيام بذلك عن طريق تشغيل الأمر التالي في نافذة الأوامر الخاصة بك من داخل نفس دليل ملفات index.html و styles.css:

mkdir images

ثم، قم بتشغيل الأمر curl التالي لتحميل الصورة الأولى التي ستعمل معها إلى دليل images الجديد:

curl -sL https://assets.digitalocean.com/articles/68129/down-arrow.svg -o images/down-arrow.svg

الصورة التي قمت بتحميلها هي SVG، وهو لغة وصفية مشابهة لـ HTML بغرض رسم الأشكال.

لإضافة هذه الصورة الجديدة إلى عنصر <select>، عد إلى styles.css. ثم، أنشئ محدد عنصر select وأضف خاصية background بالقيمة المميزة من الكود التالي:

styles.css

...
textarea {
  min-height: 10rem;
}

select {
  background: url("images/down-arrow.svg") no-repeat center right 0.75rem;
}

هذه الخاصية background تحمل الصورة إلى خلفية عنصر <select> ولا تكرر الصورة. ثم تُوسِّط الصورة عمودياً باستخدام center وتنقلها بعيداً عن الحافة اليمنى بواحد وثلاثة أرباع البوصة باستخدام right 0.75rem.

احفظ التغييرات الخاصة بك في styles.css، ثم عد إلى متصفحك لتحديث الصفحة. أصبحت <textarea> الآن ضعف ارتفاعها الأصلي تقريبًا، وللعنصر <select> سهم أزرق متجه نحو الأسفل على الجانب الأيمن. توضح الصورة التالية كيف يتم عرض هذا في المتصفح:

طوال هذا القسم، قمت بإنشاء مظهر مخصص لعناصر إدخال البيانات في النموذج. كما قمت بإنشاء خلفية لعنصر <select> لاستبدال السهم الافتراضي. في القسم التالي، ستقوم بإنشاء أزرار اختيار وخانات اختيار مخصصة وتطبيق حالات المحدد عندما يتم التحقق منها.

تخصيص أزرار الراديو والمربعات الاختيارية باستخدام فئة الزائفة `:checked`

الآن بعد أن قمت بإنشاء الشكل الجمالي الأساسي للنموذج، حان الوقت لتطبيق ذلك النمط البصري على عناصر الإدخال التفاعلية لزر الراديو والمربع الاختياري.

ابدأ بفتح styles.css في محرر النصوص الخاص بك. ستقوم بتغيير عناصر الإدخال التي تحتوي على سمة type تساوي radio أو checkbox لتكون لها قيمة طول وعرض متساوية. ثم ستقوم بتحويل أزرار الراديو إلى دوائر. توضح الأجزاء المظللة في كتلة الكود التالية كيف يتم تنسيق ذلك:

styles.css

...
select {
  ...
}

input[type="radio"],
input[type="checkbox"] {
  height: 1.5em;
  width: 1.5em;
  vertical-align: middle;
}

input[type="radio"] {
  border-radius: 50%;
}

خاصية vertical-align مخصصة لمحاذاة عناصر النص المضمن. عند ضبطها على middle، ستجعل حقول الإدخال تتوسط المحاذاة النصية. ثم، سينشئ الإدخال الراديو بخاصية border-radius بقيمة 50% دائرة لأن الارتفاع والعرض متساويان.

احفظ التغييرات على styles.css ثم افتح index.html في متصفحك. الأزرار الراديوية الاثنان والمربع الاختياري الآن أكبر وأكثر وضوحًا كما هو موضح في الصورة التالية:

إذا تفاعلت مع أزرار الراديو أو الخانات، لن يحدث شيء مرئي. تقوم خاصية appearance أيضًا بإزالة مؤشرات الاختيار المحددة لهذه الأنواع من المدخلات. فيما بعد، ستستخدم محدد الصنف الوهمي :checked لتطبيق أنماط على عناصر المدخلات المحددة.

عد إلى styles.css وأنشئ محددًا جديدًا لمدخل الزر الراديو مع فئة شبحية :checked. ثم، داخل كتلة المحدد، أضف background-image بـ radial-gradient لتطبيق نمط مملوء على أزرار الراديو المحددة. يوضح الكود المظلل من الكود التالي كيف يتم تنسيق ذلك:

styles.css

...
input[type="radio"] {
  border-radius: 50%;
}

input[type="radio"]:checked {
  background-image: radial-gradient(
    hsl(213, 73%, 50%) 40%,
    transparent calc(40% + 1px)
  );
}

تسمح الدالة calc() بتعيين خاصية transparent إلى 1px بعد قيمة اللون، مما يخلق دائرة زرقاء صلبة داخل الحقل المدخل.

احفظ التغييرات الخاصة بك في styles.css وعد إلى index.html في متصفحك. الأزرار الراديو الآن لديها دائرة زرقاء صلبة محاطة باللون الأبيض داخل المدخل. الصورة التالية تُظهر الزر الراديو نعم المحدد:

بعد ذلك، ستستخدم الخانة اختيار الصورة الخلفية للإشارة إلى حالتها :checked، على غرار السهم في <select> القائمة المنسدلة.

قم بتشغيل الأمر curl التالي لتنزيل صورة العلامة الدالة إلى دليل images الخاص بك:

curl -sL https://assets.digitalocean.com/articles/68129/check.svg -o images/check.svg

الآن بعد أن قمت بتنزيل الصورة وأعدت استخدامها، عد إلى styles.css في محرر النص الخاص بك.

ثم، أضف محددًا input[type="checkbox"] مع فئة وهمية :checked مرتبطة. في كتلة المحدد، أضف خاصية background التي تحمل صورة check.svg وتقوم بتصغيرها لتناسب الصندوق. يوضح الكود CSS المظلل في الكود التالي كيفية كتابة ذلك:

stlyes.css

...
input[type="radio"]:checked {
  ...
}

input[type="checkbox"]:checked {
  background: url('images/check.svg') no-repeat center / 75% auto;
}

قيم خاصية background تضمن أن تكون صورة علامة الاختيار مُوسَّعة في وسط الحاوية، وأنها لا تُكرَّر، وأنها مُصغَّرة بنسبة 75% بشكل متناسب.

احفظ التغييرات على styles.css ثم قم بتحديث الصفحة في المتصفح. عند تحديد مربع الاختيار استقبال النشرة الإخبارية لدينا، ستظهر الآن علامة صح داخله، كما هو موضح في الصورة التالية:

في هذا القسم، قمت بإنشاء أزرار اختيار مخصصة وحقول إدخال وجعلتها تعدي حالتها المحددة من خلال استخدام الفئة الوهمية :checked. في القسم التالي، ستقوم بتنسيق عناصر <label> و <legend> على الصفحة.

إضافة أنماط خاصة إلى التسميات والأساطير

العناصر التالية التي ستتم تنسيقها هي عناصر <label> و <legend> في النموذج. هناك نوعان مختلفان من الأنماط سيتم استخدامهما: نمط التسمية الصغيرة لزر الاختيار ومربعات الاختيار ونمط التسمية الكبيرة للعناصر الباقية.

افتح index.html في محرر النصوص الخاص بك. ستقوم بإضافة سمة class إلى كل من <label> و <legend> بقيمة إما large-label أو small-label، كما هو موضح في الكود التالي:

index.html

...
<form>
  <div>
    <label for="name" class="large-label">Name</label>
    <input id="name" type="text" />
  </div>
  <div>
    <label for="email" class="large-label">Email</label>
    <input id="email" type="email" />
  </div>
  <div>
    <label for="comp" class="large-label">Favorite CSS Compiler</label>
    ...
  </div>
  <div>
    <fieldset>
      <legend class="large-label">Are you familiar with CSS Grid?</legend>
      <input type="radio" name="grid" id="yes" value="yes" />
      <label for="yes" class="small-label">Yes</label>
      <input type="radio" name="grid" id="no" value="no" />
      <label for="no" class="small-label">No</label>
    </fieldset>
  </div>
  <div class="full-width">
    <label for="message" class="large-label">Message</label>
    <textarea id="message"></textarea>
  </div>
  <div class="full-width">
    <input type="checkbox" id="newsletter" />
    <label for="newsletter" class="small-label">Receive our newsletter?</label>
  </div>
  ...
</form>
...

احفظ هذه الإضافات في index.html، ثم افتح styles.css في محرر النصوص الخاص بك.

في styles.css، أضف محدد صنف .large-label وأضف الخصائص التالية كما هو موضح في الكود التالي:

styles.css

...
.full-width {
  grid-column: span 2;
}

.large-label {
  display: inline-block;
  font: bold 1.5rem sans-serif;
  margin-bottom: 0.5rem;
}
...

هذه الأنماط تضبط العناصر large-label لتكون كبيرة وعريضة بحجم خط 1.5rem، ما يعادل 24px. ثم خاصية margin-bottom توفر بعض المسافة بين التسمية ونظرائها.

احفظ هذا التغيير في styles.css وافتح index.html في متصفح الويب الخاص بك. سيكون نص التسمية أعلاه لحقل إدخال البيانات كبيرًا وعريضًا، كما هو موضح في الصورة التالية:

عد إلى styles.css وأنشئ محدد صنف آخر لـ .small-label. نظرًا لأن هذه هي التسميات التي تكون على يمين زر الاختيار أو مربع الاختيار، ستحتاج إلى بعض الأنماط المختلفة في التباعد والحجم مقارنة بـ .large-label. أضف CSS المظلل إلى styles.css الخاص بك من الكود التالي:

styles.css

...
.large-label {
  display: inline-block;
  font: bold 1.5rem sans-serif;
  margin-bottom: 0.5rem;
}

.small-label {
  vertical-align: middle;
  display: inline-block;
  margin-left: 0.25rem;
  margin-right: 1.5rem;
  font: 1.25rem sans-serif;
}
...

ستزيد vertical-align: middle من تعويض النص قليلاً. الخط مضبوط على 1.25rem، المعادل لـ 20px، بخط sans-serif. الخصائص margin على اليسار واليمين توفر مسافة بين حقول الإدخال والتسمية.

قم بحفظ التحديثات الخاصة بك في styles.css وقم بتحديث index.html في المتصفح. تم تكبير التسميات الموجودة بجوار أزرار الراديو والخانات التحقق الآن وتوفير المزيد من التباعد، كما هو موضح في الصورة التالية:

في هذا القسم، قمت بإنشاء أنماط لنوعين مختلفين من التسميات استنادًا إلى مكانها بالنسبة إلى قيمة الإدخال الخاصة بها. الآن تبرز التسميات، مما يوفر قراءة أسهل وتنقل أسهل في جميع أنحاء النموذج. في القسم التالي، ستقدم تنسيقات بيانات مثالية من خلال استخدام سمة placeholder.

توفير محتوى العنوان البديل باستخدام عنصر الشبح `::placeholder`

يوفر محتوى العنوان البديل على عنصر input أو textarea للمستخدمين نموذجًا بصريًا لنوع المعلومات المطلوبة وكيفية تنسيقها. يتم إضافة سمة placeholder إلى HTML مع قيمة تصفها. ثم يسمح العنصر الشبحي ::placeholder بتخصيص مظهر النص.

لبدء إنشاء محتوى العناصر النائبة، قم بفتح index.html في محرر النصوص الخاص بك. أضف سمة placeholder إلى عنصر النص الخاص بالاسم <input />، وعنصر البريد الإلكتروني <input />، وعناصر <textarea>. العلامة الفارقة في الشيفرة البرمجية التالية تشير إلى المواضع التي يجب إضافة فيها placeholder والقيمة المستخدمة:

index.html

...
<form>
  <div>
    <label for="name" class="large-label">Name</label>
    <input id="name" type="text" placeholder="First or Full Name" />
  </div>
  <div>
    <label for="email" class="large-label">Email</label>
    <input id="email" type="email" placeholder="[email protected]" />
  </div>
  ...
  <div class="full-width">
    <label for="message" class="large-label">Message</label>
    <textarea id="message" placeholder="Leave a message…"></textarea>
  </div>
  ...
</form>
...

قم بحفظ التغييرات على index.html، ثم قم بفتح الصفحة في متصفح الويب. الآن لديك محتوى داخل هذه المناطق الثلاث لإدخال النص. بمجرد تحديد هذه المجالات وإضافة محتوى، سيتم إزالة نص العنصر النائب بواسطة المتصفح. توضح الصورة التالية كيفية ظهور أنماط العناصر النائبة الافتراضية في المتصفح:

لتنسيق الـplaceholder، قم بفتح styles.css في محرر النصوص الخاص بك. أضف محدد مجموعة لـinput::placeholder وtextarea::placeholder. تأكد من استخدام نقطتين بين المحدد والعنصر الزائف، حيث يمكن للمتصفح التعرف على الفارق بين فئة زائفة وعنصر زائف. الشيفرة المبرزة في الكود التالي توضح كيفية كتابة ذلك:

styles.css

...
textarea {
  min-height: 10rem;
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* فَيَرفُكس */
  color: hsl(213, 73%, 50%);
}

select {
  background: url("images/down-arrow.svg") no-repeat center right 0.75rem;
}
...

الشيء الوحيد الذي يجب ملاحظته هو أن فَيَرفُكس يتطلب قيمة تعتيم opacity مضبوطة على 1 لكي يكون لون النص الكامل. وإلا فإن فَيَرفُكس يقلل من opacity، مما يخفض لون النص ويسبب مشاكل في التباين اللوني المتاح اعتمادًا على قيمة اللون. نظرًا لأن هذا الأمر مقتصر على فَيَرفُكس فقط، يوجد تعليق هناك لشرح غرض وجود خاصية opacity.

قم بحفظ التغييرات على styles.css والعودة إلى المتصفح لتحديث index.html. أصبح نص العنصر النائب الآن لونًا أزرق مماثل للون المستخدم للسهم المنسدل وحالات الاختيار لزر الراديو والخانة الاختيارية المحددة. توضح الصورة التالية كيفية عرض محتوى العنصر النائب في المتصفح:

مع هذا القسم، قمت بإنشاء محتوى placeholder على حقول إدخال النص وتنسيقها باستخدام العنصر الزائف ::placeholder. في القسم التالي، ستقوم بإنشاء أنماط مخصصة لعناصر النموذج <button>.

إنشاء أنماط أزرار تفاعلية

في نماذج الويب، تُستخدم عناصر <button> غالبًا لإرسال أو إعادة تعيين نموذج. في index.html، هناك زرين، أحدهما بنوع submit والآخر reset. كلاهما مفيد وظيفيًا، لكنهما يقومان بإجراءات متضادة. يقوم زر الـsubmit بإرسال النموذج إلى معالج، بينما يقوم زر الـreset بمسح جميع البيانات المُدخلة من النموذج. نظرًا لهذه الإجراءات المختلفة، فإنه من الضروري أن تبدو عناصر <button> مختلفة بصريًا أيضًا.

للبدء، افتح styles.css في محرر النصوص الخاص بك وأنشئ محدد عنصر button. في هذا البلوك المحدد، ستضيف الأنماط التي تشترك بين عناصر submit و reset <button>، كما هو موضح في الكود التالي:

styles.css

...
input[type="checkbox"]:checked {
  background: url("images/check.svg") no-repeat center / 75% auto;
}

button {
  font: 1.25rem sans-serif;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0.75rem 1.25rem;
}

تعيين الخط يُعطي كلا الزرين نفس نمط الخط والحجم. ثم يضيف خاصية border-radius زاوية مستديرة لكلا الأزرار. خاصية cursor تغير نمط المؤشر ليكون بشكل اليد المؤشرة. وأخيراً، تعريف خاصية padding المسافة حول الجزء الداخلي من الزر.

احفظ التغييرات الخاصة بك في styles.css ثم افتح index.html في متصفح الويب الخاص بك. سيزيد حجم النص في الزر وسيزيد التباعد بين النصوص بشكل بصري بسبب التباعد. تُظهر الصورة التالية كيفية عرض الأزرار في المتصفح:

بعد ذلك، عد إلى styles.css لإضافة الأنماط لكل نوع من الأزرار عن طريق استخدام محدد السمات المستهدف لكل منها. لزر submit، أضف لون خلفية أزرق ولون نص أبيض. زر reset سيحصل على تسطير شبيه بالوصلة و margin لإضافة المزيد من المسافة بين الأزرار. أضف ال CSS المظلل من الكود التالي إلى ملف styles.css الخاص بك:

styles.css

...
button {
  ...
}

button[type="submit"] {
  background-color: hsl(213, 73%, 50%);
  color: white;
}

button[type="reset"] {
  text-decoration: underline;
  margin-left: 1rem;
}

احفظ هذه الإضافات في styles.css ثم قم بتحديث index.html في محرر النصوص الخاص بك. أصبح زر submit الآن أزرق بارز وأبيض، بينما يظهر زر reset كنص تحته خط، كما هو موضح في الصورة التالية:

العنصر <button> ليس لديه حالة :hover بشكل افتراضي، لذلك ستقوم الآن بإضافتها إلى نمطك. حالة :hover مفيدة لمساعدة مستخدمي المؤشر على الحصول على ردود فعل بصرية توضح أن المؤشر موجود على الأزرار.

لإنشاء حالات :hover لهذه العناصر <button>، عد إلى styles.css في محرر النصوص الخاص بك. قم بتعيين backgound-color لزر submit ليظلم عند التحويم. ثم، اجعل زر reset يسقط الخط السفلي عند التحويم. النص المظلل في الكود التالي يوضح كيفية كتابة هذه الأنماط:

styles.css

...
button[type="submit"] {
  background-color: hsl(213, 73%, 50%);
  color: white;
}

button[type="submit"]:hover {
  background-color: hsl(213, 73%, 40%);
}

button[type="reset"] {
  text-decoration: underline;
  margin-left: 1rem;
}

button[type="reset"]:hover {
  text-decoration: none;
}

احفظ التغييرات على styles.css وانتقل إلى المتصفح لتحديث index.html. كما يظهر الرسم المتحرك التالي، تتغير أنماط العناصر <button> عند تحويم المؤشر فوقها:

في هذا القسم، قمت بإنشاء أنماط لعناصر <button> لجعل الفروقات بينها ملحوظة بصريًا. لقد قمت بتغيير كيفية ظهور المؤشر عند التحويم عن طريق ضبط خاصية cursor. كما قمت بإنشاء أنماط مخصصة لتطبيقها على كل زر لتوفير مزيد من ردود الفعل البصرية. في القسم الأخير، ستقدم مزيدًا من ردود الفعل البصرية عندما يكون عنصر النموذج قيد الاستخدام حاليًا باستخدام الفئة الشبه الفرعية :focus.

توضيح الحقول النموذجية النشطة بواسطة `:focus`

عند ملء الاستمارة، من المهم أن يعرف المستخدم أي حقل يعمل عليه حاليًا. يمكنك تحقيق ذلك باستخدام الفئة الزائفة :focus. بشكل افتراضي، تستخدم المتصفحات خاصية outline للإشارة إلى عنصر يحمل :focus، ولكن في بعض الأحيان قد لا يكون إشارة ملحوظة، أو قد تتعارض مع جوانب بصرية أخرى من التصميم. في هذا القسم، ستقوم بإنشاء حالة :focus مخصصة تتناسب مع الجمالية الخاصة بنموذج الاستمارة الخاص بك.

لبدء العمل مع حالات حقل النموذج :focus، افتح styles.css في محرر النصوص الخاص بك. قم بإنشاء محدد مجموعة لـ input، select، و textarea، جميعها مع فئة زائفة :focus، كما هو موضح في كتلة الكود التالية:

styles.css

...
input,
select,
textarea {
  ...
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 4px hsl(213, 90%, 70%);
}

input[type="text"],
input[type="email"],
select,
textarea {
  ...
}
...

هذه الأنماط تقوم بإزالة قيمة outline الافتراضية للمتصفح وتستبدل النمط بخط زرقاء سميكة يتم إنشاؤه باستخدام خاصية box-shadow. القيم الثلاث الأولى من box-shadow هي لموضع الظل وكمية الضبابة. الرابعة تسمى الانتشار، والتي في هذه الحالة تخلق 4 بكسل خط حول العنصر المركز.

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

أضف محدد button:focus إلى styles.css. في كتلة المحدد، قم بتعطيل القيمة الافتراضية لخاصية outline وأضف خاصية box-shadow. ستبقى قيم الترتيب، الضبابية، وانتشار الظل كما هي في حقول الإدخال، ولكن اللون سيكون أسودًا بدلاً من أزرق، كما هو موضح في كتلة الشفرة التالية:

styles.css

...
button {
  ...
}

button:focus {
  outline: none;
  box-shadow: 0 0 0 4px black;
}

button[type="submit"] {
  ...
}
...

قم بحفظ التغييرات على styles.css وعد إلى المتصفح الخاص بك. قم بتحديث index.html وابدأ بضغط على مفتاح Tab لتحويل التركيز بين كل عنصر في النموذج. توضح الرسوم المتحركة التالية كيفية تطبيق نمط التركيز عند تغيير التركيز باستخدام مفتاح Tab:

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

الاستنتاج

النماذج هي عنصر شائع في تصميم الويب. تتيح للمستخدمين التفاعل مع التطبيقات والبحث في المحتوى وتقديم الملاحظات. في هذا البرنامج التعليمي، قمت بإنشاء نموذج كامل وأسلوب له. لقد قمت بإزالة الأنماط الافتراضية للمتصفح باستخدام خاصية appearance، وأنشأت تصميمًا جماليًا مخصصًا عبر مختلف العناصر. استخدمت الفئة الزائفة :checked لإنشاء حالات محددة لأزرار الاختيار ومربعات الاختيار. ثم أضفت محتوى placeholder وتطابقت الأنماط مع العنصر الزائف ::placeholder. بعد ذلك، قمت بإنشاء أنماط زر مخصصة وقمت بتطبيق أنماط :focus مما يوفر تغذية راجعة مرئية قيمة لمستخدمي النموذج.

إذا كنت ترغب في قراءة المزيد من برامج التعليم الخاصة بـ CSS، جرب البرامج التعليمية الأخرى في سلسلة كيفية تنسيق HTML بـ CSS.

Source:
https://www.digitalocean.com/community/tutorials/how-to-style-common-form-elements-with-css