טפסים
 הסברים | תצוגה בסיסית
 
 :אלמנטי קלט 
 שליחת הטופס | כפתורים | תיבת טקסט | מחיקת הטופס | תיבת בחירה 
 תיבות סימון | כפתורי רדיו | תיבת סיסמה | איזור טקסט | תיבת קובץ | אלמנט מוסתר












 
הסברים
 
 .טפסים נועדו לתקשר עם הגולש ולקבל ממנו פרטים באמצעות אלמנטי קלט רבים
  אינה מאפשרת את שליחת הנתונים למסד נתונים, או לאימייל, בשביל זה נאלץ לרכוש ידע html השפה 
  . ASP או PHP בשפות נוספות כמו
 .ולהוסיף סקריפטים שימושיים רבים לאתר JavaScript,VisualBasic בנוסף, ניתן ללמוד שפות כמו
 .HTML בכל אופן, שליחת טופס מחייבת ידיעת השפה
 
  
תצוגת טופס בסיסית

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

FORM מאפיינים לתגית
מגדיר באיזו שיטה יישלח הטופס - method="get או post"
מגדיר את צבע גבול הטבלה - action="כתובת קובץ שליחת הטופס"

שליחת הטופס

:שליחת הטופס תינתן או ע"י כפתור יעודי לשליחה שנראה כך

:או ע"י תמונה שלדוגמה תיראה כך


:כדי להציג כפתור שליחה נכתוב כך
<input type="submit" value="שלח">

:וכדי להציג תמונה שתשלח את הטופש נרשום כך
<input type="image" src="https://www.tab4u.com/search.gif">


כפתורים

ע"י כפתור נוכל לבצע פעולות מסוימות בלחיצה מהמשתמש
:כדי להציג כפתור כזה


:נכתוב כך
<input type="button" value="לחץ עליי">

מגדיר שם לכפתור כדי שנוכל לפנות אליו - name="טקסט"
מגדיר את הערך שיוצג בכפתור - value="טקסט"

כמובן שיש לשים את הכפתור בתוך תגית הפורום

.onclick"פעולה" בכדי שהכפתור יעשה משהו נאלץ להשתמש בשפה נוספת ונכתוב
onclick="javascript:aler()" לדוגמה כפתור שמפעיל פונקציה ע"י הוספת
:דוגמה







תיבת טקסט

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


:נכתוב ככה
<input type="text" size="9" value="תיבת טקסט" name="bla" maxlength="6">

