מדריכים לבניית אתרים

טפסים חלק א'

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

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

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

ככה זה נראה:

			<form action="test.html" method="POST">
				*הטופס יבוא כאן*
			</form>

לטופס אנחנו מכניסים 2 אלמנטים עיקריים:

- method זה האופן שבו המידע ישלח, יש שני אופנים עיקריים: post (כרגע בשימוש שלנו) וגם get עליהם נרחיב מאוחר יותר.

- action אומר לטופס לאן לשלוח את המידע שלנו, המשתמש הכניס מידע ועכשיו צריך לשלוח אותו אל test.html

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

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

			<form action="test.html" method="POST">
				שם משתמש: <input type="text" name="username" /> <br />
				סיסמא: <input type="password" name="pass" />
			</form>

בשורה הראשונה היא כמו הדוגמא מקודם ולא שונתה, אחר כך אנחנו יוצרים תג input ראשון ולו הצמדנו 2 אלמנטים שונים:

type - זה סוג הקלט שיתקבל מהמשתמש, יש סוגי קלטים שונים כאן השתמשנו ב-text רגיל וב-password (שזה אומר שהתוכן שיוקלד לשדה יהיה כוכביםעיגולים כי זה סיסמא).

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

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

כפתור "רדיו"

			<form action="test.html" method="POST">
				זכרנקבה?<br />
				<input type="radio" name="sex" value="male" /> זכר<br />
				<input type="radio" name="sex" value="female" /> נקבה
			</form>

אתם יכולים לראות שה-type הוא לא טקסט או סיסמא כמו הקודמים אלא "radio" אבל עכשיו, ושימו לב טוב ה-name של שני השדות זהים! שניהם על "sex". אבל מה ששונה פה הוא ה"value" אחד יהיה "male" זאת אומרת זכר ואחד "female" זאת אומרת נקבה. המשתמש יוכל לסמן רק אחד משני העיגולים האלו - זכר או נקבה. והערך של מה שהוא יסמן ישלח.

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

תיבת סימון

			<form action="test.html" method="POST">
				סמן סדרות אהובות:<br />
				<input type="checkbox" name="tv" value="bigbrother" /> האח הגדול<br />
				<input type="checkbox" name="tv" value="survival" /> הישרדות<br />
				<input type="checkbox" name="tv" value="1vs100" /> אחד נגד מאה
			</form>

תיבת הסימון מאפשרת לנו דברים רבים, זו רק דוגמא אחת. כאן ביקשתי ממכם לסמן סדרות אהובות. בניגוד לכפתור הרדיו אפשר לסמן כאן יותר מאפשרות אחת אבל בדומה לכפתור הרדיו ה"name" של כל התיבות סימון זהה והוא "tv". ה-type שלנו הוא checkbox והערך "value" משתנה מאפשרות לאפשרות אח גדול, הישרדות, אחד נגד מאה.

מלבד זאת אפשר להוסיף עוד 2 אלמנטים שונים של checked (מסומן כברירת מחדל) ושל disabled (לא יהיה אפשר ללחוץ על האפשרות הזו), תנסו בעצמכם להוסיף את שני האלמנטים האלו בצורה הבאה:

checked="checked"
disabled="disabled"

ותשחקו אם זה, את שני האלמנטים האלו אתם יכולים להוסיף איפה שתרצו אחרי המילה input ולפני הסוגר של הקלט </

זהו לחלק הראשון של מדריך הטפסים ב-HTML, בהמשך אנחנו נלמד על שדות טקסט <textarea>, אפשרויות <option>, כפתור שליחה submit ועוד!

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

יש בעיה? קושי או שאתם רוצים לשאול שאלה? הכנסו לפורום שלנו תשאלו ואנחנו נשמח לעזור!