Get Adobe Flash player
דף הבית טפסים שדות כתיבת טקסט

האתר של רפאלי - בניית טופס HTML

כתיבת טקסט

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

אזור כתיבה TextAtrea

הגדרת אזור לכתיבת טקסט נעשית באמצעות התג <textarea>. הפקודה הבאה יוצרת את אזור הכתיבה:

 

<textarea name="description" cols="50" rows="5"></textarea>

 

מאפייני התג

cols: רוחב האזור. הערך קובע את רוחה האזור על פי מספר התווים בעלי רוחב ממוצע. ערך זה משתנה מגופן לגופן ובין הדפדפנים השונים. ברירת המחדל היא: 20

rows: מספר השורות. ברירת המחדל היא 2

 

תכונות כלליות

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

<textarea name="description" cols="50" rows="5">נא כתוב את בקשתך...</textarea>

 

גלגלת: בכתיבת טקסט בעל מספר שורות רב יותר מהמוגדר, תופיע גלגלת. אולם, בחלק מהדפדפנים (אקספלורר למשל) הגלגלת מופיעה גם כאשר היא אינה נחוצה (היא מופיעה אז באפור - לא פעילה). לשליטה מלאה יש צורך במאפיין overflow:auto של CSS:

<textarea name="description" cols="50" rows="5" style="overflow:auto">נא כתוב את בקשתך...</textarea>

תג <input>

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

 

תיבת טקסט

השורה הבאה תיצור תיבת טקסט ברוחב 30 תווים:

<input name="text1" type="text" size="30" value="" />

מאפייני התג

size: קובע את רוחב התיבה בתווים. ברירת המחדל - 20

maxlength: מספר התווים המרבי שניתן להקליד בתיבה

 

לכתיבת ערך ברירת מחדל: יש לכתוב את הטקסט בתוך המאפיין value.

 

טיפ: למחיקת ברירת מחדל עם כניסת הסמן לתוך התיבה יש צורך להוסיף קטע קטן של ג'אווה סקריפט:

<form name="form1">
<input name="text1" type="text" size="30" value="לחץ כאן, והטקסט ייעלם" onclick="document.form1.text1.value=' ' "/>
</form> 

תיבת טקסט - סיסמה

הפיכת תיבת טקסט רגילה לסיסמה היא פשוטה. כל שנדרש היא להחליף את סוג השדה ל'סיסמה' type="password"

הפיכת השדה לסוג password גורמת למיסוך הכתב, והוא יופיע כנקודות שחורות, כוכביות או תו אחר (מותנה בדפדפן ובגרסה).

 

 

שם השדה כפי שהוא מוצג לגולש - תג <label>

תגית Label עוטפת את האובייקט ומשמשת להעברת מידע אודות שמו היישומי של האובייקט.

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

הדרך הפשוטה לכתוב את שם השדה היא ע"י כתיבת המילים "שם משפחה" לפני או אחרי התגית. לדוגמא:

שם משפחה <input name="first_name" type="text" size="30" value="" />
שם משפחה

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

לצורך כך, משתמשים בתג <label>. התג הזה עוטף את האובייקט ואת השם הצמוד אליו, ובעת הייצוא, ניתן יהיה לקשור בין השם הויזואלי ושם האובייקט:

<label>שם משפחה
<input name="first_name" type="text" size="30" value="" />
</label>
שם משפחה
אל השיעור הקודם אל השיעור הבא