מדריך HTML – טפסים

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

לדוגמא, הקוד הבא:

<form name="example" method="get" action="html_page13.html">
    :שם פרטי <input type="text" name="firstname">
    :שם משפחה <input type="text" name="lastname">
</form>

יצור את זה:

המאפיין החשוב ביותר של התג form הוא action, שמציין לאן ישלח הטופס.

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

method מציין את שיטת שליחת הנתונים, מקבל אחד מהערכים get או post. ל get יש הגבלת אורך של 256 תווים.
target מציין איפה יפתח הדף שאליו נשלח הטופס, מקבל את הערכים _blank, _top, _parent, או שם של מסגרת.

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

התג <input> מאפשר לנו ליצור מגוון של תיבות קלט.
המאפיין שאחראי על סוג תיבת הקלט הוא type.
הוא מקבל אחד מהערכים הבאים:
text, checkbox, radio, password, hidden, submit, reset, button, file, image.
עוד מאפיין חשוב של התג input הוא name. המאפיין הזה קובע מהו שם האלמנט.

דוגמאות לתג input:

תיבת טקסט:

והקוד:

<input type="text" name="text1">  

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

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

תיבת סיסמא:

והקוד:

<input type="password" name="password1">

ההבדל בין תיבת ססמא לבין תיבת טקסט הוא שבתיבת ססמא כל הכיתוב יראה ככוכביות.

תיבות סימון:

תיבה ראשונה
תיבה שניה

והקוד:

<input type="checkbox" name="check1" checked>
<input type="checkbox" name="check1">

מאפיינים של תיבות סימון:

name קובע את השם של תיבת הסימון.
checked במידה ומאפיין זה מצויין, תיבת הסימון תופיע מסומנת.
disabled במידה ומאפיין זה מצויין, תיבת הסימון תהיה אפורה ולא נגישה למשתמש.
value הערך שישלח לשרת אם תיבת הסימון תסומן.

כפתורי רדיו:

תיבה ראשונה
תיבה שנייה

והקוד:

<input type="radio" name="radio1" checked>
<input type="radio" name="radio1">

מאפיינים של כפתורי רדיו:

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

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

תיבת קובץ:

והקוד:

<input type="file" name="file1">

מאפיינים של תיבת קובץ:

name קובע את השם של תיבת הקובץ.
disabled במידה ומאפיין זה מצויין, תיבת הקובץ תהיה אפורה ולא נגישה למשתמש.
size קובע את הגודל של תיבת הקובץ, מקבל מספר תווים.
accept מצייו איזה סוגי קבצים התיבה יכולה לקבל.

אלמנט מוסתר:

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

והקוד:

<input type="hidden" name="hidden1">

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

כפתור:

והקוד:

<input type="button" name="button1" value="button">

מאפיינים של כפתורים:

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

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

כפתור ניקוי טופס:

והקוד:

<input type="reset" name="reset1" value="reset">

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

כפתור שליחה:

והקוד:

<input type="submit" name="submit1" value="submit">

הכפתור הזה אחראי לשליחה של הטופס. הוא מקבל את אותם מאפיינים של כפתור.

תמונה:

והקוד:

<input type="image" name="image1" src="/images/b.gif">

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

אזורי טקסט:

והקוד:

<textarea rows="5" cols="20" name="textarea1"></textarea>

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

name מציין את השם של איזור הטקסט.
disabled במידה ומאפיין זה מצויין, איזור הטקסט יהיה אפור ובלתי נגיש לגולש.
readonly במידה ומאפיין זה מצויין, איזור הטקסט יהיה בלתי ניתן לשינוי.
rows מציין את מספר השורות של איזור הטקסט.
cols מציין את הרוחב של איזור הטקסט, במספר תווים.

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

תיבת בחירה:

אחדשניםשלוש

והקוד:

<select name=select1>
    <option value="1">אחד</option>
    <option value="2">שנים</option>
    <option value="3">שלוש</option>
</select >
 

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

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

תיבת בחירה מרובה:

אחדשניםשלושארבע

והקוד:

<select name=select1 size="3" multiple>
    <option value="1">אחד</option>
    <option value="2">שנים</option>
    <option value="3">שלוש</option>
    <option value="4">ארבע</option>
</select >
 

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

אפשר להשתמש ב size גם בלי להשתמש ב multiple.