נסה זאת בעצמך - דוגמאות
שדות טקסט HTML
דוגמה זו ממחישה כיצד ליצור שדה טקסט בדף HTML.משתמש יכול לכתוב טקסט בשדה טקסט.
שדות סיסמה HTML
דוגמה זו ממחיש כיצד ליצור סיסמה בדף HTML.
(אתם יכולים למצוא עוד דוגמאות בתחתית עמוד זה )
תבניות
תבנית זאת איזור שיכול להכיל אלמנטים של תבנית.
אלמנטים של תבנית הם אלמנטים שמאפשרים למשתמש להכניס מידע (כמו שדות טקסט, שדות איזורי טקסט, תפריטים נפתחים, כפתורי רדיו, תיבות סימון, וכו') בתבנית.
תבנית מוגדרת עם <form> תג.
|
<form> . אלמנטים של קלט . </form> |
קלט
תבנית הכי שימושית היא <input> תג. סוג קלט מפורט עם תכונות. הסוגים של הקלטים הנפוצים ביותר מוסברים בהמשך.
שדות טקסט
בשדות טקסט משתמשים כשה אתם רוצים לקבל ממשתמש אותיות, מספרים, וכו, בתבנית.
|
<form> שם פרטי: <input type="text" name="firstname" /> <br /> שם משפחה: <input type="text" name="lastname" /> </form> |
כיצד זה נראה בדפדפן:
שימו לב כי התבנית עצמה אינה גלויה. כמו כן שים לב כי ברוב הדפדפנים, את רוחב של שדה טקסט הוא 20 תווים כברירת מחדל.
כפתורי רדיו
כפתורי רדיו משמשים כאשר אתם רוצים שהמשתמש יבחר אחת מתוך מספר מצומצמת של אפשרויות.
|
<form> <input type="radio" name="sex" value="male" /> גבר <br /> <input type="radio" name="sex" value="female" /> אישה </form> |
כיצד זה נראה בדפדפן:
שים לב, רק אפשרות אחת ניתן לבחור.
תיבות סימון (Checkboxes)
תיבות סימון משמשים כשה אתם רוצים שהמשתמש יבחר אחת או יותר מתוך מספר מצומצמת של אפשרויות.
|
<form> יש לי אופניים: <input type="checkbox" name="vehicle" value="Bike" /> <br /> יש לי רכב: <input type="checkbox" name="vehicle" value="Car" /> <br /> יש לי מטוס: <input type="checkbox" name="vehicle" value="Airplane" /> </form> |
כיצד זה נראה בדפדפן:
תכונות תיבת פעילות וכפתור שלח
כשה משתמש לוחץ על כפתור "שלח" - Submit Button, תוכן של תבנית נשלח לשרת. תכונה של תבנית פעילות מגדירה שם של קובץ לשלוח את התוכן. קובץ מוגדר בתכונת פעילות (action attribute) בדרך כלל מבצע משהו עם קלט שקיבל.
|
<form name="input" action="html_form_submit.asp" method="get"> שם משתמש: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> |
כיצד זה נראה בדפדפן:
אם אתם תקלידו מספר תווים בשדה טקסט למעלה, ותלחצו על כפתור "שלח", דפדפן ישלח קלט שלכם לדף שנקרא "user.php". הדף יציג לכם קלט שהוא קיבל.
יותר דוגמאות
תיבות סימון HTML
דוגמה זו ממחישה כיצד ליצור תיבות סימון (Checkboxes) בדף HTML.משתמש יכול לסמן או לבטל סימון של תיבת סימון (checkbox).
כפתורי רדיו HTML
דוגמה זו ממחישה כיצד ליצור כפתורי רדיו (radio-buttons) בדף HTML.
תיבה נפתחת HTML
דוגמה זו ממחישה כיצד ליצור תיבה פשוטה נפתחת (drop-down box) בדף HTML.תיבה נפתחת היא תיבת לבחירה.
תיבה נפתחת אחרת HTML
דוגמה זו ממחישה כיצד ליצור תיבה נפתחת פשוטה עם ערך נבחר.
איזור טקסט (Textarea)
דוגמה זו ממחישה כיצד ליצור איזור טקסט (איזור טקסט עם מספר שורות קלט).משתמש יכול לכתוב טקסט באיזור טקסט.באיזור טקסט אתם יכולים לכתוב מספר תוים בלתי מוגבל.
יצירת כפתור HTML
דוגמה זו ממחישה כיצד ליצור כפתור.על הכפתור אתם יכולים להגדיר כיתוב משלכם.
גבול מסביב לתבנית HTML
דוגמה זו ממחישה כיצד לצייר גבול עם כיתוב מסביב לנתונים.
דוגמאות עם תבנית(Form)
תבניות עם שדות קלט וכפתור שלח - submit button HTML
דוגמה זו ממחישה כיצד להוסיף תבנית לדף.תבנית מכילה שתי שדות קלט (input fields) וכפתור שלח (submit button).
תבנית עם תבניות סימון - form with checkboxes HTML
תבניות זו מכילה שלושה תבניות סימון (checkboxes), וכפתור שלח (submit button).
תבנית עם כפתורי רדיו - form with radio buttons HTML
תבנית זו מכיל השני כפתורי רדיו (radio buttons), וכפתור שלח (submit button).
שלח אימייל מתוך התבנית HTML
דוגמה זו ממחישה כיצד לשלוח אימייל מתוך התבנית.
תגי תבנית (Form Tags)
| תג | תיאור |
|---|---|
| <form> | מגדיר תבנית לקלט של משתמש |
| <input> | מגדיר שדה קלט |
| <textarea> | מגדיר איזור טקסט – איזור טקסט רב שורות |
| <label> | מגדיר תווית על פקד |
| <fieldset> | מגדיר סט שדות |
| <legend> | מגדיר כיתוב לסט שדות |
| <select> | מגדיר רשימת בחירה , תיבה נפתחת |
| <optgroup> | מגדיר אופציה קבוצות |
| <option> | מגדיר אופציה בתיבה נפתחת |
| <button> | מגדיר כפתור לחיץ |
| <isindex> | אסור לשימוש. תשתמשו ב- <input> במקום |
האם מידע זה היה מועיל?
