דף הבית -> דף פירוט מדריכים
-> צורות כאלמנטים של עיצוב
 

צורות כאלמנטים של עיצוב

    הצורה הבסיסית    תפריט ההורדה    תפריט הגלילה    קופסת בחירה    כפתור רדיו    כפתורי ה"אישור" ו"איפוס"    שדה הטקסט

מאת ג'ון כהן
לפני שהייתה ג'אוה, לפני שהיה ג'אוה סקריפט, לפני שהיה שוקווייב(Shockwave) או
פיוטור-ספלאש (FuturSplash) או פריימס (Frames) - לפני שהיו אפילו טבלאות - היו כלים
בנויים לתוך הHTML שאפשרו לך להוסיף אינטראקטיביות, לסדר טקסט בשכבות, ובאופן
כללי, להבדיל את האתר שלך ממגזין שקשה לקרוא אותו.
ידועים כצורות, הם התפתחו כשיטה אחידה לאיסוף מידע מ- ועל הגולש ברשת. אבל, למי
אכפת מה הן אמורות לעשות? כשאני מסתכלת על תפריטי הורדה, אני רואה סרגלי צד
מוסווים היטב; כפתורי דיו וקופסאות לחיצה הפכו לאמצעים חיוניים.

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


אתה לא צריך מהנדסים. אתה יכול להוסיף את כל ה- ו -ו -
שאתה רוצה. כל מה שאתה צריך זה כמה תוויות HTML טובות.

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

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

יש אולי תריסר סוגים שונים של צורות, אבל לכולן יש כמה דברים במשותף:
1. כל הצורות מתחילות בתווית <form>. ונגמרות ב<form/>.
2. בכל פעם שאתה מציג תווית <form>. חדשה, הדפדפן יוצר פסקה חדשה. כך שאם אתה רוצה
תפריט הורדה או כפתור רדיו באמצע המשפט, תוודא ששמת את הform בתחילת הפסקה,
ולא בתוכה.
3. אתה יכול לשים מספר צורות שונות בין זוג תוויות form. תחילתי וסופי, כמו בסנדוויץ',
כך שאין צורך להתחיל מחדש בכל פעם כשאתה מוסיף עוד צורה.
4. בכדי שהצורה תהיה פונקציונאלית, אתה צריך להוסיף סקריפט CGI.
בכדי לשמור על השיעור הזה ממוקד, אני לא הולכת אפילו להתחיל עם זה. אבל אתה יכול-
בדוק את המאמר של גיי . בכדי ללמוד יותר על הקונספט הבסיסי, וקרא את המאמר של טים
בכדי לדעת איך לבצע סקריפט.
יש ארבע תוויות בסיסיות שמתחילות להבדיל בין הצורות השונות:
<select> יוצרת תפריטים, מהם הגולש יכול לבחור אייטם אחד או יותר.
<option> מאתחלת כל בחירת תפריט ועובדת רק עם <select>.
<input> יוצרת צורות שאוספות מידע פשוט - כמו כפתורי רדיו וקופסאות לחיצה (כל
כפתור מקבל תווית משלו).
<textarea> יוצר שדות קלט בעלי שורות טקסט רבות.


ראש העמוד עמוד ההפניות תחילת הפיסקה



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

<form>
<select>
<option>Things I wish I'd known:
<option>Running out of oil is very, very bad.
<option>Bikinis and waterskiing don't mix.
<option>The screen door was closed.
</select>
</form>

שיופיע כך:


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

<form>
<select>
<option>More things I wish I'd known:
<option>____________________
<option>Peach yogurt and
<option>mayonnaise look
<option>a lot alike.
<option>____________________
<option>Before taking a big,
<option>honkin' bite out of
. . .
</select>
</form>

ויצא כך:


כמו תמיד, אתה צריך לסיים את מה שהתחלת: כל תפריט הורדה צריך להסתיים עם תוויות
ה<select/> וה-<form/>.

תפריט הגלילה
כמו עם כל הצורות, תפריט הגלילה מתחיל עם תווית ה <form>. אחר כך בא<select multiple
size=x> , בו x הוא מספר האופציות (שורות) שאתה רוצה שיופיעו בבת אחת. (תפריט
ההורדה, כמו שזכור לך, נוצר על ידי select ללא תכונת multiple)
תווית ה- <select> מלווה בסדרת תוויות <option>, שקובעות כל עצם בתפריט. כמו בתפריט
ההורדה, אתה יכול ליצור את האשליה של פסקה עקבית בתוך תפריט גלילה, כל עוד שאתה
מוסיף את קביעת הסוף של השורות בעצמך, ומתחיל כל שורה בתווית <option>.
הגישה הזו הופכת את תפריט הגלילה למשהו כמו מסגרת מאמצת - מקום לשים בו סרגלי צד
או סטיות מהנושא שלא מתאימות לשום מקום אחר...
הHTML לתפריט הגלילה יכול להראות כך:

