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

לדוגמא בתיבת טקסט של שם נרצה להשתמש בתור Label בטקסט "שם" ובתוך התיבה ב Placeholder נרצה לכתוב שם לדוגמא למשל "ישראל ישראלי". בצורה כזאת היישור של ה Placeholder מתאים תמיד ליישור העתידי של הטקסט שיחליף אותו.

ככה זה נראה בקודפן עם תיבה לשם ותיבה נוספת לאימייל:

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

הנה אותה הדוגמא הפעם עם פלייסהולדר בלבד:

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

במצבים כאלה נרצה להבדיל בין יישור ה Placeholder ליישור הטקסט עצמו. הפיתרון הפשוט ביותר הוא עיצוב ה placeholder:

שעובד בכל הדפדפנים מלבד IE ו IE Edge.

אישית הייתי עוצר כאן, אבל אם אתם חייבים את ההתנהגות הזאת גם בדפדפני IE אפשר להשתמש ב JavaScript כדי להוסיף אותה כמו בדוגמא הבאה: