HTML/טפסים/מאפיינים

פרק זה מציג את כל המאפיינים ושימושיהם. הוא שימושי לכולם אך חלק מהמידע שימושי ליודעי שפות צד שרת כמו PHP וחלק נוסף ליודעי שפות צד לקוח כמו Javascript.

form

מאפיינים כלליים: (ליבה, שפה ואירוע).

action

action הוא מאפיין נחוץ! ערכו צריך להיות כתובת אינטרנט לדף שמקבל את נתוני הטופס. לרוב ערכו הוא כתובת HTTP של תסריט צד שרת. ניתן להשתמש גם בכתובת דואר אלקטרוני כפי שהוצג בפרק טפסים למתחילים.

method

למאפיין זה שני ערכים אפשריים, "get" ו- "post". ערך ברירת המחדל שלו הוא "get".

כאשר שולחים דואר אלקטרוני, נשתמש ב-post.

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

"http://he.wikibooks.org/w/index.php?title=HTML/טפסים/מתחילים&action=edit"

בקישור זה ניתן לראות שלטופס שהגיש אותו היו שני משתנים:

משתנה title עם ערך "HTML/טפסים/מתחילים"
משתנה action עם ערך edit""

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

כלל האצבע הוא: אם לשליחת הטופס אין השפעות (כמו שינוי מסד הנתונים) משתמשים ב-get. כך מנועי חיפוש יודעים להבדיל בין הדפים של ויקי-ספר למשל. אם יש לו השפעות משתמשים ב-post.

accept - מאפיין זה שימושי כאשר שולחים קבצים בעזרת הטופס. הוא מגדיר אילו סוגי קבצים מותר לשלוח דרך הטופס.
accept-charset - מאפיין זה מגדיר את הקידוד שבו יישלחו הנתונים מהטופס. כברירת מחדל, הנתונים יישלחו בקידוד של הדף בו נמצא הטופס אך ניתן לבחור בקידוד שונה. ניתן לבחור כמה קידודים ברשימה מופרדת בפסיקים.
enc-type - מאפיין זה שימושי כאשר שולחים טופס בשיטת post. ערך ברירת המחדל שלו הוא "application/x-www-form-urlencoded" - קידוד לשליחת טפסים. ערך נוסף שלו הוא "multipart/form-data" בו יש להשתמש כאשר שולחים קבצים בעזרת הטופס. עוד ערך אפשרי הוא "text/plain" בו משתמשים לשליחת דואר אלקטרוני כפי שהוצג בפרק טפסים למתחילים.

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

onsubmit - אירוע זה קורה כאשר המשתמש מגיש את הטופס.
onreset - אירוע זה קורה כאשר המשתמש מאפס את הטופס.

מאפייני המיקוד

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

tabindex
accesskey
onfocus - מאפיין מסוג אירוע: ערכו הוא תסריט (סקריפט) שמתרחש כאשר שדה הקלט מקבל מיקוד.
onblur - מאפיין מסוג אירוע: ערכו הוא תסריט (סקריפט) שמתרחש כאשר שדה הקלט מאבד מיקוד.

השימוש בשניים הראשונים מוסבר בפרק טפסים פשוטים ומקצועיים.

אירועי קלט

גם אירועי הקלט משותפים לכמה אלמנטים:

onchange - מאפיין מסוג אירוע: ערכו הוא תסריט (סקריפט) שמתרחש כאשר ערך השדה משתנה.
onselect - מאפיין מסוג אירוע: ערכו הוא תסריט (סקריפט) שמתרחש כאשר הטקסט בשדה נבחר.

input

מאפיינים כלליים: (ליבה, שפה ואירוע).
name - מאפיין חשוב זה צריך להיות זהה למאפיין id למעט במקרה של כפתורי רדיו.
מאפייני מיקוד (tabindex, accesskey, onfocus, onblur).
אירועי הקלט (onchange, onselect).