מגדיר שם לתיבה כדי שנוכל לפנות אליה - name="טקסט"
מגדיר את הערך שיוצג בתיבה - value="טקסט"
(מגדיר את מספר התווים של התיבה (גודלה - size="מספר"
מגדיר את מספר התוים המקסימלי שנוכל לרשום בתיבה - maxlength="טקסט"

:בכדי להציג תיבת טקסט שהטקסט שנשים בה יעלם בלחיצה

:נרשום כך
<form name="a">
<input type="text" value="לחץ עליי ואני אעלם" name="b" onclick="javascript:dis()">
</form>
<script language="javascript">function dis(){document.a.b.value=""}</script>

מחיקת הטופס

ולהחזירו למצב החדש שלו form ניתן להוסיף לכל טופס לחצן המוחק את כל מה שנצא בתוך התגית 
:לדוגמה רשמו משהו ומחקו





:זאת נרשום כך
<form>
<input type="text" size="9" value="">
<input type="reset" value="מחק">
</form>

שימו לב שרק מה שבתוך תגית הפורום ימחק

תיבת בחירה

.תיבת בחירה מאפשרת למשתמש לבחור אפשרות מן האפשרויות שנציב לו והיא מורכבת משני תגיות
<select></select> ו <option>

היא תגית סגורה והיא מגדירה תיבת בחירה select תגית
היא תגית פתוחה והיא מגדירה אופציה בתיבת הבחירה option תגית


כדורסל
בייסבול
כדורגל


:נכתוב זאת כך
<select size="1" align="center">
<option selected value="basketball">כדורסל
<option value="basball">בייסבול
<option value="football">כדורגל
</select>

select מאפייני תיבת
מגדיר שם לתיבה כדי שנוכל לפנות אליה - name="טקסט"
מגדיר את מספר השורות שיוצגו, אם נציב 1 אז יוצג לחצן "למטה" שנוכל להסתכל על כלל האפשרויות - size="מספר"
מגדיר את היישור של הטקסט בתוך התיבה - align="מיקום"
נותן אפשרות לבחור יותר מאפשרות אחת - multiple

 value="" - שימו לב ! הערך שיישלח לטופס הינו הערך שבתוך מאפיין ה
 ! ! ! ולא מה שנציג למשתמש
 
option מאפייני אפשרות
 מגדיר האפשרות בחורה בברירת מחדל - selected
מגדיר את הערך שישלח בטופס - value="טקסט"
מגדיר את הערך שישלח בטופס כשהאפשרות הזו תיבחר- value="טקסט"
 
תיבות סימון

(ע"י תיבה זו נוכל לתת למשתמש אפשרות לסמן התיבה ואפשרות לא לסמן (שני מצבים



:נרשום זאת כך
<input type="checkbox" checked>
<input type="checkbox">

מגדיר את שם התיבה - name="טקסט"
מגדיר תיבה בחורה בברירת מחדל - checked

מה שמבדיל את תיבת הסימון מכפתורי רדיו היא האפשרות לסמן כל אחד בנפרד


כפתורי רדיו

מה שמאפיין כפתורי רדיו הוא שתמיד רק אחד יכול להיות בחור, והערך שיישלח לטופס
value הוא הערך שבמאפיין ה

:לדוגמה

ספורט
אהבה


:נרשום זאת כך
<form>
<input type="radio" value="sport" checked>ספורט
<input type="radio" value="love">אהבה
</form>

מגדיר את שם הכפתור - name="טקסט"
מגדיר את הערך שישלח לטופס - value="טקסט"
מגדיר כפתור בחור בברירת מחדל - checked

תיבת סיסמה

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


:נכתוב כך
<input type="password" size="8">

מגדיר את שם התיבה - name="טקסט"
(מגדיר את מספר התווים של התיבה (גודלה - size="מספר"
מגדיר את מספר התוים המקסימלי שנוכל לרשום בתיבה - maxlength="טקסט"

איזור טקסט

איזור טקסט הוא תגית סגורה שמה שמוכל בתוכה זהו הטקסט שיוצג והוא יוצג כמו שהוא במסמך
:כך שכל רווח וירידת שורה במסמך תוצג גם באיזור טקסט
שלום רב 

מה קורה


:נרשום כך
<textarea rows="5" cols="10">שלום רב 

מה קורה
</textarea>

מגדיר את שם האיזור טקסט - name="טקסט"
מגדיר את מספר העמודות של תווים שיוצגו  - cols="מספר"
מגדיר את מספר השורות של תווים שיוצגו - rows="מספר"
 מגדיר אם תהיה גלישת טקסט - warp="soft/hard/off"
hard = גם בתצוגה וגם בשליחת הנתונים הטקסט יגלוש
soft = בתצוגה תהיה גלישת טקסט ובשליחת הנתונים לא תהיה
off = לא תהיה גלישת טקסט
 מגדיר אם יהיה ניתן לערוך את הטקסט - contenteditable="false/true/inherit"
inherit = ניתן יהיה לערוך אבל מה שישלח זה מה שמוגדר בברירת המחדל שלו
false = לא ניתן לערוך הטקסט
true = ניתן לערוך הטקסט

תיבת קובץ

אפשרות זו מאפשרת להעלות קובץ דרך טופס 


<input type="file">

מגדיר שם - name="טקסט"

.שימו לב ! לשליחת הקובץ יש להוסיף לחצן לשליחת הטופס

אלמנט מוסתר

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

נרשום
<input type="hidden">


חזרה למעלה




חזרה ל מדריך html ל לימוד html