<form>
<select multiple size=6
<option> adventurous
<option> bitter
<option> cerebral
<option> desperate
<option> emotional
<option> flirty
<option> historical
<option> irreverent
</form>

והתוצאה תראה מוכרת:


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


ראש העמוד עמוד ההפניות תחילת הפיסקה



קופסת בחירה
יצירת קופסת בחירה זה קלי קלות. כל מה שצריך לעשות זה לשים תווית <form> סטנדרטית,
ואחריה <"checkbox"=input type> וכרגיל לסיים הכל ב<form/>.
זכור לשים אחרי כל קופסת בחירה סוג מסוים של טקסט (או תמונה) המסביר למה היא
משמשת, ולהכניס סוף שורה או תווית פסקה בין האופציות.
הHTML יראה כמו משהו כזה:

<form>
<h3>Wednesday</h3>
<input type="checkbox">Make coffee<br>
<input type="checkbox">Spill coffee<br>
<input type="checkbox">Outlaw smiling. Arrest Wendy.<br>
<input type="checkbox">Start rumors about Kristin<br>
<input type="checkbox">Talk about Matt with Matt<br>
<input type="checkbox">Look over Luke's shoulder. Ooh. Aah<br>
</form>

ויראה על הדף ככה:

Wednesday

Make coffee
Spill coffee
.Outlaw smiling. Arrest Wendy
Start rumors about Kristin
Talk about Matt with Matt
.Look over Luke's shoulder. Ooh. Aah

אם אתה רוצה שהקופסה תופיע עם סימן הבחירה כבר בתוכה, פשוט תוסיף checked בתווית
ה- input. ככה:

<form>
<input type="checkbox" checked>Checked checkbox? Check.
</form>

זה יראה ממש כמו שקופסת בחירה לחוצה צריכה להראות:

.Checked checkbox? Check

כפתור רדיו
כפתורי רדיו - ולא, אני לא יודעת למה קוראים להם כפתורי רדיו, פשוט ככה זה, בסדר? -
קלים מאוד ללימוד. השאלה היא אם אי פעם באמת ייצא לכם להשתמש בהם. כלומר למה
שתרצו להחזיר את הגולשים שלכם לתקופת המבחנים האמריקאים ועפרונות מס' 2 ?
בכדי ליצור כפתור רדיו, שים אחרי תווית ה <form> תווית <"radio"=input type> , ותסיים
ב<form/>. בטח תרצה לשים אחרי כל כפתור טקסט שמסביר למה הוא משמש, וגם להוסיף
סוף שורה או תווית פסקה בין האופציות...
הנה HTML :

<form>
<h3>Do you find yourself regularly stressed out about cross-platform incompatibility?
<input type="radio">.......... Yes<br>
<input type="radio">.......... No<br>
</h3></form>

וזה יראה כך על העמוד:

?Do you find yourself regularly stressed out about cross-platform incompatibility

Yes ..........
No ..........

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

<form>
<h3>The grooviest Webmonkey is :
<input type="radio" checked>June<br>
<input type="radio">Kristin<br>
<input type="radio">Luke<br>
<input type="radio">Matt<br>
<input type="radio">Wendy<br>
</h3></form>

ועל הדף זה ייצא לטובתך:

:The grooviest Webmonkey is

June
Kristin
Luke
Matt
Wendy


ראש העמוד עמוד ההפניות תחילת הפיסקה



כפתורי ה"אישור" ו"איפוס"
כפתורים אלו הם הקלים ביותר. קודם כל, למטרות שלנו, הם דומים בדיוק - חוץ מהמילה
שמופיעה עליהם. שנית, אתה לא מוגבל לרשום "אישור" או "איפוס", אתה יכול לכתוב מה
שבא לך.
ככה זה עובד. פשוט אחרי תווית ה <form>, שים <"submit"=input type> או <"reset"=input
type> . זה לא ממש משנה באיזה מהם תבחר, כי אנחנו הולכים לשנות את המילה בכל אופן.
בצורה הבאה:
בתוך תווית ה input יש לכלול "!leggo my Eggo"=value ", אבל תחליף את מה שאני כתבתי
במה שאתה רוצה שיופיע על הכפתור.
כך שהHTML יכול להראות כך:

