טפסים ב HTML

במאמר הקודם ראינו כי שיטת GET היא לא בדיוק השיטה הכי טובה להעברת כמויות גדולות של מידע לשרת אינטרנט.

בעיה נוספת בהעברת פרמטרים לשרת היא הצורה שבה אנו מאפשרים למשתמש לשלוח את הנתונים, לא כל משתמש ינסה להירשם לאתר באמצעות הכתובת הבאה:

http://my_site.co.il/index.php?username=avner.cohen&password=123456&city_id=1&phone=050111111111

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

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

טפסי html הם אמצעי ויזואלי להעברת מידע לשרת, הנה דוגמה לטופס כזה:

טפסי HTML מספקים דרך נוחה לשליחת נתונים לשרת

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

בהמשך נבנה את הטופס בדוגמה.

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

firstname=yonatan

lastname=fishman

gender=male

city_id=31

...

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

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

<form action="target.aspx" enctype="application/x-www-form-urlencoded" method="post">
<!--רשימת פקדים-->
</form>

לתגית form המאפיינים הבאים:

1. action - מציין את הדף אליו ישלחו נתוני הטופס, השרת לבדו לא יודע כיצד עליו לעבד את הנתונים (להוסיף משתמש חדש ל database? לעדכן משתמש קיים?), ולכן חייבים לכתוב קוד שיידע מה לעשות איתם, בדוגמה למעלה, הקוד שיקבל את הנתונים ימצא בדף target.aspx.
2. method - השיטה שבה נשתמש לשליחת הנתונים, GET או POST (קיימות שיטות נוספות שעדיין לא נלמדו)
3. enctype -  כיצד לקודד את הנתונים הנשלחים לשרת - ברירת המחדל היא "application/x-www-form-urlencoded", הממירה סימנים מיוחדים לקוד ascii ורווחים ל-"+". נשנה את ערך ברירת המחדל בעיקר כאשר נרצה להעלות קובץ, מאחר וקבצים לא מהווים מידע טקטואלי ושליחתם תיעשה ללא קידוד.
   הנה דוגמא לשליחת נתונים באמצעות קידוד: 
   username=Admin&
   password=%D7%9B%D7%A9%D7%9C%D7%A7%D7%A4%D7%A9%D7%93%D7%93&autologin=on&
   redirect=&query=&login=%D7%94%D7%AA%D7%97%D7%91%D7%A8
   
   שימו לב כי הערך במשתנה password אינו טקסט קריא מאחר והוא מקודד. 

בתוך התגית form נמקם את כל הפקדים.

התגית input

בתגית input נשתמש כדי ליצור את רוב הפקדים בדף.
נתחיל בפקד הבסיסי ביותר, textbox:

<form action="target.aspx" method="post">
  <p>
    <label for="firstname">First Name:</label>
    <input type="text" size="15" maxlength="30" name="firstname" 
title="Enter your first name" id="firstname" value="your name" />
  </p>
</form> 

התגית >label< מאפשרת יצירת תווית מקושרת - לתגית input נוסיף מאפיין id ואת התגית label נקשר אליה באמצעות המאפיין for. 

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

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

1. name - למעשה המאפיין החשוב ביותר, מציין את שם המשתנה הנשלח לשרת (למשל: firstname). בניית הפקד היא לרוב חסרת טעם ללא מאפיין זה
2. title - בעת מעבר עכבר מעל הפקד, יופיע tool tip עם ערך המאפיין title.
3. value - ערך הפקד - כלומר הערך שיוצמד למשנה ב- name. במקרה של תיבת הטקסט, ערך זה יהיה בסופו של דבר, הטקסט אותו יכניס המשתמש לתיבה ( ה- value בתיבת הטקסט למעלה, הוא רק ערך ברירת המחדל בתיבת הטקסט, המשתמש יכול לשנות אותו בקלות).
4. id - כל שם באנגלית המזהה את התגית באופן חד-ערכי. שתי תגיות או יותר לא יכולות לקבל את אותו ערך id 
5. disabled - מאפיין המציג את הפקד בצבע אפור, מונע מן המשתמש לשנות את ערך הפקד.
   תגית המכילה את הערך disabled="disabled" לא תשלח את ערכה לשרת. 

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

נציין אילו סוגי (type) פקדים קיימים:

• password - מתנהג בדיוק אותו דבר כמו text מלבד העובדה שהטקסט מוסתר באמצעות נקודות או כוכביות.
• reset - יוצר לחצן המאפשר למשתמש לאפס את תוכן הטופס - ברוב המקרים אין אנו משתמשים בפקד זה מאחר ולמשתמש אין צורך במחיקת הטופס, מה גם שלחיצה מקרית על הלחצן עלולה לגרום למחיקת כל הטופס ולעגמת נפש לא קטנה (כתבתם פוסט ארוך מאוד לפורום ובמקום לשלוח, איפסתם את הטופס. לא נעים)
• submit - יוצר לחצן שליחה, בעת לחיצה על על הלחצן הדפדפן אוסף את נתוני הטופס ושולח לדף המופיע במאפיין action של הטופס. 
• checkbox - יוצר תיבת סימון (v) בדף, במידה והמשתמש מסמן את התיבה - נשלח הערך המופיע ב value.

<p>
  <input type="checkbox" name="agreement" value="accept" id="agreement"/> 
  <label for="agreement">I Accept Site's</label> 
  <a href="http://notreally.com">Terms of Use</a>  
