HTML/טפסים/מתקדמים

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

איזור טקסט

יצירה על ידי אלמנט textarea.

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

האלמנט textarea אינו אלמנט ריק, ותוכנו הוא ערך ברירת המחדל שיופיע בעת טעינת הטופס.

לאלמנט textarea שני מאפיינים מיוחדים והם rows - שקובע מה גובה תיבת הטקסט במספר שורות, ו-cols שקובע מה רוחב תיבת הטקסט במספר תווים. rows ו- cols אינם משפיעים על כמות הטקסט שמותר לשלוח דרך הטופס, אלא רק על גודל התיבה. חובה להשתמש בהם!!!

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

<textarea rows="5" cols="60" id="MyTextBox" name="MyTextBox">
טקסט ברירת המחדל
</textarea>

תיבת בחירה

יצירה על ידי אלמנט select ובתוכו אלמנטים של option.

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

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

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

<select id="mycombo" name="mycombo">
  <option value="1">אחד</option>
  <option value="2">שתיים</option>
  <option value="3" selected="selected">שלוש</option>
</select>

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

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

דוגמה:

<select id="mycombo" name="mycombo">
  <optgroup label="מספרים זוגיים">
    <option value="2">שתיים</option>
    <option value="4">ארבע</option>
  </optgroup>
  <optgroup label="מספרים אי זוגיים">
    <option value="1">אחד</option>
    <option value="3" selected="selected">שלוש</option>
  </optgroup>
</select>

האלמנט button

אלמנט זה יוצר כפתור. יש לו מאפיין בשם type מסוג רשימת ערכים הבאה: submit, reset, button. כאשר הוא submit או reset לחיצה עליו תגרום להגשת הטופס או איפוסו. כאשר הוא button הוא לא עושה כלום בלי javascript. עם javascript ניתן להפעיל בעזרתו תסריטים (סקריפטים) שונים. מה בכל זאת ההבדל בינו לבין input מסוג submit או reset? בניגוד ל-input ל-button יש תוכן שיכול להיות הרבה מאוד אלמנטים. כך תמונה, פיסקה או כותרת יכולים להיות כפתור בטופס שלנו.

<form action="mailto:you@yourmail.net" method="post" enctype="text/plain">
  <fieldset>
    <select id="mycombo" name="mycombo">
      <optgroup label="מספרים זוגיים">
        <option value="2">שתיים</option>
        <option value="4">ארבע</option>
      </optgroup>
      <optgroup label="מספרים אי זוגיים">
        <option value="1">אחד</option>
        <option value="3" selected="selected">שלוש</option>
      </optgroup>
    </select>
    <br />

    <button type="button">כפתור שלא עושה כלום</button><br />

    <button type="submit">
      <h2>הגש שאילתה</h2>
    </button>
    <br />

    <button type="reset">
      אפס <img src=".../reset.png" alt="אפס טופס" />
    </button>
    <br />
  </fieldset>
</form>

כפתור שליחה בעזרת תמונה

יצירה על ידי אלמנט input עם ערך "image" במאפיין type.

סוג זה בעצם זהה לסוג submit חוץ מהבדל אחד, במקום שהסוג יוצג ע"י כפתור הוא מיוצג ע"י תמונה. במקרה שמשתמשים ב-input עם type מסוג image צריך להוסיף גם את הפרמטר: src ולקבוע באמצעותו את כתובת התמונה שתוצג במקום הכפתור. כמו כן, בדיוק כמו באלמנט img חובה לציין את המאפיין alt - טקסט אלטרנטיבי לדפדפנים שאינם מראים תמונות.

<input type="image" src="image.jpg" alt="הגש טופס" />

שדה נסתר

יצירה על ידי אלמנט input עם ערך hidden במאפיין type.

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

<form action="mailto:you@yourmail.net" method="post" enctype="text/plain">
  <fieldset>
    <input type="hidden" id="form_title" name="form_title" value="בחירת מספר" />

    <select id="mycombo" name="mycombo">
      <optgroup label="מספרים זוגיים">
        <option value="2">שתיים</option>
        <option value="4">ארבע</option>
      </optgroup>
      <optgroup label="מספרים אי זוגיים">
        <option value="1">אחד</option>
        <option value="3" selected="selected">שלוש</option>
      </optgroup>
    </select>
    <br />

    <input type="submit" />
  </fieldset>
</form>

שליחת קובץ דרך טופס

יצירה על ידי אלמנט input עם הערך "file" במאפיין type.

שדה קלט זה שימושי רק ליודעי שפות צד שרת כמו PHP באתרים שבהם יש צורך להעלות קבצים. כאשר משתמשים במאפיין זה, יש להשתמש בערך "multipart/form" במאפיין enctype, וחובה לשלוח את הטופס בעזרת "post".

ניווט

הפרק הקודם:
טפסים פשוטים ומקצועיים

שדות קלט מתקדמים
תרגילים

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

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

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