הערה:

התמיכה עבור רכיבים של טופסי HTML שופרה בעדכוני Creative Cloud ב-Dreamweaver. לקבלת מידע, ראה תמיכה משופרת ב-HTML5 עבור רכיבי טופס.

אודות טופסי אינטרנט

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

ניתן ליצור טפסים שמוסרים נתונים לרוב שרתי היישומים, כולל PHP,‏ ASP ו-ColdFusion. בעת שימוש בשרת ColdFusion, ניתן גם להוסיף לטפסים בקרי טופס מיוחדים של ColdFusion.

הערה:

ניתן גם לשלוח נתוני טופס ישירות לנמען דוא"ל.

אובייקטי טופס

ב-Dreamweaver, סוגי קלט בטופס נקראים אובייקטי טופס. אובייקטי טופס הם המנגנון שמאפשר למשתמשים להזין נתונים. ניתן להוסיף לטופס את אובייקטי הטופס הבאים:

שדות טקסט

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

אובייקטי טופס

הערה:

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

שדות מוסתרים

מאפשרים לשמור מידע שהוזן על-ידי משתמש, כגון שם, כתובת דוא"ל או העדפות תצוגה, ולהשתמש בנתונים אלה בפעם הבאה שהמשתמש מבקר באתר.

לחצנים

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

תיבות סימון

מאפשרות תגובות מרובות בקבוצת אפשרויות אחת. המשתמש יכול לבחור ללא הגבלה מבין האפשרויות הזמינות. הדוגמה הבאה מציגה שלוש תיבות סימון שנבחרו: Surfing,‏ Mountain Biking ו-Rafting.

תיבות סימון

לחצני אפשרויות

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

לחצני אפשרויות

תפריטי רשימה

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

הערה:

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

תפריטי קפיצה

רשימות ניווט או תפריטים נפתחים המאפשרים לך להוסיף תפריט שבו כל אחת מהאפשרויות מקשרת למסמך או לקובץ.

שדות קובץ

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

שדות תמונה

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

יצירת טופס HTML

