HTML - תגיות קלט
להורדת קוד מקור של כל הדוגמאות בקורס HTML - לחץ כאן (להורדה ממחשב רגיל ולא מאובטח)
פרקי ההרצאה: HTML - תגיות קלט
תמלול ההרצאה: HTML - תגיות קלט
הטקסט המלא של הדקות הראשונות בהרצאה «HTML - תגיות קלט» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
הפרק הבא שלנו נקרא הפורם. היום אנחנו הולכים לראות מה זה בדיוק פורם ומה הוא נותן לנו. בואו נפתח את ויז'ואל סטודיו ונפתח דף html חדש לגמרי.
פייל ניו פייל. נבחר html, אופן. בואו נשמור אותו על הדסטופ. נקרא לדף הזה דפורם. אז ראשית התגית המרכזית שאנחנו הולכים לראות כרגע נקראת פורם.
כותבים אותה בתוך הבאדי. אני מבצע פתיחה של התגית וסגירה של התגית. תגית פורם מאפשרת לתאר לאן אני הולך לבצע גלישה מהדף הנוכחי לדף אחר.
איך אני מתאר את זה? בתגית פורם קיים אטריביוט שנקרא Action. Action זה אטריביוט שמכיל מידע לאן לגלוש כאשר לוחצים על איזשהו לחצן שנקרא Submit, או על ידי אפשרות אחרת שאנחנו נראה בהמשך.
ואני פשוט מאוד צריך ללכת לתגית form action שווה ולכתוב בערך איזשהו דף שאני רוצה לגלוש אליו. בואו נניח שהדף הזה נקרא page2.htm. כרגע יש לי תגית form שמציינת שאם מתבצעת גלישה מהדף הזה על ידי איזשהו לחצן מיוחד שאנחנו תכף נראה, הגלישה תתבצע לדף שנקרא page2.htm.
כרגע וישואל סטודיו מציינת לי שהיא לא מזהה את הדף הזה על ידי הערה בירוק מתחת לדף. אז בואו נפתח דף page2.htm אני הולך לפייל new file בוחר html open ושומר את הדף הזה גם כן בדסטופ וקורא לו page2. בואו נצבע את הדף הזה בצבע רקע אחר בכדי לראות באמת שישנו איזשהו שינוי ברור לעין כשאני מבצע את הגלישה.
אז איך אני גולש לדף השני? מה שאני צריך לעשות זה להגדיר איזשהו רכיב שנקרא input type שווה submit. input type שווה submit זה בעצם לחצן מיוחד שהתפקיד שלו זה לבצע את הגלישה לדף שנמצא באקשן עבור הפורם שבתוכו נמצא הלחצן.
בואו נסתכל עוד פעם מה יש לנו פה. יש לנו תגיד פורם, יש לנו אטריביוט שנקרא action שמפנה אותי לדף שנקרא page2.htm, יש לנו לחצן submit, שנמצא בתוך הפורם, לכן כשילחצו עליו הדף יבדוק מהו הדף שנמצא תחת אקשן ולשם יבצע גלישה.
בכדי לכתוב איזשהו טקסט על הלחצן יש לנו את ה-Attribute Value. בואו נשמור ונבדוק איך זה מתנהג. אפשר ללחוץ מקש אם אני פה למעלה על איפה שכתוב The Form ולבחור Open Containing Folder.
זה מיד פותח את התיקייה בה נמצא הדף ומסמן לי את הדף. דאבל קליק על הדף, פותח לי את הדף, אני מבצע לחצן, לחיצה על לחצן שלח, ואני רואה שהדפדפן מראה לי שגלשתי לפייג' 2.htm.
בואו נחזור אחורה, נחזור לוויז'ואל סטודיו, ונראה מה עוד אני יכול לבצע עם הנתון הזה. הדבר הבא שאני רוצה לראות, ומה קורה אם יש לי מידע שהמשתמש הכניס, ואיך המידע הזה עובר לדף השני.
בואו נניח שאני רוצה לקלוט מהמשתמש את הגיל. ניקח תגית span, אני מזכיר לכם, תגיד span מתארת לי איזושהי label פשוטה. ואני כותב enter your age.
עכשיו אני רוצה שיהיה לי איזושהי אפשרות לקלוט גיל מהמשתמש. גיל מהמשתמש אפשר לקלוט על ידי רכיב שנקרא תיבת טקסט.
באנגלית זה נקרא טקסט בוקס. איך אני מגדיר תיבת טקסט? תיבת טקסט מוגדרת על ידי תווית שנקראת input type=text. בואו נשמור, נחזור לדפדפן, נלחץ על refresh, ואני רואה בעצם שיש לי כאן enter your age, יש לי פה איזושהי תיבת טקסט שאני יכול להכניס איזשהו גיל, ולחצן שלח שאני שולח,
ועכשיו המידע אמור להגיע לדף השני. איזה מידע אמור להגיע לדף השני? המידע שהמשתמש הכניס ברכיבי קלט, אבל למעשה המידע לא הגיע לדף השני. אם המידע היה מגיע לדף השני הייתי אמור לראות אותו כאן איפה שיש את כתובת ה-url.
למה המידע עדיין לא הגיע לדף השני? אפילו שהמשתמש הכניס אותו לתיבת הטקסט. הסיבה מאוד פשוטה כל רכיב המאפשר לקלוט מידע מהמשתמש בכדי שהוא אכן ישלח את המידע לדף היעד שמוגדר באקשן, אותו רכיב צריך להכיל מאפיין מאוד מיוחד שנקרא name,
כמובן בעל איזשהו שם משמעותי. כן, אני רואה שהתבלבלתי, ה-name צריך להיות כאן. בואו נשמור, שוב נראה מה יש לנו כאן. יש לנו תיבת טקסט input type=text ויש לה אטריוויוט שנקרא name והערך שלו שווה txt h.
בואו נחזור לדפדפן, נבצע רפרש, שוב פעם נכניס איזשהו גיל ונבצע שליחה. עכשיו אני רואה שיש לי פה גלישה לדף השני, לדף page2.htm, מיד אחריו אני רואה סימן שאלה, מיד אחרי הסימן שאלה אני רואה שיש לי txt h שווה ואת הערך שהיה בתוך תיבת הטקסט.
למידע שנמצא אחרי סימן השאלה קוראים query string. query string זה אותו מידע שנשלח על ידי הפרמטרים לדף היעד.
בואו נחזור חזרה לויז'ואל סטודיו ונראה עוד כמה דברים בקשר לזה. אז מה שיש לנו כרגע זה סך הכל תגיד form, תיארתי באקשן איזה דף יעד אני רוצה לשלוח אליו נתונים, יש לי כאן איזושהי לייבל שאומרת למשתמש תכניס לי בבקשה את הגיל שלך, יש לי תיבת טקסט שקולטת את הגיל מהמשתמש, חובה שיהיה לה name אחרת המידע לא יישלח לדף היעד,
ויש לי לחצן שליחת נתונים שנקרא input type=submit. התפקיד שלו זה לשלוח את הנתונים לדף היעד. מה קורה אם אני כן רוצה לשלוח את הנתונים אבל אני לא רוצה שיראו אותם בשורת ה-URL בראש הדפדפן?
יכול להיות שהנתונים שלי הם חסויים, לדוגמה סיסמה או שם משתמש לפעמים. כדי לשלוח את הנתונים בלי שיראו אותם בשורת ה-URL של הדפדפן, כלומר שלא ייכתבו ב-query סטרינג, אני צריך לשנות את שיטת השליחה.
שינוי שיטת השליחה מתבצע ברמת ה-form על ידי אטריביוט שנקרא method. יש לי שתי אפשרויות או get או post. ב-HTML, get הוא ה-default.
get זה אומר שיטת שליחת הנתונים כאשר המידע נמצא ב-query סטרינג, מיד אחרי סימן השאלה שראינו מקודם. בואו נגדיר גט, נשמור, נחזור לדפדפן, נרפרש ונבצע עוד פעם שליחה של הנתונים.
נראה עדיין שהנתונים נמצאים בקווירי סטרינג txt h שווה 25. השיטה הזאת היא ובדיוק אותה השיטה שקרתה מקודם וזאת שיטת גט.
אם אני עכשיו אשנה את זה לפוסט, אשמור, אחזור בחזרה, נרפרש ואשלח, אני רואה כרגע שכן הייתה גלישה לדף page2.htm אבל אני לא רואה את הנתונים שנשלחו.
זה לא אומר שהנתונים לא נשלחו. לכל נתון שהיה name, לכל תיבת קלט שהיה name, אכן הנתון שלה נשלח לדף היעד, אבל הנתון נשלח מאחורי הקלעים ואני לא רואה אותו ב-query string.
אז מתי משתמשים בשיטת גט ומתי משתמשים בשיטת פוסט? בשיטת פוסט כמובן משתמשים כאשר אני לא רוצה שאף אחד יראה איזה מידע נשלח לדף היעד. בשיטת גט משתמשים כאשר אני כן רוצה שאנשים יראו מה נשלח בשיטת היעד.
ואז היתרון של שיטת גט ושאם רואים את הנתונים שנשלחים בכתובת ה-URL אפשר לבצע עליהם קופי. לדוגמה ביוטיוב אתם יכולים לראות שכאשר אתם גולשים לאיזשהו וידאו רואים סימן שאלה ואז רואים את המידע לגבי איזה וידאו מוצג.
כך ניתן בעצם לסמן את כל הכתובת כולל הפרמטר שנשלח לדף, לבצע העתקה ולשלוח באימייל לחבר או לשמור את זה ואז אפשר אפשר לגלוש עוד פעם לדף הוידאו ומיד הוא יציג לכם את הוידאו המבוקש.
בואו נחזור לויז'ל סטודיו ונראה מה עוד אפשר לעשות עם הנתונים האלה. אפשר לראות שאני יכול לבצע מעין שליחת הנתונים לא לדף יעד אלא ישירות לתוך אימייל.
איך אני מבצע את זה? אני רושם מייל 2.2 ואיזה אימייל אני רוצה. לדוגמה [email protected] כרגע מה שעשיתי ואמרתי דבר כזה. כאשר לוחצים על החצן submit הדפדפן רואה שיש לו פקודת מייל 2. זה אומר שהוא הולך לשלוח את הנתונים בדף ישירות למייל הזה.
יש עם זה איזושהי בעיה קלה שכבר אנחנו הולכים לראות בהמשך אבל בואו נסתכל כרגע איך זה מתנהג. אני חוזר בחזרה לדפדפן, נחזור לדף הקודם, נרפרש ונבצע שליחה של הנתונים.
אני רואה כרגע שהוא אומר לי שמישהו מנסה לשלוח איזשהו אימייל והוא שואל אותי איך אני רוצה בדיוק לבצע שליחה של האימייל. פה נבחר את gmail, לבצע אוקיי ואני רואה שדף gmail נפתח ואומר למשתמש בוא תירשם בכדי שאני אשלח לך את הנתונים.
זה קרה במחשב הזה, בדרך כלל אפילו את זה לא יקרה אלא מה שיקרה זה תוכנת Outlook או תוכנה דומה הולכת להיפתח ולבקש מהמשתמש אפשרות להתחיל לבצע קונפיגורציה בשביל לשלוח מייל.
כמובן שהמשתמש הפשוט לא אמור להבין בכל הסיפור הזה ולכן הוא לא כל כך ידע מה לעשות. זאת הסיבה שהשיטה הזאתי לא כל כך טובה, מפני שזה לא באמת ישלח מייל אם המייל לא מעודכן במחשב של המשתמש בצורה נכונה.
השיטה הזאתי כבר ישנה ולא כל כך משתמשים איתה. בהמשך נראה איך באמת אפשר לשלוח מייל בעזרת שפה אחרת שנקראת ASP.NET. אוקיי, אז מה היה לנו כרגע?
היינו תגיד פורם, ותגיד פורם עדכנו לאיזה דף אני רוצה להגיע כאשר לוחצים על submit. בואו נרשום page2.htm, הייתה לי פה את בחירת שיטת הנתונים, get מאפשרת לפרמטרים להגיע לדף השני בשורת ה-URL, post גורמת לפרמטרים להיות מוסתרים.
ביקשתי מהמשתמש נתונים להכניס על ידי תיבות קלט, כרגע השתמשנו רק בתיבת טקסט, ולחצן submit זה הלחצן הכי חשוב שמבצע גלישה לדף שמוגדר ב-action ושולח אליו את הפרמטרים, או בשורת ה-URL אם מוגדר get או מאחורי הקלעים אם מוגדר post.
זאת הייתה תגית פורם. אוקיי, אז מה שאנחנו הולכים לראות עכשיו זה איך בעצם ליישם את החומר שלמדנו על תגית פורם בכדי ליצור איזשהו דף שמסוגל לקלוט מהמשתמש פרטים.
אז המטרה שלנו לקלוט מהמשתמש כל מיני סוגים שונים של פרטים בכדי שיהיה לנו את האפשרות לשלוח את זה לאיזשהו דף, בוא נניח לצורך שמירה באיזשהו בסיס נתונים או לצורך עיבוד המידע.
אז מה שנעשה, נפתח בעצם דף חדש לגמרי בשביל להתחיל את הכל בצורה מסודרת מההתחלה. אז אני הולך ל-File, New, File, בוחר HTML, לוחץ Open,