מאפיין חשוב נוסף הוא type, שקובע את סוג שדה הקלט. ערך ברירת המחדל הוא "text". ניתן לתת לו ערך מתוך רשימת הערכים הבאה:

text - תיבת טקסט של שורה אחת.
password - תיבת סיסמה של שורה אחת.
checkbox - תיבת סימון.
radio - כפתורי רדיו.
submit - כפתור שליחה.
reset - כפתור איפוס.
file - קובץ שיישלח לשרת.
hidden - שדה נסתר.
image - כפתור שליחה באמצעות תמונה (submit).
button - כפתור שלא עושה כלום בלי Javascript.
color - בחירת צבעים מתוך מגוון אפשרויות.
number - תיבת טקסט של מספרים בלבד.

מאפיינים לאיתחול השדות:

checked - מאפיין בולאני (checked = "checked") שקובע האם שדה בולאני דולק או כבוי. לשימוש עם input בסוגים radio ו- checkbox.
value - מיועד לספק ערך תחילי לסוגים הבאים: text, password ו- hidden. מלבד זאת ערכו הוא הכיתוב שמוצג על הכפתורים בסוגים submit, reset, button.

מאפיינים להגבלת השימוש בטופס:

disabled - מאפיין בולאני (disabled = "disabled") שקובע האם שדה מאופשר (ניתן לכתוב בו) או כבוי (אי אפשר לשנות את הערך שלו). שדה קלט שהוא disabled לא יישלח! בנוסף לכך אין לו אפשרות לקבל פוקוס (אי אפשר ללחוץ עליו) וצבעו משתנה לאפור. לשימוש עם input בסוגים text ו- password.
readonly - מאפיין בולאני (readonly = "readonly") זה דומה למאפיין disabled עם ההבדלים הבאים: שדה שהוא readonly כן יישלח עם שאר שדות הטופס, הוא יכול לקבל פוקוס, והוא אינו נראה שונה מהשדות האחרים. לשימוש בסוגים text ו- password.
maxlength - מאפיין מסוג מספר - ערכו יהיה הערך המקסימלי של תווים שניתן להכניס לתיבת טקסט. לשימוש בסוגים text ו- password.
size - מאפיין זה קובע את גודל השדה. בסוגים text ו- password הוא קובע את רוחב השדה במספר תווים.אך הוא אינו מגביל את מספר התווים שניתן להכניס!
min&max - מאפיינים אלה יכולים לקבוע את המינימום והמקסימום באלמנט מסוג number.

מאפיינים נוספים:

accept - כמו accept באלמנט form. לשימוש עם input מסוג file.
alt - לשימוש עם סוג image - זהה ל-alt של אלמנט img.
src - לשימוש עם סוג image - ערכו צריך להיות קישור לכתובת HTTP שיש בה תמונה.
usemap - לשימוש עם סוג image ומפת תמונה.

textarea

מאפיינים כלליים: (ליבה, שפה ואירוע).
name - מאפיין חשוב זה צריך להיות זהה למאפיין id.
מאפייני מיקוד (tabindex, accesskey, onfocus, onblur).
אירועי הקלט (onchange, onselect).

כמו האלמנט input יש לו גם את המאפיינים disabled ו- readonly.

שני המאפיינים הייחודיים שלו הם rows ו- cols שקובעים את גודל תיבת הטקסט במספר שורות (rows) ומספר עמודות (cols). מאפיינים אלו מחליפים את המאפיין size ב-input. חובה להשתמש במאפיינים אלו!.

את ערך ברירת המחדל שלו לא שמים במאפיין אלא בתוכן האלמנט (תזכורת: textarea אינו אלמנט ריק!), ולכן אין לו את המאפיין value. כמו כן, אין אפשרות להגביל את מספר התווים ללא שימוש ב-Javascript שכן אין לו את המאפיין maxlength. אין לו בכלל מאפיינים נוספים מלבד אלו שהוצגו פה.

select

מאפיינים כלליים: (ליבה, שפה ואירוע).
name - מאפיין חשוב זה צריך להיות זהה למאפיין id.
חלק מאפייני מיקוד (tabindex, onfocus, onblur).
מאפיין האירוע onchange. - מופעל כאשר יש שינוי באפשרות הנבחרת.
disabled - מאפיין בולאני שמכבה את שדה הקלט.

מאפיין מעניין שלו הוא multiple. זהו מאפיין בולאני (multiple = "multiple") שכאשר הוא בשימוש, ניתן לבחור יותר מאפשרות אחת מתיבת הבחירה!

המאפיין size שלו הוא מספר שקובע את גודל תיבת הרשימה במספר שורות. אם יש יותר אפשרויות תוצג תיבת גלילה לצד תיבת הרשימה.

תוכנו חייב להיות לפחות אחד מהאלמנטים option ו- optgroup.

optgroup

מאפיין הכרחי הוא label מסוג טקסט שערכו הוא כותרת הקבוצה.

מאפיינים כלליים: (ליבה, שפה ואירוע).
disabled - מאפיין בולאני שמכבה את קבוצת האפשרויות.

תוכנו חייב להיות לפחות אלמנט אחד מסוג option.

option

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

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

תוכן האלמנט option הוא טקסט שמוצג למשתמש, כמו label, כאשר label צריך להיות תמציתי יותר מהתוכן של option וברוב המקרים, אם משתמשים ב-label, לתוכן של option לא יהיה שימוש.

disabled - מאפיין בולאני שמכבה את האפשרות (לא מאפשר לבחור אותה).
selected - מאפיין בולאני שקובע האם האפשרות נבחרת בעת טעינת הטופס. כאשר משתמשים במאפיין multiple באלמנט select, ניתן לתת לכמה אלמנטים מסוג option את המאפיין selected. אחרת מומלץ לתת רק לאחד ערך זה.

button

מאפיינים כלליים (ליבה, שפה ואירוע).
name - מאפיין חשוב זה צריך להיות זהה למאפיין id.
מאפייני המיקוד (tabindex, accesskey, onfocus, onblur).

המאפיין type הוא מאפיין חשוב שקובע מה יעשה הכפתור:

submit - הכפתור משמש לשליחת הטופס.
reset - הכפתור משמש לאיפוס הטופס.
button - הכפתור לא עושה כלום בלי Javascript.

disabled - מאפיין בולאני שמכבה את הכפתור (לא מאפשר ללחוץ עליו).
value - מאפיין זה קובע את ערך הכפתור. כפתורים (button) וכפתורי שליחה (submit) נשלחים גם הם יחד עם הטופס. כפתורי איפוס (reset) לעומת זאת, אינם נשלחים.

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

ב-HTML יש איסורים מיוחדים. על האלמנט button חל איסור כזה

איסור חשוב: לאלמנט button אסור להכיל באף רמה את האלמנטים input, select, textarea, label, button, form, fieldset, iframe או isindex!!!

fieldset

מאפיינים כלליים: (ליבה, שפה ואירוע) בלבד.

legend

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

label

מאפיינים כלליים: (ליבה, שפה ואירוע).
for - ערכו צריך להיות id של שדה קלט, וכך ה-label מקושר לשדה הקלט.
accesskey - ניתן לקרוא על מאפיין זה ב-טפסים פשוטים ומקצועיים. כאשר לוחצים על המקש החם, המיקוד מגיע לשדה אליו ה-label מקושר.
onblur ו- onfocus - השימוש במאפיינים אלו מוסבר בתחילת הפרק.

ניווט

הפרק הקודם:
שדות קלט מתקדמים

כל המאפיינים של כל התגים
תרגילים

הפרק הבא:
סקירה על שיטות לאימות הקלט

אלמנטים רלוונטיים: