טפסים
טופס מאפשר לכם לקבל מידע מהמשתמש, ולעבד אותו לצרכים שלכם. את הטופס עצמו ניתן ליצור בקלות ב-html, אבל בשביל עיבוד הנתונים צריך להשתמש בשפת צד-שרת, כדוגמת asp או php. אפשר ללמוד איך עושים את זה לבד, או לקחת סקריפטים מוכנים מראש, שאפשר למצוא בחינם או בתשלום באינטרנט.בינתיים נתרכז בצד של ה-html. קודם כל צריך להגדיר את אזור הטופס, בצורה הבאה:
</form>
הגדרנו כאן שכל מה שבין תגי ה-form ייחשב חלק מהטופס. בנוסף, אפשר לתת שם לטופס (name=" "), להגדיר איזה קובץ יטפל בנתונים כשנלחץ על כפתור ה"שלח" (action=" "), ובאיזו צורה זה יקרה (method=" "). אם וכאשר תתעסקו בקוד שמאחורי הקלעים, תבינו יותר לעומק מה כותבים ב-method.
בין תגי ה-form נכניס את אפשרויות הקלט המתאימות לנו - תיבות טקסט, תיבות בחירה וכו'. חוץ משתי אפשרויות קלט, כולן יהיו בתוך תג <input> (אין צורך בתג סוגר).
text
<input type="text" name=" " size=" " maxlength=" ">התג הזה מאפשר לנו לקבל טקסט קצר (כמו שם או אימייל), בכתיבה חופשית. המאפיינים:
type="text" - את זה לא משנים, כי זה מה שאומר למחשב מה סוג אזור הקלט שהוא צריך להציג.
name=" " - אם הטופס הוא לא רק לקישוט, צריך לתת שם לכל אזור קלט, כדי שנוכל להתייחס אליו בשלב מאוחר יותר ולהשתמש במידע שהוזן בו. זה נכון בכל סוגי אזורי הקלט.
size=" " - אורך תיבת הטקסט.
maxlength=" " - האורך המקסימלי של טקסט שניתן להזין (בתווים).
הקוד הבא, למשל, ייתן לנו תיבה קטנה להזנת טקסט:
טלפון:
checkbox
<input type="checkbox" name=" " value=" ">התג הזה יוצר לנו קופסית קטנה, לסימון של אפשרות אחת או יותר (להבדיל מ-radio button שמאפשר סימון של אפשרות אחת בלבד). המאפיינים:
type="checkbox" - את זה לא משנים, כי זה מה שאומר למחשב מה סוג אזור הקלט שהוא צריך להציג.
name=" " - כנ"ל, וגם: לכל האפשרויות השייכות לאותה קטגוריה ניתן את אותו שם. אם למשל אני רוצה לשאול את הגולשים איזה סרטים הם אוהבים, ולתת להם את האפשרויות של דרמה, קומדיה, אקשן ואימה, אני אתן לכל אחת מן האפשרויות האלה את השם (name) "film". ההבדל בין האפשרויות יהיה ב-value.
value=" " - כיוון ש-checkbox משמש לבחירה מתוך אפשרויות, לכל אפשרות צריך להיות ייחוד שיאפשר לנו, בתור בעלי האתר, לזהות אותה. הייחוד יתבטא כאן. אם נמשיך עם הדוגמה של הסרטים, ה-value של דרמה יהיה למשל drama, של קומדיה comedy וכו'.
הנה הדוגמה של הסרטים:
<input type="checkbox" name="film" value="comedy"> קומדיה<br>
<input type="checkbox" name="film" value="action"> אקשן<br>
<input type="checkbox" name="film" value="horror"> אימה<br>
שימו לב שצריך לכתוב ליד כל קופסית מה היא, כי אחרת לגולשים אין דרך לדעת.
דרמה
קומדיה
אקשן
אימה
radio
<input type="radio" name=" " value=" ">תג ה-radio יוצר לנו עיגולים קטנים שניתן לבחור רק אחד מתוכם (להבדיל מה-checkbox שמאפשר לבחור כמה אפשרויות). מאפייניו:
type="radio" - את זה לא משנים, כי זה מה שאומר למחשב מה סוג אזור הקלט שהוא צריך להציג.
name=" " - אותו הדבר כמו ב-checkbox.
value=" " - אותו הדבר כמו ב-checkbox.
הנה שוב הדוגמה של הסרטים, רק הפעם עם אפשרות לבחור רק סוג אחד של סרטים:
<input type="radio" name="film" value="comedy"> קומדיה<br>
<input type="radio" name="film" value="action"> אקשן<br>
<input type="radio" name="film" value="horror"> אימה<br>
שימו לב שצריך לכתוב ליד כל קופסית מה היא, כי אחרת לגולשים אין דרך לדעת.
דרמה
קומדיה
אקשן
אימה
submit
<input type="submit" value=" ">יוצר את כפתור ה"שלח".
type="submit" - את זה לא משנים, כי זה מה שאומר למחשב מה סוג אזור הקלט שהוא צריך להציג.
value=" " - אם רוצים לשנות את מה שכתוב על הכפתור, זה המקום.
הנה כפתור "שלח" עם כיתוב משלי:
reset
<input type="reset" value=" ">יוצר כפתור "נקה טופס".
type="reset" - את זה לא משנים, כי זה מה שאומר למחשב מה סוג אזור הקלט שהוא צריך להציג.
value=" " - אם רוצים לשנות את מה שכתוב על הכפתור, זה המקום.
דוגמה לכפתור "נקה":
textarea
<textarea name=" " rows=" " cols=" "></textarea>אזור הקלט הזה הוא כבר לא מסוג input, וכן צריך תג סוגר. התגים האלה ייצרו לנו תיבה גדולה יותר להזנת כמות גדולה יותר של טקסט. בין שני התגים ניתן לכתוב טקסט שאנחנו רוצים שיופיע בתיבה לפני שהגולש כותב בה.
name=" " - כנ"ל.
rows=" " - גודל התיבה - כמה שורות?
cols=" " - גודל התיבה - עמה עמודות?
ולדוגמה:
select
אחרון חביב, התפריט הנפתח.התפריט מוגדר בין תגי <select name=" "></select>, כאשר כל אפשרות בתפריט נפתחת בתג <option>. אפשר להוסיף את המילה selected לאחת ה-options כדי שהאפשרות הזאת תופיע כשהדף עולה.
<option selected> דרמה
<option> קומדיה
<option> אקשן
<option> אימה
</select>