לתוכן העניינים.

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

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

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

הטופס שלנו יהיה טופס לוגין פשוט אשר מכיל:

• תיבת טקסט להכנסת מייל
• תיבת סיסמא
• סימון של “זכור אותי”
• שני לחצנים (Login, Register)

התוצאה הסופית בזמן הרצה תראה כך:

הקוד שיוצר את הטופס הנ”ל נראה כך:

ועתה ההסבר.

ראשית כל הקוד עטוף בשני div שאחד קיבל את המחלקה row והשני את המחלקה col-md-6 (ההסבר המלא כאן) ובקצרה, זה גורם לכך שבמסכים קטנים הטופס יתפרש על כל רוחב המסך ואילו במסכים בינוניים וגדולים הטופס יתפרש רק על חצי מן המסך.

לאחר מכן יש div עם המחלקה well (ההסבר כאן) אשר נותן את הרקע האפור/לבן המתחלף מסביב לטופס.

בשלב הבא יש אלמנט מסוג form כאשר בתוכו יש שני div עם המחלקה form-group, למעשה כל אלמנט בטופס מכיל פקד (control) והסבר עליו (label), ה – div שעוטף אותם יקבל את המחלקה form-group.

בפנים כאמור יש אלמנט מסוג label על מחלקת control-label, ו – input כלשהו עם המחלקה form-control.

לאחר מכן יש לנו את סימון ה – “זכור אותי” אשר עטוף במחלקת checkbox ובפנים label אשר בתוכן פקד מסוג checkbox וטקסט (כך שלחיצה על הטקסט גם תסמן את הפקד)

בסוף הטופס יש לנו div עם המחלקה text-right אשר מזיז את כל הטקסט לצד ימין, ובפנים שני “לחצנים” אחד לכניסה השני לרישום, יכולנו להשתמש בלחצנים, במקרה כאן בחרנו להשתמש בלינקים אשר מקבלים את המחלקה הרלוונטית (אחד primary והשני default).

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