יצירת טופס
טופס שליחה
קודם כל מהו טופס?
טופס הוא מה שהמשתמש שולח (כמו טופס על דעתו של האתר וכ'ו).
אז מה אנחנו צריכים לעשות?
1)מקום שבו המשתמש יכתוב את הפרטים.
2)לחצן שליחה ולחצן איפוס.
3)שליחת הנתונים.
קודם כל נתחיל במיקום התופס שנמצא בתגית <body>.
ושם מיד אחרי הפתיחה נשים את התגית <form> (בינתיים נכתוב רק את התגית תוספות נשלח אח"כ).
ונסגור אותה מיד לפני התגית </body> (לסגור כך: </form> )
עכשיו, איך נשים שדות כתיבת שם? (למשל)
בשביל לשים שדה כתיבת שם (למשל) נצטרך להודיע לדפדפן שיש תגית של כתיבה בתוכה, אבל איך?
בשביל זה נשתמש בתגית <input> *שים לב! לתגית <input> אין צורך בסגירה!*
בשביל לעשות שדה קלט לחלק של גיל נרשום
בתגית <input> ככה:
כלומר:קוד HTML:<input type="text" name="age" maxlength="3">
בקטע: type="text" אמרנו לדפדפן שזה קטע טקסט.
בקטע: name="age" זה בעיקר בשבילנו שנדע לזהות בשביל מה קטע זה נועד.
ובקטע: maxlenght="3" אמרנו שאפשר לכתוב עד 3 אותיות בקטע זה.
כעת נשמור ונבדוק אם קטע זה עובד. אם כן ברכותייהבה נתקדם.
כפתור לחיצה.
בשביל ליצור כפתור לחיצה נצטרך לכתוב את השורה הבאה:
לא להיבהל מיד יבוא ההסבר:קוד HTML:<input type="submit" value="שלח">
שכתבנו: type="submit" אמרנו לדפדפן שזה לחצן שליחה. *אין לשנות את זה בכלל! אחרת ..... ניתן לך לנסות ולראות*
וכשכתבנו: value="שלח" זה אומר לדפדפן מה לכתוב על הלחצן (אתה יכול לבחור כל מילה שברצונך לאו דווקא מה שאני בחרתי).
יפה מאוד
בעצם מהו לחצן האיפוס?
לחצן האיפוס הוא לחצן שמאפס את כל הטופס.
בשביל ליצור לחצן איפוס נרשום:
במילים אחרות:קוד HTML:<input type="reset" value="אפס">
type="reset" אומר לדפדפן להחזיר את הכל לקדמותו. *גם את זה אסור לשנות*
והקטע: value="אפס" אומר מה יהיה אפשר לכתוב. (גם את זה אפשר לשנות למה שרוצים)
ולבסוף שדות בחירה.
שדות בחירה הם השדות שלמשל רשום "אני מסכים לתנאי השימוש" או "השאר אותי מחובר/ת" ובכל דבר יש שדות בחירה פשוט אנו לא שמים לב עליהם.
אז בואו נבנה שדה בחירה מרובה.
נרשום:
כלומר: type="checkbox" אומר שזהו שדה בחירהקוד HTML:<input type="checkbox" name="checkbox">אפשרות 1
ושוב השדה name אומר לנו מה זה....
עכשיו שדה בחירה לבחירה בודדת.
שדה בחירה בודד הוא שאפשר לבחור מכמה אפשרויות אפשרות אחת בלבד.
שדות אלה נקראים שדות רדיו (ע"ש הכפתורים שיש ברדיו)
ולכן נכתוב:
במילים אחרות:קוד HTML:<input type="radio" name="radio">אפשרות 1
השדה type="radio" אומר לדפדפן מה זה.
השדה name עוזר לנו לזהות.
פשוט לא?
*לשדות בחירה יש עוד אפשרויות בשדה name פשוט לא נכנס לזה*
אפשרות סיסמה
לפעמים אנו רואים אפשרויות של סיסמה. אבל איך?
שאלה טובה
כלומר החלק השלם הוא:
<input type="password" name="pwd" />
לא להיבהל!
הקטע: type="password" אומר שזה יהיה קטע עם סיסמה (כוכביות במקרה הזה)
הקטע: name="pwd" זה שיזהו את זה.
*זה רק עושה כוכביות בתור סיסמה אך לא עושה אפשרות סיסמה שאפשר לגשת עליה*
עכשיו איך לשלוח?
כנראה שכבר ניסית את הלחצן שליחה אבל הוא לא עבד...
בגלל שלא הגדרנו כלום בשדה <form> בשביל זה נוסיף את האפשרות הבאה:
כלומר:קוד HTML:<form name="frm" method="post" action="mailto:האימייל שלך">
1)פתחנו תגית form
2)בשדה name עשינו טובה בשביל עצמנו וחסכנו זמן.
3)בשדה method="post" בחרנו בין לפרסם (post) לבין לקבל (get) השיטה הפופולרית יותר היא post...
4)בשדה action="mailto:האימייל שלך" אמרנו לדפדפן לשלוח את התגובות לאימייל הנ"ל (תשנו את החלק "האימייל שלך" לאימייל שאתה רוצה שאליו ישלחו הפניות)
בנוסף אפשר לעשות תיבות מלל לדוגמה:
<textarea></textarea>
אפשר גם לקבוע מ'ס שורות, רוחביים ואופקיים:
cols="60" rows="10"
זה יכתב כך:
<textarea cols="60" rows="10"></textarea>
כפי שכבר ראית, ששולחים אז אפשר לראות כך:
radio=option 1
כלומר שהגדרנו את השדה רדיו אז זה נתן לנו את השם.
אז מומלץ לתת לכל השדות שמות.
לסיכום נכתוב טופס כזה:
מקווה שהצלחתםקוד HTML:<html> <head> <title> Check </title> </head> <body> <form name="frm" method="post" action="mailto:Youre@E-mail.com"> סיסמה: <input type="password" name="pwd" /> הגיל שלך: <br> <input type="text" name="age" maxlength="3"> בחר מ'ס אפשרויות: <input type="checkbox" name="checkbox"> אפשרות 1 <br> <input type="checkbox" name="checkbox"> אפשרות 2 <br> <input type="checkbox" name="checkbox"> אפשרות 3 <br> בחר אפשרות אחת: <br> <input type="radio" name="radio button"> אפשרות 1 <br> <input type="radio" name="radio button"> אפשרות 2 <br> <input type="radio" name="radio button"> אפשרות 3 <br> <input type="submit" value="שלח"> <input type="reset" value="אפס"> </form> </body> </html>
מחכה כבר למדריך הבא
ציטוט ההודעה
נכתב במקור על ידי smoxer314
