HTML/טפסים/מתחילים

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

מה הם טפסי HTML?

טפסים הם דרך לקבל קלט מהמשתמש.

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

לטפסי HTML אפשרויות נוספות רבות, אך על מנת להשתמש בכולן אנו חייבים להכיר שפות נוספות כמו PHP או Javascript.

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

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

איך עובדים טפסים ב-HTML?

ניצור אלמנט טופס בעזרת התג form. 

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

האלמנט form

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

• action - קובע לאן יגיע המידע מהטופס. ערכו יכול להיות כתובת של דף אינטרנט, אך אנו נכתוב בו כתובת אימייל תוך הוספת הקידומת mailto: לתחילת הכתובת בצורה הזו: "mailto:abc@abc.abc".. כתובת האימייל שציינו (abc@abc.abc) היא הכתובת אליה יישלח הדואר האלקטרוני עם המידע מהטופס. מאפיין action הוא חובה בכל הטפסים.

• method - למאפיין זה מספר ערכים אפשריים. זה שמשתמשים בו לשלוח אימייל הוא "post".

• enctype - גם למאפיין זה מספר ערכים שמתוכם נשתמש ב-"text/plain" שמשמעו שאנחנו מבקשים לשלוח את המידע מהטופס בקידוד טקסט פשוט.

דוגמה:

<form action="mailto:you@yourmail.net" method="post" enctype="text/plain">
  ...
</form>

שדות קלט

מספר שדות הקלט בטופס אינו מוגבל, אך מומלץ לעשות טופס קצר ויעיל כדי שהמשתמש לא יתייאש ויוותר על השימוש בו. רוב שדות הקלט משתמשים באלמנט input, כשהמאפיין type מגדיר את סוג השדה. קיימים אלמנטים נוספים לסוגי קלט מיוחדים כמו האלמנט select שמגדיר תיבת בחירה (combo-box, קומבו).

• כפתורים כמו כפתור השליחה, נחשבים גם הם שדות קלט!

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

להלן דוגמה לטופס תקין, כיוון ששדות הקלט והכפתורים אינם צאצאים ישירים של form אלא של fieldset או של כל אלמנט גוש אחר, במקרה שלנו p:

<form action="mailto:you@yourmail.net" method="post" enctype="text/plain">
   <fieldset>
       שדות קלט פרטים אישיים
   </fieldset>
   <fieldset>
       <p>שדה קלט נושא הפנייה</p>
       <p>שדה קלט תוכן הפנייה</p>
   </fieldset>
    <p>
<br>
      כפתור שליחת הטופס 
      <br /> 
      כפתור ניקוי הטופס
   </p>
</form>

• חשוב לדעת שהאלמנט input הוא אלמנט ריק!

המאפיינים id ו- name

לכל שדות הקלט חשוב מאוד לתת מאפיין id על מנת שיקל לזהות מאיזה שדה הגיע הקלט. המאפיין id הוא מאפיין מיוחד ב-HTML בכך שאסור לתת ליותר מאלמנט אחד מאפיין id עם אותו ערך! בכל פעם שמשתמשים בו הוא חייב לקבל ערך ייחודי ושונה מכל שאר ערכי המאפיין id במסמך ה-HTML.

בעבר השתמשו במאפיין name בטפסים. בגרסה של XHTML שאנחנו לומדים, משתמשים ב-id וגם ב-name בעת ובעונה אחת, כששניהם מקבלים את אותו הערך. למשל: <input id="myinput" name="myinput />. בגרסאות עתידיות יפסיקו להשתמש ב-name כליל, ויעברו להשתמש אך ורק ב-id. בינתיים חשוב מאוד להשתמש בשניהם למקרה שבו דפדפנים מסויימים לא מכירים עדיין את המאפיין id.

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

רשימת שדות הקלט

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

תיבת טקסט

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

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

דוגמה:

<input type="text" id="myinput" name="myinput" />

• המאפיין size הוא מספר שקובע את רוחב השדה במספר תווים.
• המאפיין maxlength הוא מספר שקובע את מספר התווים המקסימלי שניתן להכניס לשדה.
• המאפיין value קובע את ערך ברירת המחדל של השדה.

דוגמה:

<input type="text" id="myinput" name="myinput" value="טקסט ברירת המחדל" size="25" maxlength="40" />

