קורס [HTML] | שיעור עשירי - טפסים

קורס HTML / אוראל – שיעור עשירי: טפסים

< לאשכול הסבר (הקדמה למדריך) לחצו כאן >
< לשיעור הקודם [שיעור תשיעי - מסגרות (frames)] לחצו כאן >

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

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

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

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

אלמנט הטופס - <form>
את הטופס יוצרים ע"י התג form, שהוא רמת בלוק, block (ולא רמת שורה, inline). כל תוכן הטופס יהיה בתוך האלמנט הנ"ל.

מאפייני התג form:
name - שם הטופס (באנגלית וללא רווחים, כמובן. זכרו – לא להתחיל שם, id וכדו' עם מספר).
action – מאפיין חובה. קובע לאן יגיע המידע בעת שליחת הטופס. ערכו יכול להיות כתובת של דף אינטרנט, שם של פונקציית JavaScript, אך אנו נכניס בו ערך של כתובת דואר אלקטרוני עם הוספת הקידומת mailto: לתחילת הכתובת בצורה הזו: "mailto:user@server.something". כתובת האימייל שכתבנו (user@server.something) היא הכתובת אליה יישלח הדואר האלקטרוני עם המידע מהטופס.
method – שיטת שליחת הנתונים. מקבל את הערך get או post. זה שמשתמשים בו לשליחת דוא"ל הוא post. (הסבר נוסף תקראו במדריכים על שפות צד שרת, או במדריך/מאמר העוסק בנושא, שיפורסם בפורום הזה). תמיד כדאי לציין מאפיין זה (ובכלל, מאפיינים מהסוג הזה), ולו רק בכדי שנזכור מה רצינו לעשות עם הטופס.
autocomplete (חדש ב-HTML5) – קובע האם לאפשר בטופס השלמה אוטומטית של ערכים לפי הערכים שהדפדפן זוכר שאותו מחשב הקליד באותו הטופס. מקבל on או off. אם יהיו התנגשויות בין ערך זה לערך של שדות קלט באותו הטופס, הערך של השדות יגבור על הערך של הטופס. כלומר, נניח שיש לי טופס שיש לו את המאפיין הנ"ל עם ערך on, ויש לי כמה שדות, שלאחד מהם יש גם את המאפיין הנ"ל עם ערך off – בכל שדות הקלט האחרים מלבדו השלמה אוטומטית תאופשר. מאפיין זה נתמך בכל הדפדפנים הנפוצים חוץ מאופרה (Opera), אבל שזה לא ימנע מכם להשתמש בו.

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


האלמנט <input>
תיבות קלט, בהן הגולש יכול להקליד נתונים, יוצרים באמצעות התג <input>, שהוא רכיב inline (רמת שורה). לתג <input> אין תג סוגר, ולכן נסגור אותו באמצעות סלאש פנימי, כמו שכבר למדנו.

המאפיינים הבסיסיים של התג input:
name – שם האלמנט.
type – סוג תיבת הקלט. מקבל אחד מהערכים הבאים: text, checkbox, password, radio, hidden, file, button, submit, reset, image (יילמדו בהמשך השיעור).
autocomplete (חדש ב-HTML5) – קובע האם לאפשר השלמה אוטומטית באותו שדה הקלט. מקבל on או off. גובר על המאפיין autocomplete של אותו הטופס, במידה ויש התנגשויות ביניהם. המאפיין הנ"ל נתמך בכל הדפדפנים הנפוצים, בניגוד למאפיין autocomplete של התג <form>, שלא נתמך באופרה.
autofocus (חדש ב-HTML5) – מקבל את עצמו בתור ערך (autofocus="autofocus"). יכול להופיע רק פעם אחת באותו דף. במידה וצויין, אותו אלמנט <input> יקבל פוקוס בעת טעינת הדף. (נניח שיש לי תיבת טקסט שמקבלת פוקוס אוטומטי בעת טעינת הדף, כאשר אתחיל להקליד משהו במקלדת – הוא יופיע באותה התיבה, אלא אם כן אלחץ על משהו אחר.) מאפיין זה נתמך בכל הדפדפנים הנפוצים הנורמלים חוץ מאקספלורר (IE – Internet Explorer), אבל כמובן שזה לא ימנע מכם להשתמש בו.
readonly – מקבל את עצמו בתור ערך. במידה וצויין, אותו האלמנט יוצג, אך לא יהיה ניתן לשנות את ערך ברירת המחדל שלו.
disabled – מציין אם האלמנט. גם כאן מספיק רק לציין אותו ואת עצמו בתור ערך. ההבדל בינו לבין readonly הוא שאלמנט שיש בו את המאפיין disabled לא יישלח עם הטופס, בעוד אלמנט שמכיל את המאפיין readonly רק לא יהיה ניתן לשינוי.
value – את המאפיין value ניתן לתת לכל אלמנט מסוג <input> בו ניתן להקליד (במקרה כזה, הערך שיוכנס ל-value יהיה ערך ברירת המחדל של אותו האלמנט) ולכפתורים למיניהם (במקרה כזה, הערך שיוכנס ל-value יוצג על גבי הכפתור).
size – הגודל של תיבת הטקסט (אם יש). מקבל את מספר התווים.
form – מקבל את ה-ID (ערך מאפיין ה-ID) של הטופס אליו הוא שייך (אם יותר מאחד – מופרדים בפסיקים). אין צורך להשתמש בערך זה אם האלמנט נמצא באותו הטופס שאתם רוצים. המאפיין הזה, נכון לעכשיו, לא נתמך באקספלורר. (אני חושב שאתם כבר צריכים להתרגל לשמוע את המשפט הזה עוד הרבה, לצערי.)

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

תיבת טקסט – text
דוגמה לקוד של תיבת טקסט:

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


תיבת סיסמא – password
דוגמה לקוד של תיבת סיסמא:

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


תיבות סימון – checkbox
דוגמה לקוד של תיבות סימון:

מאפייני תיבות הסימון:
checked – במידה ומאפיין זה נמצא, תיבת הסימון תופיע מסומנת בעת סיום טעינת הדף.
value – הערך שישלח לשרת אם תיבת הסימון תסומן.


כפתורי רדיו – radio
דוגמה לקוד של כפתורי רדיו:

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


תיבת העלאת קובץ – file
דוגמה לקוד של תיבת העלאת קובץ:

מאפייני תיבת העלאת קובץ:
accept – מציין אילו סוגי קבצים התיבה יכולה לקבל. מקבל audio/* לקבצי אודיו, video/* לקבצי וידאו ו/או image/* לתמונות. יכול לקבל את חלקם, עם פסיקים ביניהם.
לא להשתמש במאפיין זה בתור בדיקת סוג הקובץ, את זה תוכלו לעשות בצד השרת, אחרי שתלמדו את זה.


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

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


כפתור – button
בכפתור – button משתמשים על מנת לבצע פעולות בדף בלחיצה על הכפתור.
זה לא שימושי כעת, אך יהיה לכם שימושי לאחר שתלמדו JavaScript.

דוגמא לקוד של כפתור

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

דוגמא לקוד של כפתור שליחת טופס

תמונה המשמשת ככפתור לשליחת הטופס – image
אם אנו רוצים שהכפתור לשליחת הטופס יהיה תמונה, נשתמש בסוג image של אלמנט input.
מאפיין המיוחד לסוג זה של אלמנט ה-input נקרא src, והוא מקבל את הכתובת של התמונה בה אנו רוצים להשתמש. (מומלץ להשתמש גם במאפיינים alt ו-title של אלמנט img.)

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

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

דוגמא לקוד של כפתור שליחת טופס

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

אם יש משהו לא מובן – שאלו, אני פה.

הודעה זו נערכה ע"י LighTo273 ב Feb 28 2012, 19:39 PM

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

כמובן, באמצעות CSS.
עוד דקה אוסיף תמונה לדוגמא. ^^
רק שאלה אחת: למה התכוונת? קצוות מעוגלים כרצונך, גודל, או צורה של משולש, נניח?

אכן, לזה התכוונתי.
באמת יועילו מעט תמונות להמחשה.

אוראל לי יש שאלה
אני לא בטוח אם זה לגמרי קשור אבל זה מתייחס לדברים שכתבת בשיעור
אני עשיתי טופס התחברות לאתר אז זה כולל שם משתמש וסיסמא(על ידי INPUT)
בנוסף לכך ניסיתי להוסיף SESSION כך שמי שמתחבר יכתב לו שלום ואז שמו אבל זה לא רשם לי את הSESSION והיתי חייב לשים תיבת טקסט על הINPUT למה זה?

בקשר למשולש אני לא כל כך בטוח, אתה מוזמן לעיין כאן ולנסות.
בקשר לפינות המעוגלות - יש את border-radius. אתה מוזמן לעיין כאן.
גודל אתה תמיד יכול לשנות בעזרת height ו-width.

הנה דוגמא ל-2 inputים מסוג submit (כשעקרונית זה יכול להיות כל סוג של כפתור):

הימני (זה שלחצתי עליו) עוצב באמצעות השורה הבאה:

והשמאלי עוצב באמצעות:

(זה לא עובד באקספלורר מתחת לגרסה 9, אבל יש את פיתרון PIE - רן בר-זיק כתב עליו מאמר בעברית, חפש בגוגל.)

סשנים זה סוג-של מעבר לרמה שלי כרגע. :)
אבל בכל מקרה - באיזו שפה? PHP, ASP...?
ואשמח לקבל את הקוד המלא, לא הבנתי לגמרי.

הודעה זו נערכה ע"י LighTo273 ב Feb 28 2012, 20:50 PM

לא בדיוק זה כמו עוגיות רק שזה תקף למשך זמן מסוים ננח באתר(אני חושש שההסבר לא הכי מדויק אני אבדוק בהזדמנות במחברת שלי את ההגדרה המדויקת)
ASP
הוא לא לידי אבל אני אעתיק אותו כשזה יהיה לידי

אני אף פעם לא ראיתי מדריכים אז תוכל להביא לי את כל המדריכים?
ואני עושה אתרים עם FroneFage

אני יודע, 25 דק' במדריך שאני קראתי (PHP). ^^
למשתמש אין אפשרות לשנות סשן.
סלח לי שאני שואל, אבל למה ASP ולא PHP? (אני מניח שזה מביה"ס, כן? מה מלמדים היום. )
אני בספק אם אבין מילה... בכ"מ, גם אם לא אבין, אנסה למצוא פתרון. ^^

בדיוק בשביל זה קיימת הלינקייה. ^^
http://hportal.co.il/index.php?showtopic=69816

אני לא יודע מה זה FroneFage, תוכל להסביר לי בבקשה? :)

הסבר על התוכנה: זאת תוכנה לבניית אתרים אתה כותב מה שזה יעשה והוא כותב לך את הקוד

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

אפשר
תוריד את SharePoint זו התוכנה החדשה של FronetFage ותראה מה אפשר לעשות