טופס עם תוויות מעוצבות
כיצד לעצב תווית טופס עם CSS. רכיב טופס המשמש לתיוג השדות ואזורי הקלט השונים בטופס של דף אינטרנט הוא רכיב התווית. ניתן לעצב אותו באמצעות כללי גיליון סגנונות מדורגים.
שלב 1
כדי לעצב את רכיבי התווית כפי שהם מופיעים בתמונה במבוא, עליך להשתמש ברכיב התווית עם התכונה "for". יתר על כן, עליך לסגור את רכיב התווית לפני הוספת אלמנט ה"קלט" עצמו. ה-HTML עבור הטופס המלא מוצג באיור.
סרטון היום
שלב 2
כדי לסגנן את רכיבי התווית, גרמתי לתוויות להופיע כאלמנטים ברמת בלוק, אשר הוצפו שמאלה. לאחר מכן הקציתי רוחב לתוויות כך ששדות הקלט יהיו כולם במרחק אחיד מהתוויות. הקציתי צבע ועשיתי את הטקסט מודגש. השתמשתי בתוכן שנוצר כדי להוסיף נקודתיים (: ) אחרי התווית. (ייתכן שהנקודתיים לא יופיע בכל דפדפן.)
הנה ה-CSS:
תווית { color: #B4886B; מודגש; בלוק תצוגה; רוחב: 150 פיקסלים; לצוף: שמאל; } תווית: אחרי { content: ": " }
שלב 3
רק לשם השלמות, אראה לך גם את ה-CSS המשמש לסגנון ערכת השדה, מכיוון שרכיבי התווית מוקפים בערכת שדות עם גבול.
הנה ה-CSS הזה:
fieldset { border: 1px solid #CCA383; רוחב: 400 פיקסלים; רקע: #FFE8EF; ריפוד: 3 פיקסלים; } fieldset legend { background: #CCA383; ריפוד: 6 פיקסלים; מודגש; }
שלב 4
אתה יכול לעשות דברים רבים אחרים כדי לעצב את רכיבי התווית. הדוגמה שלי היא רק דרך אחת לעשות את זה.
הטופס HTML
דברים שתצטרכו
ידע בעבודה ב-HTML
ידע בעבודה ב-CSS