</p> 

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

<p>
 <input type="radio" name="gender" checked="checked" value="male" id="gmale"/> 
 <label for="gmale">Male</label><br/>
 
 <input type="radio" name="gender" value="female" id="gfemale"/>
 <label for="gfemale">Female</label>
</p>

מלבד התגית input, ישנן שתי תגיות נוספות שונות בהן נשתמש:

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

<p>
 About Me:<br/>
 <textarea name="about" id="about" cols="50" rows="10"></textarea>
</p>

התגית select ו option
התגית select יוצרת רשימת אפשרויות ומהווה מעין תחליף נוח לפקד radio כאשר ישנם הרבה אפשרויות מהן אפשר לבחור.

באמצעות select נוכל גם לאפשר למשתמש לבחור יותר מאפשרות אחת.

התגית select תכיל מספר תגיות option, אחת עבור כל אפשרות בחירה, כל תגית option תכיל מאפיין value שישלח לשרת עם ה- name שהצמדנו לתגית select.
מאפיין ה- size של התגית select מגדיר את גודל הרשימה - כאשר הגודל המינימלי הוא למעשה רשימה נפתחת. בדוגמא למטה size="4" מציג את select כרשימה עם פסי גלילה המציגה 4 פריטים.

בדרך כלל, נשמור במסד הנתונים מספר מזהה עבור כל ישות - או אוביקט, במקרה הבא, נשמור קוד מזהה עבור כל מקצוע, את הקוד המזהה נשלח באמצעות הטופס לשרת.
לא תמיד אותו קוד (לרוב מספרי) מובן למשתמש - למשל המספר 14 יכול לזהות את המקצוע Web Developer ולכן, במידה והמשתמש יבחר במקצוע זה, ארצה לשלוח לשרת את הצמד professions=14.
הבעיה היא שהמשתמש לא יודע שאותו מספר מזהה את המקצוע, אבל כן יבין את המקצוע "Web Developer", לכן כאשר נשתמש בתגית option נשים את המספר המזהה כערך value ואת שם המקצוע בתוך התגית, שיופיע בצורה ברורה למשתמש.

<p>
 Professions (Can select more than one):
 <select name="professions" size="4" multiple="multiple">
  <option value="webdev">Web Developer</option>
  <option value="netprog">.NET Programmer</option>
  <option value="phpexp">PHP Expert</option>
  <option value="cssdesigner">CSS Designer</option>
  <option value="flashanim">Flash Animator</option>
 </select>
</p>

  

בדוגמה למעלה, במידה והמשתמש יבחר באפשרות CSS Designer, הקוד שישלח לשרת יהיה cssdesigner.

הקוד המלא:

<!DOCTYPE html>
<html>
 <head>
  <title>Forms Page</title>
 </head>
 <body>
  <h1>Registration Form</h1>
  <form action="target.aspx" method="post">

   <p>
    <label for="firstname">First Name:</label>
    <input type="text" size="15" maxlength="30" name="firstname" 
     title="Enter your first name" id="firstname" />
   </p>
   <p>
    <label for="lastname">Last Name:</label>
    <input type="text" size="15" maxlength="30" name="lastname" 
     id="lastname"/>
   </p>
   <p>
    <label for="password">Password:</label>
    <input type="password" name="password" id="password" maxlength="15"/>
   </p>

   <p>
    <label for="password_conf">Password Confirmation:</label>
    <input type="password" name="password_conf" 
     id="password_conf" maxlength="15"/>
   </p>
   <p>
    <label for="email">Email Address:</label>
    <input type="text" name="email" id="email" 
     value="example@domain.com"/>
   </p>
   <p>
    Just a demo for a disabled field:
    <input type="text" disabled="disabled" name="disabled_field" 
     value="Will not be sent"/>
    <br/>

    Just a demo for read only field:
    <input type="text" readonly="readonly" name="readonly_field" 
     value="Will be sent"/>
   </p>
   <p>
    <fieldset>
     <legend>Gender</legend>
     <input type="radio" name="gender" checked="checked" 
      value="male" id="gmale"/> 
     <label for="gmale">Male</label><br/>
     
     <input type="radio" name="gender" value="female" id="gfemale"/>
     <label for="gfemale">Female</label>
    </fieldset>
   </p> 
   <p>
    Country of Residence:
    <select name="country">
     <option value="israel">Israel</option>
     <option value="germany">Germany</option>
     <option value="france">France</option>
     <option value="usa" selected="selected">
      United States of America
     </option> 
     <option value="canada">Canada</option>
    </select>
   </p> 
   <p>
    Professions (Can select more than one):
    <select name="professions" size="4" multiple="multiple">
     <option value="webdev">Web Developer</option>
     <option value="netprog">.NET Programmer</option>
     <option value="phpexp">PHP Expert</option>
     <option value="cssdesigner">CSS Designer</option>
     <option value="flashanim">Flash Animator</option>
    </select>
   </p>
   <p>
    About Me:<br/>
    <textarea name="about" id="about" cols="50" rows="10"></textarea>
   </p>
   <p>
    <input type="checkbox" name="agreement" val="accept" id="agreement"/>
    <label for="agreement">I Accept Site's</label> 
    <a href="http://notreally.com">Terms of Use</a>
   </p>
   <p>
    <input type="submit" value="Register!" name="reg_submit"/>
    <input type="reset" value="Clear Form"/>
   </p>
   
  </form>
 </body>
</html>