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

עודכן לאחרונה בתאריך 27 באפריל 2021

פתק

התמיכה ברכיבי טופס HTML שופרה בעדכוני Dreamweaver Creative Cloud.לקבלת מידע, ראה תמיכה משופרת ב-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 עבור רכיבי טופס. בנוסף, ארבעה רכיבי טופס חדשים (דואר אלקטרוני, חיפוש, טלפון, URL) הוצגו בקטע Forms של לוח Insert. לקבלת מידע נוסף, ראה תמיכה משופרת ב-HTML5 עבור רכיבי טופס.

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

בחרו הוספה > טופס, או בחרו את קטגוריית הטפסים בלוח ההוספה ולחצו על סמל הטופס.

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

הגדר את מאפייני טופס ה-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 פתיחת מסמך היעד בגוף החלון הנוכחי. ניתן להשתמש בערך זה כדי להבטיח שמסמך היעד ימלא את כל שטח החלון גם אם המסמך המקורי הוצג במסגרת.

הוסף אובייקטי טופס בעמוד:

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

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

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

פתק

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

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

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

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

פתק

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

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

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

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

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

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

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

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

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

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

Char Width

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

Max Chars

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

Num Lines

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

Disabled

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

Read Only

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

סוג

מייעד את השדה כשדה חד-שורי, רב-שורי או שדה סיסמה.

Single-line

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

Multi-line

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

סיסמה

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

Init val

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

Class

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

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

Button Name

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

Value

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

פעולה

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

Submit Form

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

Reset Form

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

None

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

Class

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

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

Checked Value

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

Initial State

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

Dynamic

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

Class

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

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

Checked Value

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

Initial State

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

Dynamic

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

Class

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

אפשרויות Menu

List/Menu

הקצאת שם לתפריט. השם חייב להיות ייחודי.

סוג

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

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

Height

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

Selections

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

List Values

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

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

Dynamic

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

Class

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

Initially Selected

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

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

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

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

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

פתק

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

הוסיפו טופס לדף (Insert > Form).

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

הגדר את שיטת הטופס לאפשרות POST.

בתפריט הנפתח Enctype, בחר באפשרות multipart/form-data.

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

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

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

File Field Name

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

Char Width

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

Max Chars

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

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

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

במסמך, מקמו את נקודת הכניסה בתוך מתאר הטופס.

בחרו Insert > Form > Image Field.

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

בחרו את התמונה עבור הלחצן בתיבת הדו-שיח Select Image Source ולחצו על OK.

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

ImageField

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

Src

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

Alt

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

Align

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

Edit Image

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

Class

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

כדי לצרף התנהגות JavaScript ללחצן, בחרו את התמונה ואז בחרו את ההתנהגות בלוח Behaviors (Window > Behaviors).

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

HiddenField

ציון שם השדה.

Value

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

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

מקמו את נקודת הכניסה בתוך מתאר הטופס.

בחר Insert >‏ Form >‏ Radio Group.

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

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

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

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

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

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

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

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

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

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

מקמו את נקודת הכניסה בתוך מתאר הטופס.

בחר Insert >‏ Form >‏ Checkbox Group.

בחר הגדרות בתיבת הדו-שיח ולחץ על 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, ועליכם להגדיר recordset או מקור אחר של תוכן דינמי עבור התפריט.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בתצוגת Design, בחרו את אובייקט הטופס רשימה/תפריט.

ב-Property inspector, לחץ על הלחצן Dynamic.

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

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

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

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

בחרו את שדה הטקסט בטופס ה-HTML בעמוד שלכם.

במפקח המאפיינים, לחצו על סמל הברק ליד תיבת Init Val כדי להציג את תיבת הדו-שיח Dynamic Data.

בחרו את עמודת ה-recordset שתספק ערך לשדה הטקסט, ואז לחצו על OK.

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

בחרו את שדה הטקסט להפיכה לדינמי מהתפריט הנפתח Text Field.

