שדה קלט טקסט
אסוף טקסט בדיוק ובגמישות. משמות פשוטים ועד תבניות מורכבות עם אימות מובנה, עיצוב חכם והתאמה אישית עוצמתית - שדה קלט הטקסט מתאים את עצמו לכל מקרה שימוש עם מגבלות תווים, עיצוב אוטומטי ומצבי סיסמה מאובטחים.
הבסיס של כל טופס וורדפרס
מושלם בשביל:
תכונות עוצמתיות לכל מקרה שימוש
📏 בקרת אורך חכמה
מגבלות תווים מינימליות ומקסימליות
הגדר את ערכי הטקסט הקצרים והארוכים ביותר המותרים. מנע הגשות קצרות מדי או ארוכות מדי באמצעות אימות דפדפן מובנה.
אימות בזמן אמת
משתמשים רואים משוב מיידי אם הפוסט שלהם אינו עומד בדרישות האורך – אין הפתעות לאחר ההגשה.
דוגמאות:
- שם משתמש: מינימום 3, מקסימום 20 תווים
- מיקוד: מינימום 5, מקסימום 10 תווים
- שם: מינימום 2, מקסימום 50 תווים
- הערה: מקסימום 500 תווים
למה זה משנה:
שלוט באיכות הנתונים, מניעת דואר זבל, הבטחת תאימות מסדי נתונים והנחיית משתמשים לספק את כמות המידע הנכונה.
✅ תבניות אימות מובנות
6 סוגי אימות מוגדרים מראש:
- 1. ללא – קבל כל טקסט (ברירת מחדל)
2. דוא"ל – מאמת את פורמט הדוא"ל הנכון ([מוגן בדוא"ל])
3. כתובת URL – דורשת כתובות אינטרנט תקפות (https://example.com)
4. אותיות בלבד – רק תווים אלפביתיים ורווחים (ג'ון דו)
5. מספרים בלבד – ספרות מספריות בלבד (123456)
6. אלפאנומרי – אותיות ומספרים, ללא תווים מיוחדים (משתמש 123)
ועוד דוגמאות מותאמות אישית:
- הגדירו אימות רגולרי משלכם עבור פורמטים מיוחדים כמו:
- לוחיות רישוי: `^[AZ]{3}[0-9]{4}$`
- קודי מוצר: `^[AZ]{2}[0-9]{6}$`
- פורמטים מותאמים אישית ייחודיים לעסק שלך
משוב מיידי:
משתמשים רואים הודעות שגיאה ברורות אם הקלט שלהם אינו תואם לפורמט הנדרש.
✂️ חיתוך אוטומטי של רווחים לבנים
ניקוי נתונים באופן אוטומטי
הסר רווחים מקריים מתחילת ומסוף ערכי טקסט. אין עוד "ג'ון" כשרוצים "ג'ון".
שימוש במקרים:
- כתובות דוא"ל (ללא רווחים)
- שמות משתמש (ללא רווחים ראשיים)
- קודי ייחוס (התאמות מדויקות)
- כל תחום שבו דיוק חשוב
יתרונות:
מפחית שגיאות משתמש, משפר את עקביות הנתונים, מונע בעיות אימות ומפשט התאמה וחיפוש.
🔒 מצב סיסמה
מיסוך קלט מאובטח
הפוך כל שדה טקסט לשדה סיסמה. תווים מופיעים כנקודות (•••) כדי להגן על מידע רגיש מפני גולשים על הכתפיים.
מושלם בשביל:
- הזנת סיסמה וקוד סודי
- קודי אבטחה וטוקנים
- מספרי זיהוי סודיים
- קודי אימות דו-גורמי
התנהגות חכמה:
מצב סיסמה מבטל אוטומטית תכונות סותרות כמו טרנספורמציה של טקסט וסוגי קלט מיוחדים כדי להבטיח אבטחה.
📱 סוגי קלט חכמים
מותאם למובייל ולמחשב שולחני:
- טקסט רגיל – קלט טקסט סטנדרטי לשימוש כללי
- חיפוש – כולל כפתור ניקוי מובנה (X) לאיפוס מהיר
- טלפון – מפעיל מקלדת מספרית במכשירים ניידים להזנת מספר טלפון קלה יותר
- כתובת URL – מציגה מקלדת ניידת ייעודית עם קיצורי דרך בסימנים .com ו-.org
למה זה משנה:
סוג הקלט הנכון מאיץ את הזנת הנתונים בנייד, מפחית שגיאות ומשפר את חוויית המשתמש בכל המכשירים.
🎨 שינוי טקסט אוטומטי
עיצוב טקסט כפי שמשתמשים מקלידים:
- ללא טרנספורמציה – הטקסט נשאר בדיוק כפי שהוזן
- אותיות גדולות – ממיר את כל הטקסט לאותיות גדולות (John Due)
- אותיות קטנות – ממיר את כל הטקסט לאותיות קטנות (ג'ון דו)
- אות ראשונה גדולה - רק האות הראשונה באות גדולה (ג'ון דו)
- אות ראשונה של כל מילה (John Doe)
מושלם בשביל:
- אותיות גדולות: לוחיות רישוי, קודי מדינה, מזהי מוצרים
- אותיות קטנות: כתובות דוא"ל, שמות משתמש
- אות גדולה: התחלות משפטים, שמות בודדים
- מקרה כותרת: שמות מלאים, כתובות, תארים
התנהגות חכמה:
השינוי מתרחש באופן אוטומטי במהלך ההגשה, בעוד שמשתמשים רואים את הקלט המקורי שלהם.
🙈 מצב שדה נסתר
שדות נתונים בלתי נראים
צור שדות שאינם גלויים למשתמשים אך שלח נתונים באמצעות הטופס. מושלם למעקב, קודי הפניה וערכי מערכת.
שימוש במקרים:
- פרמטרים של מעקב UTM
- מזהי מקורות הפניה
- מספרי גרסאות הטופס
- סמני חותמות זמן
- מטא-דאטה מוסתרים
איך זה עובד:
הגדירו את "הערך הנסתר" והוא ייכלל אוטומטית בכל הגשת טופס מבלי להעמיס את ממשק המשתמש של הטופס.
🔀 לוגיקה מותנית
נראות שדה דינמית
הצג או הסתר שדות טקסט בהתבסס על ערכי טופס אחרים. צור טפסים חכמים שמתאימים את עצמם לקלט המשתמש.
כללי לוגיקה מתקדמים:
- לוגיקה וגם - כל התנאים חייבים להתקיים
- לוגיקה או - כל תנאי יכול להפעיל את הפעולה
- 8 אופרטורים - שווה, לא שווה, גדול מ, קטן מ, מכיל, ריק ועוד
שימוש במקרים:
- הצג "שם חברה" רק כאשר סוג המשתמש שווה ל"עסק"
- הצג "מקור הפניה" כאשר "איך שמעת עלינו?" מכיל "הפניה"
- הסתר "פרטים נוספים" כאשר האפשרות הראשית אינה ריקה
- חשיפת "קוד קידום מכירות" כאשר ערך ההזמנה גדול מ-100 דולר
🎯 חוויית משתמש משופרת
תכונות חכמות מובנות:
- ערכי ברירת מחדל - מלאו שדות מראש כדי להאיץ את ההשלמה
- טקסט מציין מיקום – הצג רמזים מועילים לפני שמשתמשים מקלידים
- טקסט עזרה – הוסף תיאורים כדי להבהיר מה להזין
- אימות נדרש – הפוך שדות לחובה עם אינדיקטורים ברורים
- שיעורי CSS מותאמים אישית – החלת עיצוב מותאם אישית שיתאים למותג שלך
- תמיכה בנגישות – תוויות ARIA לקוראי מסך
- מותאם למובייל – קלטים ידידותיים למגע עם מקלדות מתאימות
התקנה פשוטה ב-3 שלבים
הכינו את שדה הזנת הטקסט שלכם תוך דקות
הוסף את שדה הטקסט
גרור ושחרר את שדה קלט הטקסט מהמקטע שדות בסיסיים לתוך הטופס שלך.
קבע אימות ומגבלות
בחר סוג אימות (דוא"ל, כתובת URL, אותיות וכו'), קבע מגבלות תווים מינימליות/מקסימליות, והפעל אופציונלית מצב סיסמה או חיתוך רווחים לבנים.
הגדרת עיצוב
בחר סוג קלט לאופטימיזציה למובייל, בחר טרנספורמציה של טקסט (אותיות גדולות, קטנות וכו') והגדר ערכי ברירת מחדל או מצייני מיקום.
??? זהו! שדה הטקסט שלך מוכן עם אימות ועיצוב חכמים.
אפליקציות בעולם האמיתי
משתמש הרשמה
* שדות שם משתמש עם מגבלות אורך
* הזנת סיסמה עם מיסוך
* שדות שם עם עיצוב רישיות בכותרת
* כתובות דוא"ל עם אימות
טפסים ליצירת קשר
* שם מלא עם אותיות רישיות
* אימות דוא"ל
* מספרי טלפון עם הזנת טלפון
* שדות הודעה/תגובה
E-Commerce
* הזנת קוד קופון (באותיות גדולות)
* שדות הודעה למתנה
* הוראות מיוחדות
* הערות משלוח
יישומים עסקיים
* מספרי זיהוי עובדים
* שמות המחלקות
* מספרי ייחוס
* קודים פנימיים
בקשות ורישום
* מספרי רישוי
* קודי הסמכה
* מספרי חברות
* מזהים מותאמים אישית
חיפוש וסינון
* חיפוש קלט עם כפתור ניקוי
* סינון שדות טקסט
* ערכי מילות מפתח
* קלט שאילתה
אפשרויות שדה מלאות
תצורה בסיסית
- תווית שדה – הכותרת המוצגת מעל שדה הטקסט
- תיאור/טקסט עזרה – הדרכה נוספת למשתמשים
- שדה חובה – הפוך את הזנת הטקסט לחובה
- טקסט מציין מיקום – טקסט רמז לפני הקלדת המשתמשים
אימות אורך
- אורך מינימלי - מספר התווים הקטן ביותר המותר (אימות)
- אורך מקסימלי - מספר התווים המותר (מגבלה מוחלטת)
ערכי ברירת מחדל
- ערך ברירת מחדל - טקסט מולא מראש בעת טעינת הטופס
- ערך מוסתר – ערך עבור שדות מוסתרים (כאשר מצב מוסתר מופעל)
אבטחה ופרטיות
- שדה סיסמה – הסתרת הקלט כסיסמה (מציג נקודות •••)
שדה מוסתר – הפוך את השדה לבלתי נראה אך כלול בהגשות
איכות הנתונים
גזור רווחים לבנים - הסרת רווחים מיותרים מההתחלה והסוף באופן אוטומטי
כללי אימות
- סוג אימות
- אין (טקסט כלשהו)
- אימייל ([מוגן בדוא"ל])
- כתובת אתר (https://example.com)
- אותיות בלבד (AZ בלבד)
- מספרים בלבד (0-9 בלבד)
- אלפאנומרי (AZ ו-0-9)
- תבנית מותאמת אישית (regex)
- תבנית מותאמת אישית – ביטוי רגולרי לאימות מותאם אישית (כאשר נבחר "מותאם אישית")
סוגי קלט
- סוג הכניסה
- טקסט רגיל
- חיפוש (עם כפתור ניקוי)
- טלפון (מקלדת מספרית בטלפון הנייד)
- כתובת URL (מקלדת ניידת ייעודית)
עיצוב טקסט
- טרנספורמציה של טקסט
- אין טרנספורמציה
- עלייה
- באותיות קטנות
- הוספת אות ראשונה גדולה
- כותרת כיסוי
היגיון מותנה
- הפעלת לוגיקה מותנית - הצגה/הסתר בהתבסס על תנאים
- סוג לוגיקה
- כל התנאים חייבים להתקיים (וגם)
- ניתן לעמוד בכל תנאי (או)
- כללי תנאי
- הצג/הסתר – פעולה שיש לנקוט
- שדה - איזה שדה לבדוק
- אופרטור – שווה, לא שווה, מכיל, גדול מ, קטן מ, ריק, לא ריק
- ערך – ערך השוואה
- תנאים מרובים - הוסף כללים ללא הגבלה
אפשרויות מתקדמות
- מחלקות CSS מותאמות אישית – החלת עיצוב מותאם אישית
- מאפייני נגישות – תוויות ותיאורים של ARIA
למה לבחור בשדה הזנת הטקסט שלנו?
✅ רב-תכליתי - עובד עבור שמות, קודים, סיסמאות וכל מה שביניהם
✅ אימות חכם – 6+ תבניות אימות בתוספת ביטוי רגולרי מותאם אישית
✅ מותאם למובייל – מקלדות מתאימות לכל סוג קלט
✅ עיצוב אוטומטי – שינוי טקסט מתרחש באופן אוטומטי
✅ מאובטח - מצב סיסמה מגן על מידע רגיש
✅ ניקוי נתונים – חיתוך רווחים לבנים מונע שגיאות נפוצות
✅ גמיש - שדות נסתרים, ערכי ברירת מחדל, לוגיקה מותנית
✅ ידידותי למשתמש – הודעות אימות ברורות מנחות את המשתמשים
✅ משולב לחלוטין – עובד בצורה חלקה עם כל תכונות הטפסים
שאלות נפוצות
ש: מה ההבדל בין אורך מינימלי/מקסימלי לבין אימות?
אורך מינימלי/מקסימלי קובע כמה תווים מותר. אימות קובע אילו תווים מותר, כגון אותיות בלבד, מספרים בלבד או פורמט דוא"ל.
ש: האם ניתן לאמת גם את האורך וגם את הפורמט?
כן. שלב אורך מינימלי/מקסימלי עם כללי אימות. לדוגמה, הגדר מינימום 3, מקסימום 15 ואימות אלפאנומרי עבור שדה שם משתמש.
ש: איך עובד מצב סיסמה?
מצב סיסמה מסווה תווים עם נקודות, בדיוק כמו שדות סיסמה אופייניים במסכי התחברות.
ש: מה עושה "חיתוך רווחים לבנים"?
זה מסיר רווחים מובילים וסופיים לפני השליחה כך שרווחים מקריים לא יפריעו לאימות.
ש: האם ניתן ליצור תבניות אימות מותאמות אישית?
כן. השתמשו ב"תבנית מותאמת אישית" והוסיפו ביטוי רגולרי כדי לאכוף כל מבנה שאתם צריכים.
ש: כיצד פועלות טרנספורמציות טקסט?
המשתמש מקליד כרגיל, והמערכת משנה את הטקסט בעת השליחה, כגון המרה לאותיות גדולות או רישיות.
ש: מהו סוג הקלט של החיפוש?
זה מוסיף כפתור ניקוי מובנה (X) כך שמשתמשים יכולים לאפס את השדה באופן מיידי בזמן החיפוש.
ש: מדוע להשתמש בסוג הקלט "tel"?
בנייד, הוא פותח מקלדת מספרית כדי להקל על הזנת ספרות בסגנון טלפון.
ש: האם ניתן להשתמש בלוגיקה מותנית עם שדות טקסט?
כן. תנאים כמו "מכיל", "שווה" או "ריק" מאפשרים לך להציג או להסתיר שדות בהתבסס על קלט המשתמש.
ש: למה משמשים שדות נסתרים?
הם מאחסנים נתונים מבלי להיות גלויים למשתמש, שימושי למעקב אחר מטא-דאטה כגון תגי UTM או מקורות הפניה.
ש: האם ניתן להשתמש בשדות טקסט עבור מספרים?
כן, אבל השתמשו בשדה מספר לחישוב או לאימות מספרי. השתמשו בטקסט עם "מספרים בלבד" כשאתם זקוקים לקודים או מזהים שאין להתייחס אליהם כמספרים.
ש: עד כמה מדויקות יכולות להיות תבניות רגולציה?
רֶגֶקס יכול לאכוף תבניות ספציפיות ביותר. השתמשו בבוחן רֶגֶקס אם אתם צריכים לבנות או לאמת תבניות מורכבות.