(עבור משתמשי Creative Cloud בלבד): כחלק מהתמיכה ב-HTML5, הוספנו תכונות חדשות לחלונית Properties עבור רכיבי טופס. כמו כן, נוספו ארבעה אובייקטי טופס חדשים (E-mail, search, telephone, URL) למקטע Forms בחלונית Insert. לקבלת מידע נוסף, ראה תמיכה משופרת ב-HTML5 עבור רכיבי טופס.

  1. פתח דף ומקם את נקודת ההכנסה במקום שברצונך להציג בו את הטופס.
  2. בחר באפשרות Insert >‏ Form, או בחר בקטגוריה Forms שבחלונית Insert ולחץ על הסמל Form.

    בתצוגת Design, טפסים מסומנים בקו מתאר אדום מנוקד. אם אינך רואה קו מתאר זה, בחר באפשרות View >‏ Visual Aids >‏ Invisible Elements.

  3. הגדר את מאפייני טופס ה-HTML ב-Property inspector ‏(Window >‏ Properties):

    א. בחלון Document, לחץ על קו המתאר של הטופס לבחירת הטופס.

    ב. בתיבה Form Name, הקלד שם ייחודי לזיהוי הטופס.

    מתן שם לטופס מאפשר להפנות אל הטופס או לשלוט בו באמצעות שפת סקריפט, כגון JavaScript או VBScript. אם לא נותנים שם לטופס, Dreamweaver יוצר שם באמצעות תחביר formn ומגדיל את הערך של n עבור כל טופס שנוסף לדף.

    ג. בתיבה Action, ציין את הדף או את הסקריפט אשר יעבד את נתוני הטופס על-ידי הקלדת הנתיב, או לחיצה על סמל התיקייה וניווט לדף או לסקריפט המתאימים. דוגמה: processorder.php.‎

    ד. בתפריט הנפתח Method, ציין את השיטה להעברת נתוני הטופס לשרת.

    הגדר כל אחת מהאפשרויות הבאות:

    Default‎ שימוש בהגדרת ברירת המחדל של הדפדפן כדי לשלוח את נתוני הטופס לשרת. בדרך כלל, ערך ברירת המחדל הוא השיטה GET.

    GET צירוף הערך לכתובת ה-URL המבקשת את הדף.

    POST הטבעת נתוני הטופס בבקשת ה-HTTP.

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

    דפים דינמיים שנוצרו על-ידי פרמטרים שהועברו במתודת GET ניתנים לשמירה כסימניות, מכיוון שכל הערכים הדרושים ליצירת הדף כלולים בכתובת URL שמוצגת בתיבת הכתובת של הדפדפן. בניגוד לכך, דפים דינמיים שנוצרו על-ידי פרמטרים שהועברו במתודת POST אינם ניתנים לשמירה כסימניות.

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

     

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

    בדרך כלל, הגדרת ברירת המחדל של application/x-www-form-urlencode נמצאת בשימוש בשילוב עם המתודה POST . בעת יצירת שדה העלאת קובץ, ציין את הסוג ‎multipart/form‑data MIME.

     

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

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

    ‎_blank פתיחת מסמך היעד בחלון חדש ללא שם.

    ‎_parent פתיחת מסמך היעד בחלון האב של החלון שמציג את המסמך הנוכחי.

    ‎_self פתיחת מסמך היעד באותו חלון שבו נמסר הטופס.

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

  4. הוסף אובייקטי טופס לדף:

    א. מקם את נקודת ההכנסה במקום שבו תרצה שאובייקט הטופס יופיע בטופס.

    ב. בחר את האובייקט בתפריט Insert >‏ ‏Form, או בקטגוריה Forms שבחלונית Insert.

    ג. השלם את תיבת הדו-שיח Input Tag Accessibility Attributes. לקבלת מידע נוסף, לחץ על הלחצן Help בתיבת הדו-שיח.

    הערה:

    אם אינך רואה את תיבת הדו-שיח Input Tag Accessibility Attributes, ייתכן שנקודת ההכנסה היתה בתצוגת Code כשניסית להוסיף את אובייקט הטופס. ודא שנקודת ההכנסה נמצאת בתצוגת Design ונסה שוב. לקבלת מידע נוסף אודות נושא זה, עיין במאמר של דיוויד פאוורס‬ יצירת טופסי HTML ב-Dreamweaver.

    ד. הגדר את מאפייני האובייקטים.

    ה. הזן שם עבור האובייקט ב-Property inspector.

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

    הערה:

    לכל לחצני האפשרויות בקבוצה חייב להיות שם זהה.

    ו. להוספת תווית לאובייקט של שדה טקסט, תיבת סימון או לחצן אפשרות בדף, לחץ לצד האובייקט והקלד את התווית.

  5. התאם את פריסת הטופס.

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

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

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

לערכת לימוד בנושא יצירת טפסים, ראה www.adobe.com/go/vid0160_il.

לערכת לימוד בנושא עיצוב טפסים באמצעות CSS, ראה www.adobe.com/go/vid0161_il.

מאפייני אובייקט Text Field

בחר באובייקט שדה הטקסט, והגדר אחת או יותר מהאפשרויות הבאות ב-Property inspector:

Char Width

ציון מספר התווים המרבי שניתן להציג בשדה. מספר זה יכול להיות נמוך מ-Max Chars, שמציין את מספר התווים המרבי שניתן להזין בשדה. לדוגמה, אם Char Width מוגדר לערך 20 (ערך ברירת המחדל) והמשתמש מזין 100 תווים, רק 20 מהתווים מוצגים בשדה הטקסט. אף על פי שלא ניתן לראות את שאר התווים בשדה, אובייקט השדה מזהה אותם והם נשלחים לשרת לצורך עיבוד.

Max Chars

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

Num Lines

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

Disabled

ביטול אזור הטקסט.

Read Only

הגדרת אזור הטקסט כאזור טקסט המיועד לקריאה בלבד.

Type

הקצאת השדה כשדה של שורה בודדת, כשדה של שורות מרובות או כשדה סיסמה.

Single-line

יצירת תג input שתכונת type שלו מוגדרת על text. ההגדרה Char Width מבצעת מיפוי לתכונה size, וההגדרה Max Chars מבצעת מיפוי לתכונה maxlength.

Multi-line

יצירת תג textarea. ההגדרה Char Width מבצעת מיפוי לתכונה cols, וההגדרה Num Lines מבצעת מיפוי לתכונה rows.

Password

