כיצד לעצב אלמנטי טופס נפוצים בעזרת CSS

מדריכים

הסופר בחר ב־קרן הרב גווניות בטכנולוגיה לקבל תרומה כחלק מתוכנית כתיבה למענה.

הקדמה

טפסי רשת הם רכיב נפוץ בעיצוב אתרי אינטרנט, שנעים ברמת המורכבות משדה טקסט לטפסי יצירת קשר וסינון נתונים מורכבים. לדעת כיצד להשתמש ב־CSS כדי לעצב ולעבוד עם אלו הרכיבים עוזר לספק פתרונות טובים יותר לבעיות היומיומיות אלו, ויכול לשפר את חוויית המשתמש של האתר שלך.

המדריך הזה מכסה את יצירת טופס רשת ועיצובו הכולל של טופס זה, המבקש מידע שונה מהמשתמש. הטופס ישתמש בשדות טקסט, כפתורי רדיו, תיבות סימון, בחירות נפתחות, אזור טקסט, וכפתורי שליחה ואיפוס. תיצר ותעצב את הטופס ואת הרכיבים שלו על ידי איפוס הסגנון עם מאפיין appearance, הגדרת סגנון עצמאי עבור הטופס, הוספת תשובות מציינות מקום עבור שדות הטקסט, והתאמה אישית של כפתורי הרדיו והתיבות סימון עם פסאודו־מחלקות ופסאודו־אלמנטים שונים.

דרישות קדם

הגדרת ה-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 Grid, מספק שדה להודעה שנוצרה על ידי המשתמש, ומכיל תיבת סימון כדי להרשים את המשתמש לרישום לניוזלטר. כדי למצוא עוד על כיצד למבנה טפסים ב־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. לאחר מכן, פתח את דפדפן האינטרנט שלך לבחירתך. בחר בפריט התפריט קובץ בדפדפן ואז בחר באפשרות פתח. לאחר מכן, נווט לתיקיית הפרויקט שלך וטען את הקובץ 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 הוא הדרך המיועדת להסרת העיצוב המיוחד מאלמנטי הטופס. עם זאת, עקב גילויו והיוושותיו של המאפיין הזה, רוב הדפדפנים עדיין דורשים קידוד יצרן הנוסף הנוסף לשם המאפיין. קידוד יצרן (vendor prefix) הוא הוספה קודית מיוחדת שמקודמת לשם המאפיין כזיהוי עבור דפדפן מסוים. עבור 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 בדפדפן. אלמנטי הטופס הושתלו מבחינת העיצוב מהדף, כפי שמוצג בתמונה הבאה:

בחלק זה, השתמשת במראה ובמאפיינים נוספים כדי להסיר לחלוטין את הסגנונות הברירת מחדל מרכיבי הטופס. גם השתמשת בקידודי יצרן כדי להחיל את המאפיין באופן המתאים לגרסאות הדפדפן בעתיד. במקטע הבא, תתחילו להתאים אישית את סגנון העיצוב הוויזואלי של שדות הטופס.

הגדרת סגנונות עקביים בכל שדות הטופס

עכשיו שסגנונות הדפדפן הברירת מחדל הוסרו לחלוטין, תחילתי להחיל אסתטיקה מותאמת אישית על כל אלמנטי הטופס. זה ידרוש ליצירת מזהים קבוצתיים שונים המכוונים למאפיינים מסוימים של הטופס כדי לקבל את הסגנונות המתאימים.

כדי להתחיל, פתחו את 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. זה יצור אזור גדול יותר למשתמש הטופס למלא טקסט בו. ה־CSS המודגש בבלוק הקוד הבא ממחיש איך זה נכתב:

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

textarea {
  min-height: 10rem;
}

לאחר הוספת הסגנונות עבור הרכיב textarea, הדבר הבא להשלים הוא ליצור תיקייה image. זה ניתן לעשות על ידי הרצת הפקודה הבאה בפרומפט שלך מתוך אותה התיקייה כמו קבצי ה־index.html ו־styles.css:

  1. mkdir images

לְאַחַר מֵכָך, הַרְץ אֶת הַפְּקוּדָה curl הַבָּאָה כְּדֵי לִהְיוֹת הוּא מְאוּתָה בַּתְּקוּפָה הַחֲדָשָׁה שֶׁל הַתִּיקָיָה images:

  1. 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, וְאַז חֲזוֹר אֶל הָדְפֵּס כְּדֵי לְרַעֲנֹן אוֹתוֹ. הַתָּיבָה הַמְתוּמֶנֶת כְּעֵת כְּפָלִי גְּבֹהֶה יוֹתֵר מִמָּה שֶׁהִיתְאַזְּרְךָ בְּהַתְחָלָה, וְהָאֶלֶמֶנט <select> מְצוּי לוֹ חָץ כְּחוֹלֵף בְּצַד יָמִין. הָתְמוּנָה הַבָּאָה מַמְחִישָׁה כֵּיצַד זֹאת נִרְאָת בְּדַפְדֵפֶן:

בְּכָל רֶגַע שֶׁעָבַרְתָּ בַּסֶּעָרָה הַזֹּאת, יָצַרְתָּ אֶסְתֵּטִיקָה מְיוּחֶדֶת לְאֶלֶמֶנטֵי הַקֶּלֶט שֶׁבַּטוֹפֶם שָׁם בִּטְפָ

התאמה אישית של לחצני רדיו ותיבות סימון עם המחלקה הוירטואלית :checked

עכשיו שיצרת את האסתטיקה הבסיסית של הטופס, זמן ליישם את הסגנון הוויזואלי הזה על הפריטים האינטרקטיביים input של לחצן רדיו ותיבת סימון.

התחל על ידי פתיחת styles.css בעורך הטקסט שלך. תשנה את הרכיבים input עם מאפיין 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 כך שניתן יהיה ליישם סגנון ממולא ללחצני הרדיו שנבחרו. ה-CSS המודגש מהבלוק הקוד שלמטה מראה איך זה מפורמט:

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 הבאה כדי להוריד את תמונת הסימון לתיקיית התמונות שלך:

  1. 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>. ה-HTML שמודגש בבלוק הקוד הבא מציין איפה להוסיף את ה-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. וודא שאתה משתמש בנקודותיים כפולות בין הבחירה והפסאודו־אלמנט, מכיוון שכך הדפדפן מזהה את ההבדל בין פסאודו־מחלקה ופסאודו־אלמנט. ה-CSS שמודגש בבלוק הקוד הבא מראה איך כתוב זה:

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 על שדות הטקסט ועיצבת אותם באמצעות השימוש באלמנט-הפרט הוירטואלי ::placeholder. בקטע הבא, תיצור סגנונות מותאמים אישית עבור אלמנטי טופס <button>.

יצירת סגנונות לחצני אינטראקטיביים

בטפסים ברשת, אלמנטים של <button> נהוג לשמש לשליחת או איפוס טופס. ב־index.html, ישנם שני לחצנים, אחד עם type של 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;
}

ה-font מגדיר שני כפתורים לקבל את אותו סגנון וגודל פונט. לאחר מכן, מאפיין ה-border-radius מוסיף פינה מעוגלת לשני הכפתורים. ה-cursor משנה את סגנון העכבר להיות מצביע כף יד. לבסוף, מאפיין ה-padding מגדיר את הרווח בין התוכן שבפנים של הכפתור.

שמור את השינויים ב-styles.css ואז פתח את index.html בדפדפן האינטרנט שלך. הטקסט בכפתור יגדל והרווח בין הטקסט יגדל ויראה יותר רחב עקב הרווח. התמונה הבאה מראה כיצד הכפתורים מתייחסים בדפדפן:

באשף הבא, חזור ל-styles.css כדי להוסיף סגנונות לכל סוג של כפתור על ידי שימוש בבורר מאפיינים שמתמקד בכל אחד. לכפתור ה-submit, הוסף צבע רקע כחול וצבע טקסט לבן. לכפתור ה-reset ייתן קו תחתון דומה לקישור ו-רווח כדי להוסיף עוד מרווח בין הכפתורים. הוסף את סגנון ה-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 בעורך הטקסט שלך. הגדר את background-color של הכפתור submit להקישור בעת העכבור מעליו. לאחר מכן, הפוך את הקו התחתון של הכפתור reset להימחק בעת העכבור מעליו. הקטע המסומן ב־HTML מציין איך לכתוב את העיצובים האלה:

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 הם עבור מיקום הצל וכמות הטשטוש. הרביעי נקרא פיזור, אשר במקרה זה יוצר קו עבה בגובה 4px סביב האלמנט עם :focus.

בנוסף, הכפתורים יקבלו מצב :focus מעט שונה, מאחר שהכפתור submit הוא באותו צבע כחול. מטרתו וכוונתו של מצב ה־focus היא למשוך תשומת לב ברורה לאלמנט הממוקד, כך שתבדיל בין המתארים האלה בדרכים שונות.

הוסף בחלק ה CSS של קובץ styles.css את הבחירה button:focus. בבלוק הבחירה, השבת את הגבול המוגדר כברירת מחדל והוסף נכס 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. לאחר מכן, יצרת סגנונות מותאמים אישית לכפתורים, והחלת סגנון :focus תוך הענקת משוב חזותי מועיל למשתמשי הטופס.

אם ברצונך לקרוא עוד מדריכי CSS, נסה את המדריכים האחרים בסדרת כיצד לעצב HTML עם CSS.

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