בולנט - דברים מיוחדים...     פרוטו - בניית אתרים

Israeli ASP Organization

ארגון ה-ASP הישראלי
מאמרים/דוגמאות קוד
קישורים
ספרות
חיפוש כללי:

חפש!
כלליHTMLASPASP.NETSQLמסדי נתוניםJavaScriptXML * XSLDHTML * CSSעיצוב וגרפיקהשרתיםComponentsפרסום ושיווקקידום אתריםקופירייטינגPHP
פרסומת
דף ראשי מדורים דרושים הרשמה למועדון אודותינו צור קשר
מיקום: מאמרים ודוגמאות קוד > HTML

טפסים forms

 טפסים (forms), הם דרך לאסוף מידע מהמשתמש, כמובן שאח"כ אפשר להזין אותו למסד נתונים, להשתמש בו באופן חד פעמי וכו

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

:שם משתמש
:סיסמה
כלב חתול :תחביבים
זקן צעיר :גיל
:מיקום
:קצת על עצמך

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

תג ה < form>

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

 

<form> . . . </form>

 

תיבת טקסט  <input type="text">

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

 

 

<form> <input type="text" name="user"> </form>

הוא תג שמשתמשים בו הרבה מאד בטפסים, אתם עוד תראו אותו בהמשך. input הסבר: תג ה
: שלו הם properties ה
. ה"סוג" אומר למחשב איזה סוג זה, במקרה הזה זוהי תיבת טקסט input כמו שאמרתי, קיימים סוגים רבים של type="text"
.אני לא ארחיב על זה יותר מדי, תיבת הטקסט תעבוד גם בלי זה, אבל זה יהיה שם המשתנה שיווצר לאחר שליחת הטופס name="user"
הערך של המשתנה יהיה הערך שהמשתמש הזין לתיבת הטקסט

תיבת סיסמה  <input type="password">

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

 

<form> <input type="text" name="user"> <input type="password" name="pass"> </form>

ואת זה אתם יכולים להבין לבד... הדבר היחיד החדש פה הוא השינוי של ה-TYPE

מ-TEXT

ל-PASSWORD

תיבת סימון - צקבוקס - checkbox

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

 

<form> <input type="text" name="user"> <input type="password" name="pass"> <input type="checkbox" name="dog" > <input type="checkbox" name="cat" > </form>

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

 תיבת רדיו - radio button

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

 

<form> <input type="text" name="user"> <input type="password" name="pass"> <input type="checkbox" name="dog" > <input type="checkbox" name="cat" > <input type="radio" name="age" value="young"> <input type="radio" name="age" value="old"> </form>

.old אם המשתמש בחר בזקן יקבל המשתנה את ,young יקבל את הערך age הסבר קצר למה שקורה אחרי שנשלח הטופס: אם המשתמש בחר בצעיר, המשתנה

 תיבת בחירה

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

 

<form> <input type="text" name="user"> <input type="password" name="pass"> <input type="checkbox" name="dog" > <input type="checkbox" name="cat" > <input type="radio" name="age" value="young"> <input type="radio" name="age" value="old"> <select name="location"> <option value="haifa"> חיפה <option value="afula"> עפולה <option value="arabhell"> רפיח </select> </form>

.כמו שאתם רואים, זה דומה לתיבת הרדיו - שם אחד משותף לכל האפשרויות ולכל אחת ערך שונה,
.afula יקבל את הערך location אם מישהו יבחר את האפשרות של עפולה, המשתנה

תיבת טקסט גדולה

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

 

<form> <input type="text" name="user"> <input type="password" name="pass"> <input type="checkbox" name="dog" > <input type="checkbox" name="cat" > <input type="radio" name="age" value="young"> <input type="radio" name="age" value="old"> <select name="location"> <option value="haifa"> חיפה <option value="afula"> עפולה <option value="arabhell"> רפיח </select> <textarea name="info" rows="5" cols="15"></textarea> </form>

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

כפתורי השליחה והאיתחול

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

 

<form> <input type="text" name="user"> <input type="password" name="pass"> <input type="checkbox" name="dog" > <input type="checkbox" name="cat" > <input type="radio" name="age" value="young">צעיר <input type="radio" name="age" value="old"> <select name="location"> <option value="haifa"> חיפה <option value="afula"> עפולה <option value="arabhell"> רפיח </select> <textarea name="info" rows="5" cols="15"></textarea> <input type="submit" name="submit" value="שלח"> <input type="reset" name="reser" value="אתחל"> </form>

הוא הערך שיוצג כל הכפתור value,הקוד די מסביר את עצמו



התגובות שלכם

         
01. 17/12/2004  בני בלום
הסבר מקיף על הטפסים, יפה מאוד!
מה עם קצת מידע על ואלידציה של טפסים?

02. 14/01/2005  נעמי
תודה רבה! זה ממש עזר!

03. 08/04/2005  אור חבס
אחי.. אולי אתה יכול לעזור לי... אני מחפש הסבר על בניה של טופס שאפשר לשנות לטקסט בו את הצבע, גודל, פונט, לצרף תמונות ולינקים, ממש עורך. כמו בוואלה!דואר.

אחי אם יש לך מושג על מה אני מדבר תעזור לי בבקשה!

04. 15/04/2005  מאיר
אבל שאלה קטנה לי אליך...
לאחר בניית הטופס איך אני עושה הכפתור SUBMIT ישלך את הטופס אלי למייל?

05. 19/04/2005  HacKeR pis pis
וואלה הוא צודק יש כאלה שלא מבינים איך זה נשלח ולאן עם היה לי כוח היתי מפרט אבל אין לי אז זה העבודה שלך ח סתם אחי אהבתי את המדריך ממש חמוד אבל תוסיף איך זה נשלח לאימיל

06. 07/05/2005  מאור
לא חייב לאימייל,
אפשר גם שהנתונים הנאספים מהמשתמש ישלחו אל השרת.
(תלמדו על זה כשתלמדו את השפות ASP,PHP,CGI,ועוד..)

07. 07/07/2005  niseem
שלום רב
אני גמלאי שמלמד ילדים ומבוגרים - מחשבים-ללא תשלום.
בניתי לבד אתר שבו אני מציג את יצירות האומנות שלי.
www.al-haniseem.yasa.co.il
אני מבקש עזרה בשני דברים
1.מונה מבקרים
2.טופס תגובות שניתן לראות אותו באתר שלי
בתודה מראש
מועלם נסים
052-4780229

08. 12/07/2005  חן
השאלה שלי היא איך אני מגדירה בכפתור "שלח" לאן ישלח הטופס? (אני רוצה שישלח לתיבת הדואר שלי ולא יודעת איך לעשות את זה...) בבקשה אם אפשר לענות לי באימייל...
תודה.
נ.ב- אחלה אתר. הסברים מצויינים עזר לי מאוד! (:

09. 13/07/2005  דן
אני רוצה לציין שיש לכם אחלה של אתר מאוד אהבתי אותו
אבל כמו קודמי חיפשתי כיצד אני מגדיר את הכפתור שלח שישלח את הטופס לאיי מייל שלי ולא מצאתי
אז אנא אם מישהו יכול להסביר לי כיצד אני מגדיר את הכפתור שישלח לי לאיי מייל
תודה מראש לכולם...

10. 28/07/2005  ואגו
גם לי לא הובן כיצד נתוני מילוי הטופס מגיעים למייל שלי. איזה פקודה צריך על מנת שזה יתבצע.
אני נכה שמנסה להסב מקצוע עקב כך.
מודה מראש על העזרה

11. 05/08/2005  אביאור
ה זה שווה אי אפשר לישלוח את זה למייל שלי .....
אני רוצה שכל המידע ישלח למייל שלי איך עושים את זה?

12. 20/10/2005  אופיר
אני מצטרף לבקשות הנ"ל ושואל:
כיצד מעבירים את הטופס למייל, ושהוא יראה כטופס גם במייל, מפני שאני יצרתי טופס שנשלח אלי למייל אבל אני מקבל אותו בצורת ג'יבריש במייל שלי.
בתודה מראש
אופיר

13. 26/08/2005  לאון
ליוני לוי הנכבד,
השקעת וכתבת מאמר נהדר שמאוד עוזר - כל הכבוד!!!
אבל, לעזאזל, 4 חודשים אנשים מתחננים להגדרה של כפתור "שלח" שיעשה את העבודה וישלח נתונים לדוא"ל!!!!
תענה כבר - ותבורך!
תודה

14. 04/11/2005  eli
את הדבר הכי חשוב לא כתבת ה
ACTION ,הדבר שאיתו השתמשתי לא טוב לא נותן לשלוח לאי מייל...
למישהו יש את הקוד הטוב?

15. 02/02/2006  חביב
אחי אהבתי את הנאמר למעלה. אבל לאן זה נשלח??? איך אני מקבל את הנכתב?? לא מבין לאן זה נעלם

16. 21/02/2006  יודפת
בניתי טופס אותו אני רוצה לשלוח למייל של שני אנשים. כיצד אני עושה זאת ?

17. 25/02/2006  HacKeR pis pis
טוב אני רואה שלא ממש איכפת כאן לאנשים לענות לכם אז אני יגיד לכם בקצרה ממש בקצרה..
טוב בשביל לשלוח את הנתונים שהוצבו ע"י הגולש או ע"י גורם זר צריך כבר לתכנת את זה במסד נתונים אחרת הוא יפתח לכם את הoutlook שזה לא ממש נוח ויפה.. לכן מומלץ בחום לעשות את זה דרך php asp וכ'ו יש לכם כאן באתר עצמו הסברים ולמי שלא ממש מבין אז הנה אתר שאני למדתי בו:)
http://www.sigall.co.il/asp.asp#scripts
שמה יש לכם הכל אפילו הכנת טופס בלי לעשות כלום הם מכינים לכם שמה את הטופס
http://www.sigall.co.il/codes/codes1.asp
בבקשה מקווה שעזרתי:)

         

מחבר: יוני לוירמת קושי: 1  ||  ציון: (7.55172413793103)כל הזכויות שמורות ל-IAO ©

חנות לסטלן  |   מתכונים  |   חגי ישראל  |   פורטל משחקים  |   חנויות מחשבים ו-ציוד הקפי  |   מגזין מסטול לסטלן המצוי  |   קליפרים  |   גידול צמחים פרחים  |   ספא פינוק מושלם