<form>
<"input type="submit" value="Don't go there, man.>
</form>

ועל הדף יראה כך:

עכשיו, אם אתה לא צריך שהכפתור יעשה משהו, זה כל מה שאתה צריך לדעת. אבל אם אתה
משתמש בצורות למטרה מסוימת, יש עוד טריק שיכול לעזור - החלפת הכפתורים
הסטנדרטיים בתמונה בעיצוב שלך (אם זאת יד מצביעה, מטרה, או מה שתרצה).
שום דבר מסובך, אבל התווית נראית אחרת. תחליף את <"submit"=input type> ב
<"image"=input type>, ואחרי זה תכניס "stuff/smellycat.gif=src" (איפה ש
stuff/smellycat.gif הוא הנתיב לתמונה שלך). אתה גם יכול לשים את התמונה במקביל לשורת
הטקסט על ידי הוספת align=center(או top, או bottom).
בסוף זה יראה בערך כך:

<form>
<input type="image" border=0 src="stuff/smellycat.gif" align=center>
</form>

שיראה כך על הדף:

שדה הטקסט
שדות טקסט הם הדרך להשתמש בצורה לשאלות פתוחות. הם מאפשרים לגולש להכניס
אינפורמציה במילים שלו, והם מגיעים בשתי צורות, מכוונים לתשובות קצרות או ארוכות.
שדה הטקסט הבסיסי - מוכר מאוד לאנשי מנועי החיפוש - מאפשר הכנסת שורה אחת עיי
הגולש. פשטות המראה תואמת גם ה-HTML. פשוט שים, אחרי תווית ה <form> את
<"text"=input type> וסיים ב <form/>.
אתה יכול להוסיף אתsize=x ,האופציונלי, המאפשר לך לקבוע את אורך המקום הניתן
(בתווים); אחרת הדפדפן ישתמש בברירת המחדל שלו - מה שבאופן קבוע אומר מימדים הכי
קשים לקריאה ומעצבנים.
הHTML לאזורי הטקסט הקטנים האלו יראה בערך כך:

<form>
Do you ever find yourself finishing your partner's sentences ?
That's really<input type="text" size=15>, don't you think?
</form>

ועל הדף:

?Do you ever find yourself finishing your partner's sentences
?That's really, don't you think

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

<form>
Matt is <input type="text" size=5 value="crazy">
</form>

וכך זה יראה על הדף

Matt is

אבל האמת היא, הרשת מלאה באנשים מלאים בעצמם, והתבטאות קטנה על הדף לא הולכת
לעשות להם את זה.
בכדי ליצור שדות טקסט גדולים יותר, תצטרך לעשות משהו קצת שונה. אחרי תווית ה
<form>, תכניס תווית שנראית כך <textarea cols=x rows=y>. כמו תמיד, יש לסיים את מה
שהתחלת - אל תשכח להוסיף <textarea/> ו <form/>.
תכונת ה clos שולטת על רוחב אזור הטקסט. השם קצת מטעה. הוא מתייחס למספר התווים
(לא טורים ממש) שמופיעים בכל זמן נתון. לעומת זאת תכונת ה rows שולטת בגובה אזור
הטקסט, כמו שנמדד במספר השורות המופיעות לפני שצריך לגלול.
הHTML לאזור טקסט יכול להראות כך:

<form>
<textarea cols=25 rows=6>
</textarea>
</form>

וכך זה יראה על הדף:

לא להכביד יותר מדי, אבל אולי תרצה להוסיף גם תכונת wrap. זה מאפשר לטקסט להיכנס
לתוך אזור הטקסט, כך שהגולשים לא יצטרכו לגלול לימין או ללחוץ על return בעודם
כותבים.
הנה שלוש אפשרויות wrap:
Wrap=physical שם את הטקסט בתוך שדה הקלט ושולח אותו לשרת כמו שהוא מופיע על
המסך. אלא אם כן אתה מוסיף סקריפט של CGI, זה לא משנה אם אתה משתמש בזה או ב
wrap=virtual.
Wrap=virtual יוצר מראה של טקסט תחום, אבל שולח את הקלט לשרת כאילו שהכל רשום
בשורה אחת ארוכה.
Wrap=off אותו דבר כמו לא לשים שום wrap בכלל... אני בכלל לא בטוחה למה לטרוח עם
זה.


ראש העמוד עמוד ההפניות תחילת הפיסקה