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

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

הגדר את מאפייני טופס ה-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 בתיבת הדו-שיח.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ה. בחר את התבנית שברצונך ש-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.

הוסף אובייקט טופס 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.

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

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

• לחץ על סמל הברק שליד התיבה Check If ובחר בשדה מרשימת מקורות הנתונים.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• בתצוגת Code, ערוך את התכונות המתאימות.

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