יצירת תג input שתכונת type שלו מוגדרת על password. ההגדרות Char Width ו-Max Chars מבצעות מיפוי לאותן תכונות כמו שדות טקסט של שורה בודדת. כשמשתמש מקליד בשדה סיסמה, המידע שמוזן מופיע כתבליטים או ככוכביות כדי להגן עליו מעיני אחרים.

Init val

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

Class

אפשרות להחלה של כללי CSS על האובייקט.

אפשרויות אובייקט לחצן

Button Name

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

Value

קביעת הטקסט המופיע על הלחצן.

Action

קביעת הפעולה שמתבצעת בעת לחיצה על הלחצן.

Submit Form

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

Reset Form

מחיקת תוכן הטופס בעת לחיצה על הלחצן.

None

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

Class

החלה של כללי CSS על האובייקט.

אפשרויות של אובייקט תיבת סימון

Checked Value

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

Initial State

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

Dynamic

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

Class

החלה של כללי Cascading Style Sheets ‏(CSS) על האובייקט.

אפשרויות עבור אובייקט לחצן אפשרות בודד

Checked Value

הגדרת הערך שיש לשלוח לשרת בעת בחירה בלחצן האפשרות. לדוגמה, ייתכן שתקליד skiing בתיבה Checked Value כדי לציין שמשתמש בחר באפשרות skiing.

Initial State

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

Dynamic

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

Class

החלה של כללי CSS על האובייקט.

List/Menu

שיוך שם לתפריט. השם חייב להיות ייחודי.

Type

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

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

Height

‏‏(הסוג List בלבד) הגדרת מספר הפריטים המוצגים בתפריט.

Selections

‏‏(הסוג List בלבד) אפשרות זו קובעת אם המשתמש יכול לבחור פריטים מרובים ברשימה.

List Values

פתיחת תיבת דו-שיח המאפשרת להוסיף את הפריטים לתפריט טופס:

  1. הוסף והסר פריטים מהרשימה באמצעות לחצן הפלוס (+) ולחצן המינוס (–).

  2. הזן טקסט לתווית וערך אופציונלי לכל פריט בתפריט.

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

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

    פריטים מופיעים בתפריט בסדר הופעתם בתיבת הדו-שיח List Value. הפריט הראשון ברשימה הוא הפריט שנבחר כשהדף נטען בדפדפן.

Dynamic

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

Class

אפשרות להחלה של כללי CSS על האובייקט.

Initially Selected

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

הוספת שדות מסוג העלאת קובץ

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

לפני שניתן להשתמש בשדות העלאת קובץ, יש ליצור סקריפט או דף מצד השרת שמסוגל לטפל במסירת קבצים. עיין בתיעוד של טכנולוגיית השרת שאתה משתמש בה לעיבוד נתוני טופס. לדוגמה, אם אתה משתמש ב-PHP, ראה "טיפול בהעלאות קבצים" במדריך המקוון של PHP בכתובת http://us2.php.net/features.file-upload.php .

שדות קובץ דורשים שימוש בשיטה POST להעברת קבצים מהדפדפן לשרת. הקובץ נשלח לכתובת שצוינה בתיבה Action של הטופס.

הערה:

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

  1. הוסף טופס לדף (Insert >‏ Form).
  2. בחר בטופס להצגת מפקח המאפיינים שלו.
  3. הגדר את האפשרות Method של הטופס על POST.
  4. בתפריט הנפתח Enctype, בחר באפשרות multipart/form-data.
  5. בתיבה Action, ציין את הדף או הסקריפט מצד השרת שמסוגל לטפל בקבצים שהועלו.
  6. מקם את נקודת ההכנסה בתחומי קו המתאר של הטופס, ובחר בפקודה Insert >‏ Form >‏ File Field.
  7. ב-Property inspector, הגדר אחת או יותר מהאפשרויות הבאות:

    File Field Name

    ציון השם של אובייקט שדה הקובץ.

    Char Width

    ציון מספר התווים המרבי שניתן להציג בשדה.

    Max Chars

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

הוספת לחצן תמונה

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

  1. במסמך, מקם את נקודת ההכנסה בתחומי קו המתאר של הטופס.
  2. בחר בפקודה Insert >‏ Form >‏ Image Field.

    תיבת הדו-שיח Select Image Source מופיעה.

  3. בתיבת הדו-שיח Select Image Source, בחר בתמונה ללחצן ולחץ על OK.
  4. ב-Property inspector, הגדר אחת או יותר מהאפשרויות הבאות:

    ImageField

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

    Src

    ציון התמונה שברצונך להשתמש בה עבור הלחצן.

    Alt

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

    Align

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

    Edit Image

    הפעלת עורך התמונות המהווה ברירת מחדל ופתיחת קובץ התמונה לעריכה.

    Class

    אפשרות להחלה של כללי CSS על האובייקט.

  5. להוספת התנהגות JavaScript ללחצן, בחר בתמונה ולאחר מכן בחר בהתנהגות בחלונית Behaviors ‏(Window >‏ Behaviors).

אפשרויות אובייקט מסוג שדה מוסתר

HiddenField

ציון שם השדה.

Value

הקצאת ערך לשדה. ערך זה מועבר לשרת בעת מסירת הטופס.

הוספת קבוצה של לחצני אפשרויות

  1. מקם את נקודת ההכנסה בתחומי קו המתאר של הטופס.
  2. בחר Insert >‏ Form >‏ Radio Group.

  3. בחר הגדרות בתיבת הדו-שיח ולחץ על OK.

    א. בתיבה Name, הזן שם עבור קבוצת לחצני האפשרויות.

     אם הגדרת את לחצני האפשרויות להעברת פרמטרים בחזרה לשרת, הפרמטרים משויכים לשם זה. לדוגמה, אם תיתן לקבוצה את השם myGroup ותגדיר את שיטת הטופס ל-GET (כלומר, אם ברצונך שהטופס יעביר פרמטרי URL במקום פרמטרי טופס כאשר המשתמש לוחץ על לחצן Submit), הביטוי myGroup="CheckedValue" מועבר לשרת בכתובת ה-URL.

    ב. לחץ על לחצן הפלוס (+) להוספת לחצן אפשרות לקבוצה. הזן תווית וערך מסומן עבור הלחצן החדש.

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

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

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

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

    ניתן גם להגדיר את המאפיינים ב-Property inspector או ישירות בתצוגת Code.

הוספת קבוצת תיבות סימון

  1. מקם את נקודת ההכנסה בתחומי קו המתאר של הטופס.
  2. בחר Insert >‏ Form >‏ Checkbox Group.

  3. בחר הגדרות בתיבת הדו-שיח ולחץ על OK.

    א. בתיבה Name, הזן שם עבור קבוצת תיבות הסימון.

    אם הגדרת את תיבות הסימון להעברת פרמטרים בחזרה לשרת, הפרמטרים משויכים לשם זה. לדוגמה, אם תיתן לקבוצה את השם myGroup ותגדיר את שיטת הטופס ל-GET (כלומר, אם ברצונך שהטופס יעביר פרמטרי URL במקום פרמטרי טופס כאשר המשתמש לוחץ על לחצן Submit), הביטוי myGroup="CheckedValue" מועבר לשרת בכתובת ה-URL.

    ב. לחץ על לחצן הפלוס (+) להוספת תיבת סימון לקבוצה. הזן תווית וערך מסומן עבור תיבת הסימון החדשה.

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

    ד. כדי לקבוע בחירה של תיבת סימון מסוימת בעת פתיחת הדף בדפדפן, הזן ערך זהה לערך של תיבת הסימון בתיבה Select Value Equal To.

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

    ה. בחר את התבנית שברצונך ש-Dreamweaver יפרוס בה את תיבות הסימון.

    פרוס את תיבות הסימון באמצעות מעברי שורה או טבלה. בעת בחירה באפשרות הטבלה, Dreamweaver יוצר טבלה בעלת עמודה בודדת וממקם את תיבות הסימון בצד שמאל ואת התוויות בצד ימין.

    ניתן גם להגדיר את המאפיינים ב-Property inspector או ישירות בתצוגת Code.

אודות אובייקטי טופס דינמיים

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

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

הוספה או שינוי של תפריט טופס HTML דינמי

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

