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

טפסים חלק ב'

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

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

הנה דוגמא לקוד:

			<form action="test.html" method="POST">
				טקסט חופשי עם ירידת שורה:
				<textarea rows="25" cols="40" name="freetext"></textarea>
			</form>

הקוד הזה פשוט ביותר, למי שקרא את חלק א' אז השורה הראשונה מוכרת לכם. השורה העיקרית היא השורה השלישית בקוד שבה אנחנו מתחילים את התג <textarea> מכניסים בו מספר אלמנטים ואז סוגרים ב-</textarea>

האלמנטים שיש לנו הם name שקובע את שם השדה המדובר, cols קובע את הרוחב של השדה ו-rows קובע את הגובה של השדה. בניגוד לאינפוט (input) רגיל כאן המשתמש יכול להכניס טקסט רב יותר וזה נועד למערכת תגובות, פרסום פוסטים, פרסום דיונים בפורומים וכדומה. אפשר להכניס עוד אלמנטים נוספים כמו disabled - ימנע אפשרות של עריכהשינוי.

אפשרויות בחירה

תג מאוד שימושי הוא תג ה-<select> שעובד ביחד עם <option> כדי ליצור רשימה של אפשרויות להציג למשתמש שמתוכן הוא יבחר מה שהכי מתאים לו.

הנה דוגמא לקוד:

			<form action="test.html" method="POST">
				<select name="city">
					<option value="1">נהריה</option>
					<option value="2">תל אביב</option>
					<option value="3">ירושלים</option>
					<option value="4">נס ציונה</option>
				</select>
			</form>

כאן אנחנו מציעים למשתמש לבחור מתוך רשימה של "ערים" City כאשר אנחנו מתחילים את הקוד "רשימה" בעזרת התג <select> שאליו הצמדנו אלמנט של "name" (שם) שלו קראנו "city" (עיר) ובתוך התג הזה הכנסנו 4 תגים של אפשרויות <option> נהריה, תל אביב, ירושלים, נס ציונה ולכל אחד מהם ערכים (value) שונים מ-1 עד 4 כדי שנוכל לזהות מה המשתמש בחר אחר כך.

לכל option אפשר להכניס אלמנטים באים:

value - כמו שאמרנו זה הערך שישלח בטופס באותה מידה אפשר לרשום במקום מספר משהו אחר כמו טקסט

selected - במידה ונרצה שה<option> המסויים שלנו יהיה הברירת מחדל נציב לו את האלמנט הזה

disabled - על מנת לחסום אפשרות מסויימת נציב את האלמנט הזה באחד מתגי ה-option שנבחר.

שליחת הטופס

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

קוד לדוגמא:

			<form action="test.html" method="POST">
				<input type="submit" name="send" value=" שלח טופס ">  
			</form>

בתג input הזה הכנסנו לערך של "type" את המילה "submit" במילים אחרות, הגדרנו שמדובר בכפתור ולא שדה טקסט או סיסמא כמו בדוגמאות של המדריך בחלק א'. קבענו פה שם "send" והערך של ה-value הוא "שלח טופס" שזה מה שיהיה בעצם כתוב על הכפתור. אתם מוזמנים לנסות ולראות שהקוד הזה ידפיס לכם כפתור על הדף עם הערך שתבחרו הפעם "שלח טופס".

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

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