לחצו על סמל הברק ליד תיבת Set Value To, בחרו מקור נתונים מרשימת מקורות הנתונים, ולחצו על OK.

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

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

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

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

בחר באובייקט טופס מסוג תיבת סימון בדף.

ב-Property inspector, לחץ על הלחצן Dynamic.

בחר הגדרות בתיבת הדו-שיח 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).עליכם גם להגדיר recordset או מקור אחר של תוכן דינמי עבור לחצני הרדיו. באופן אידיאלי, מקור התוכן אמור להכיל נתונים בוליאניים, כמו Yes/No או true/false.

בתצוגת Design, בחרו כפתור רדיו בקבוצת הרדיו.

ב-Property inspector, לחץ על הלחצן Dynamic.

השלימו את תיבת הדו-שיח Dynamic Radio Group, ולחצו על OK.

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

בתפריט הנפתח Radio Button Group, בחרו טופס וקבוצת לחצני רדיו בעמוד.

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

בחרו ערך לבחירה מוקדמת דינמית מרשימת הערכים. ערך זה מוצג בתיבה Value.

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

ה-recordset שבחרתם מכיל ערכים התואמים את הערכים המסומנים של לחצני הבחירה. כדי להציג את הערכים המסומנים של לחצני הבחירה, בחרו כל לחצן בחירה ופתחו את ה-Property inspector שלו (Window > Properties).

לחץ על OK.

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

בחרו קבוצת לחצני בחירה וטופס מתפריט הקופץ Radio Group.

לחצו על סמל ברק ליד התיבה Select Value Equal To.

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

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

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

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

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

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

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

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

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

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

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

בחר את הלחצן Submit.

בלוח Behaviors (Window > Behaviors), לחצו על הלחצן Plus (+) ובחרו את ההתנהגות Validate Form מהרשימה.

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

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

פתק

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

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

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

בחר באובייקט טופס HTML.

בלוח Behaviors (Window > Behaviors), לחצו על הלחצן + ובחרו התנהגות מהרשימה.

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

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

בחר לחצן Submit בטופס.

בלוח התנהגויות (Window > Behaviors), לחצו על לחצן הפלוס (+), ובחרו Call JavaScript מהרשימה.

בתיבה Call JavaScript, הזינו את שם פונקציית ה-JavaScript שתפעל כאשר המשתמש לוחץ על הלחצן, ולחצו על OK.

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

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

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

function processMyForm(){

alert('Thanks for your order!');

}

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

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

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

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

שלב זה הוא חד פעמי.

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

בחרו Insert > Form, ובחרו אובייקט טופס להוספה.

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

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

פתק

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

הקצה מזהה לשדה הטופס. ניתן להשתמש בערך זה לצורך הפניה לשדה מקוד 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 כמפתח גישה, משתמשים עם דפדפן Macintosh יוכלו להקיש Control+B כדי לבחור את אובייקט הטופס.

Tab Index

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

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

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

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

פתק

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

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

בחלון Document, בחר את האובייקט.

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

ערכו את התכונות המתאימות בתצוגת Code.
לחצו לחיצה ימנית (Windows) או Control-לחיצה (Macintosh), ולאחר מכן בחרו Edit Tag.

פריטים דומים נוספים

בניית אתרי אינטרנט יפהפיים ב-Dreamweaver
עיצוב כתיבת קוד וניהול אתרי אינטרנט דינמיים בכלי רב עוצמה כולל.

פתיחת היישום

יצירה והפעלה של טופסי ColdFusion ב-Dreamweaver

תמיכה משופרת ב-HTML5 עבור רכיבי טופס

למידה

למד עם מדריכי וידאו שלב אחר שלב ועם הדרכה מעשית ישירות ביישום.

קהילה

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

דף הבית של Adobe

גשו ליישומים ולשירותים המועדפים עליכם ב-Creative Cloud, לניהול קבצים ועוד.