לפי שתתחיל, עלייך להוסיף טופס HTML בדף ColdFusion,‏ PHP או ASP, ולהגדיר ערכת רשומות או מקור אחר של תוכן דינמי לתפריט.

  1. הוסף אובייקט טופס HTML List/Menu לדף:

        א. לחץ בתוך טופס HTML בדף (Insert >‏ Form >‏ Form).

        ב. בחר Insert >‏ Form >‏ List/Menu להוספת אובייקט הטופס.

  2. בצע אחת מהפעולות הבאות:

    • בחר באובייקט טופס HTML List/Menu חדש או קיים ולחץ על הלחצן Dynamic ב-Property inspector.

    • בחר בפקודה Insert >‏ Data Objects >‏ Dynamic Data >‏ Dynamic Select List.

  3. בחר הגדרות בתיבת הדו-שיח Dynamic List/Menu ולחץ על OK.

      א. בתפריט הנפתח Options From Recordset, בחר את ערכת הרשומות אשר תשמש כמקור תוכן. תפריט זה משמש גם לעריכת פריטי רשימה/תפריט סטטיים ודינמיים בשלב מאוחר יותר.

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

      ג. ‏(אופציונלי) השתמש בלחצן הפלוס (+) ולחצן המינוס (–) כדי להוסיף ולהסיר פריטים ברשימה. סדר הפריטים זהה לסדר שהם מוצגים בו בתיבת הדו-שיח Initial List Values. הפריט הראשון ברשימה הוא הפריט שנבחר כשהדף נטען בדפדפן. סדר מחדש את הפריטים ברשימה באמצעות לחצני החצים למעלה ולמטה.

      ד. בתפריט הנפתח Values, בחר בשדה שכולל את הערכים של פריטי התפריט.

      ה. בתפריט הנפתח Labels, בחר את השדה שכולל את התוויות עבור פריטי התפריט.

      ו. ‏‏(אופציונלי) לציון בחירה של תפריט מסוים בעת פתיחת הדף בדפדפן או הצגה של רשומה בטופס, הזן ערך שווה לערך של פריט התפריט, בתיבה Select Value Equal To.

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

     

הפיכת תפריטי טופס HTML קיימים לדינמיים

  1. בתצוגת Design, בחר אובייקט טופס מסוג רשימה/תפריט.
  2. ב-Property inspector, לחץ על הלחצן Dynamic.
  3. בחר הגדרות בתיבת הדו-שיח ולחץ על OK.

הצגת תוכן דינמי בשדות טקסט HTML

ניתן להציג תוכן דינמי בשדות טקסט HTML בעת הצגת הטופס בדפדפן.

לפי שתתחיל, עלייך ליצור את הטופס בדף ColdFusion,‏ PHP או ASP, ולהגדיר ערכת רשומות או מקור אחר של תוכן דינמי לשדה הטקסט.

  1. בחר שדה טקסט בטופס HTML בדף.
  2. ב-Property inspector, לחץ על סמל הברק שליד התיבה Init Val להצגת תיבת הדו-שיח Dynamic Data.
  3. בחר בעמודת ערכת הרשומות שתספק ערך לשדה הטקסט ולחץ על OK.

הגדרת אפשרויות בתיבת הדו-שיח Dynamic Text Field

  1. בתפריט הנפתח Text Field, בחר בשדה הטקסט שברצונך להפוך לדינמי.
  2. לחץ על סמל הברק שליד התיבה Set Value To, בחר מקור נתונים מרשימת מקורות הנתונים ולחץ על OK.

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

בחירה דינמית מראש של תיבת סימון HTML

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

לפי שתתחיל, עלייך ליצור את הטופס בדף ColdFusion,‏ PHP או ASP, ולהגדיר ערכת רשומות או מקור אחר של תוכן דינמי לתיבות הסימון. באופן אידיאלי, על מקור התוכן לכלול נתונים בוליאניים, כגון Yes/No או true/false.

  1. בחר באובייקט טופס מסוג תיבת סימון בדף.
  2. ב-Property inspector, לחץ על הלחצן Dynamic.
  3. בחר הגדרות בתיבת הדו-שיח Dynamic CheckBox ולחץ על OK:
    • לחץ על סמל הברק שליד התיבה Check If ובחר בשדה מרשימת מקורות הנתונים.

      מקור הנתונים צריך לכלול נתונים בוליאניים, כגון Yes ו-No, או true ו-false. אם לא מופיעים ברשימה מקורות נתונים או אם מקורות הנתונים אינם מתאימים לצרכייך, לחץ על לחצן הפלוס (+) להגדרת מקור נתונים חדש.

    • בתיבה Equal To, הזן את הערך שעל השדה לכלול כדי שתיבת הסימון תיבחר.

      לדוגמה, כדי שתיבת הסימון תסומן כאשר שדה מסוים ברשומה כולל את הערך Yes, הזן Yes בתיבה Equal To.

    הערה:

    הערך גם מוחזר לשרת אם המשתמש לוחץ על הלחצן Submit של הטופס.