תיבת סיסמא

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

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

דוגמה:

<input type="password" id="pwd" name="pwd" />

• המאפיין size הוא מספר שקובע את רוחב השדה במספר תווים.
• המאפיין maxlength הוא מספר שקובע את מספר התווים המקסימלי שניתן להכניס לשדה.
• המאפיין value קובע את ערך ברירת המחדל של השדה.

תיבת סימון

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

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

בעזרת המאפיין הבולאני checked ניתן לקבוע האם תיבה מסויימת מסומנת כברירת מחדל.

• למאפיינים בולאניים יש שתי אפשרויות. או שאינם מופיעים כלל, או שמופיעים כשערכם שווה לשמם: checked="checked".

<input type="checkbox" id="mycheckbox1" name="mycheckbox1" />
<input type="checkbox" id="mycheckbox2" name="mycheckbox2" />
<input type="checkbox" id="mycheckbox3" name="mycheckbox3" checked="checked" />
<input type="checkbox" id="mycheckbox4" name="mycheckbox4" checked="checked" />

כפתורי רדיו

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

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

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

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

<input type="radio" id="myradio1" name="myradio" />
<input type="radio" id="myradio2" name="myradio" />
<input type="radio" id="myradio3" name="myradio" checked="checked" />

כפתור השליחה

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

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

<input type="submit" />

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

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

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

<input type="reset" />

דוגמה

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

<form action="mailto:you@yourmail.net" method="post" enctype="text/plain">
 <p>מסגרת רכיבי טופס</p>
 <fieldset>
  <p> תיבת טקסט:  <input type="text" id="myinput" name="myinput" value="text"/> (text)</p>
  <p> תיבת סיסמה: <input type="password" id="mypass" name="mypass" value="pass" /> (password)</p>
  <p>
    תיבת סימון 1: <input type="checkbox" id="mycheckbox1" name="mycheckbox1" checked="checked"/> (checkbox)<br />
    תיבת סימון 2: <input type="checkbox" id="mycheckbox2" name="mycheckbox2" checked="checked"/> (checkbox)<br />
    תיבת סימון 3: <input type="checkbox" id="mycheckbox3" name="mycheckbox3"/> (checkbox)<br />
  </p>
  <fieldset>
    כפתור רדיו 1: <input type="radio" id="myradio1" name="myradio"/> (radio)<br />
    כפתור רדיו 2: <input type="radio" id="myradio2" name="myradio" checked="checked"/> (radio)<br />
    כפתור רדיו 3: <input type="radio" id="myradio3" name="myradio" /> (radio)<br />
   </fieldset>
   <p>
     איזור טקסט:
     <textarea id="MyTextBox" name="MyTextBox" cols="20" rows="4" dir="rtl">
טקסט עם הרבה שורות
טקסט עם הרבה שורות
טקסט עם הרבה שורות
     </textarea> (textarea)</p>
    <p>תיבת בחירה: 
    <select>
      <option label="123 נסיון" value = "1">123 ניסיון</option>
      <option label="123 נסיון" value = "2" selected="selected">123 ניסיון</option>
      <option label="123 נסיון" value = "3">123 ניסיון</option>
    </select> (select)
    </p><br /><br />
    <p>כפתור שליחת טופס: <input type="submit" /> (submit)</p>
    <p>כפתור ניקוי טופס: <input type="reset" /> (reset)</p>
  </fieldset>
</form>

לימדו מהדוגמה את הדברים הבאים:

• בתוך טופס מותר לשים אלמנטים מסוג גוש כמו p ו- fieldset אך אסור לשים ישירות אלמנטים מסוג שורה כמו input
• בתוך fieldset מותר לשים כמעט את כל סוגי האלמנטים, כולל טקסט וכולל עוד fieldset שיצור מסגרת בתוך מסגרת.
• בתוך p אסור לשים אלמנטים מסוג גוש כמו fieldset.

ניווט

הפרק הקודם: טבלאות פשוטות (מתחילים) או אינדקס טפסים (ללומדים על טפסים)

טפסים למתחילים תרגילים

הפרק הבא: איסורים חשובים! (מתחילים) או טפסים פשוטים ומקצועיים (טפסים)

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

• form
• fieldset
• input