בחירה דינמית מראש בלחצן אפשרות HTML

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

לפני שתתחיל, עלייך ליצור את הטופס בדף ColdFusion,‏ PHP או ASP, ולהוסיף לפחות קבוצה אחת של לחצני אפשרויות HTML ‏(Insert >‏ Form >‏ Radio Group). בנוסף, יש להגדיר ללחצני האפשרויות ערכת רשומות או מקור אחר של תוכן דינמי. באופן אידיאלי, על מקור התוכן לכלול נתונים בוליאניים, כגון Yes/No או true/false.

  1. בתצוגת Design, בחר לחצן אפשרות בקבוצת לחצני האפשרויות.
  2. ב-Property inspector, לחץ על הלחצן Dynamic.
  3. בחר הגדרות בתיבת הדו-שיח Dynamic Radio Group ולחץ על OK.

הגדרת אפשרויות בתיבת הדו-שיח Dynamic Radio Group

  1. בתפריט הנפתח Radio Button Group, בחר טופס וקבוצת לחצני אפשרויות בדף.

    התיבה Radio Button Value מציגה את הערכים של כל לחצני האפשרויות בקבוצה.

  2. בחר בערך שברצונך לבחור מראש באופן דינמי מרשימת הערכים. ערך זה מוצג בתיבה Value.
  3. לחץ על סמל הברק שליד התיבה Select Value Equal To ובחר ערכת רשומות שכוללת ערכים מסומנים אפשריים ללחצני האפשרויות בקבוצה.

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

  4. לחץ על OK.

הגדרת אפשרויות בתיבת הדו-שיח Dynamic Radio Group ‏(ColdFusion)

  1. בחר בקבוצת לחצני אפשרויות ובטופס מהתפריט הנפתח Radio Group.
  2. לחץ על סמל הברק שליד התיבה Select Value Equal To.
  3. בחר הגדרות בתיבת הדו-שיח Dynamic Data ולחץ של OK:

      א. בחר מקור נתונים מרשימת מקורות הנתונים.

      ב. ‏(אופציונלי) בחר תבנית נתונים עבור הטקסט.

      ג. ‏‏(אופציונלי) שנה את הקוד ש-Dreamweaver מוסיף לדף להצגת הטקסט הדינמי.

  4. לחץ על OK לסגירת תיבת הדו-שיח Dynamic Radio Group, והוסף את מציין מיקום התוכן הדינמי בקבוצת לחצני האפשרויות.

אימות נתוני טופס HTML

Dreamweaver יכול להוסיף קוד JavaScript אשר בודק את התוכן של שדות טקסט מסוימים כדי לוודא שהמשתמש הזין את סוג הנתונים הנכון.

ניתן להשתמש ברכיבי Widget של טופסי Spry לבניית טפסים ולאימות תוכן של רכיבי טופס מסוימים. למידע נוסף, עיין בנושאים הקשורים ל-Spry הרשומים למטה.

ב-Dreamweaver ניתן גם לבנות טופסי ColdFusion המאמתים את התוכן של שדות מסוימים. למידע נוסף, עיין בפרק ColdFusion שרשום למטה.

  1. צור טופס HTML שכולל לפחות שדה טקסט אחד ולחצן Submit אחד.

    ודא שלכל שדה טקסט שברצונך לאמת יש שם ייחודי.

  2. בחר בלחצן Submit.
  3. בחלונית Behaviors ‏(Window >‏ Behaviors), לחץ על לחצן הפלוס (+) ובחר בהתנהגות Validate Form מהרשימה.
  4. הגדר כללי אימות לכל אחד משדות הטקסט ולחץ על OK.

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

    הערה:

    ההתנהגות Validate Form זמינה רק אם שדה טקסט נוסף למסמך.

צירוף התנהגויות JavaScript לאובייקטי טופס HTML

ניתן לצרף התנהגויות JavaScript השמורות ב-Dreamweaver לאובייקטי טופס HTML, כגון לחצנים.

  1. בחר באובייקט טופס HTML.
  2. בחלונית Behaviors ‏(Window >‏ Behaviors), לחץ על לחצן הפלוס (+) ובחר התנהגות מהרשימה.

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

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

  1. בחר לחצן Submit בטופס.
  2. בחלונית Behaviors ‏(Window >‏ Behaviors), לחץ על לחצן הפלוס (+) ובחר בהתנהגות Call JavaScript מהרשימה.
  3. בתיבה Call JavaScript, הזן את שם תכונת JavaScript שברצונך להפעיל כשהמשתמש לוחץ על הלחצן ולחץ על OK.

    לדוגמה, ניתן להזין שם של תכונה שעדיין אינה קיימת, כגון processMyForm()‎.

  4. אם תכונת JavaScript עדיין אינה קיימת באזור head של המסמך, הוסף אותה כעת.

    לדוגמה, ניתן להגדיר את תכונת JavaScript הבאה באזור head של המסמך להצגת הודעה כשהמשתמש לוחץ על הלחצן Submit:

    function processMyForm(){ 
        alert('Thanks for your order!'); 
    }

יצירת טופסי HTML נגישים

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

הוספת אובייקטי טופס נגישים

  1. בעת הוספת אובייקטי טופס נגישים בפעם הראשונה, הפעל את תיבת הדו-שיח Accessibility לאובייקטי טופס (ראה מיטוב מרחב העבודה עבור פיתוח חזותי).

    צעד זה הוא חד פעמי.

  2. במסמך, הצב את נקודת ההכנסה במקום שברצונך להציג בו את אובייקט הטופס.
  3. בחר בפקודה Insert >‏ Form ובחר באובייקט הטופס שברצונך להוסיף.

    תיבת הדו-שיח Input Tag Accessibility Attributes מופיעה.

  4. בחר הגדרות בתיבת הדו-שיח ולחץ על OK. להלן רשימה חלקית של אפשרויות:

    הערה:

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

    ID

    הקצה מזהה לשדה הטופס. ניתן להשתמש בערך זה לצורך הפניה לשדה מקוד JavaScript. בנוסף, הוא משמש כערך של התכונה for בעת בחירה באפשרות Attach Label Tag Using For מאפשרויות Style.

    Wrap With Label Tag

    גלישה של תג תווית סביב פריט הטופס, באופן הבא:

    <label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton1</label>

    Attach Label Tag Using For

    שימוש בתכונה for לגלישה של תג תווית סביב פריט הטופס, באופן הבא:

    <input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label>

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

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

    No Label Tag

    ללא שימוש בתג תווית, באופן הבא:

    <input type="radio" name="radiobutton" value="radiobutton"> RadioButton3

    Access Key

    שימוש במקש מתאים במקלדת (אות בודדה) ובמקש Alt ‏(Windows) או מקש Control ‏(Macintosh) כדי לבחור את אובייקט הטופס בדפדפן. לדוגמה, בעת הזנת B כ-Access Key, משתמשים בעלי דפדפן Macintosh יוכלו להקליד Control+B לבחירת אובייקט הטופס.

    Tab Index

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

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

  5. לחץ על Yes להוספת תג טופס.

    אובייקט הטופס מופיע במסמך.

    הערה:

    אם תלחץ על Cancel, אובייקט הטופס יופיע במסמך, אך Dreamweaver לא ישייך לו תכונות או תגי נגישות.

עריכת ערכי נגישות לאובייקט טופס

  1. בחר באובייקט בחלון Document.
  2. בצע אחת מהפעולות הבאות:
    • בתצוגת Code, ערוך את התכונות המתאימות.

    • לחץ לחיצה ימנית ‏(Windows) או הקש Control תוך כדי לחיצה (Macintosh), ולאחר מכן בחר Edit Tag.

עבודה זו בוצעה ברישיון של Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  הודעות המתפרסמות ב- Twitter™‎ ו- Facebook אינן מכוסות בתנאי Creative Commons.

הצהרות משפטיות   |   מדיניות פרטיות מקוונת