טפסים ב HTML
טפסים ב HTML משמשים העברת נתונים לשרת
טופס יכול להכיל אלמנטי קלט כגון: שדות טקסט, תיבות סימון, כפתורי בחירה, ססמאות, קבצים ועוד. טפסים יכולים גם להכיל רשימות שהמשתמש יכול לבחור מהם והאפשרויות בלתי מוגבלות, אם אתה רוצה לקבל איזשהו מידע ממי שגולש באתר שלך, טופס זה הדרך.
התגית <form> משמשת לייצג טופס בHTML
| <form> . אלמנטי קלט . </form> |
טפסים בHTML אלמנט ה input
האלמנט הכי חשוב בטפסים הוא אלמנט הinput
האלמנט יכיל מידע מהמשתמש
אלמנט הinput הוא אחד האלמנטים הכי מגוונים בHTML והוא משתנה לחלוטים בהתאם לתכונה "type", הוא יכול לתאר שדה טקסט, סיסמה, קובץ תיבת סימון ועוד ועוד.
אנחנו נעבור על סוגי הקלט הנפוצים ביותר
type="text"
<input type="text" /> מתאר שורה אחת שהמשתמש יכול להכניס לתוכה טקסט:
| <form> שם פרטי: <input type="text" name="firstname" /><br /> שם משפחה: <input type="text" name="lastname" /> </form> |
איך הקוד נראה בדפדפן:
שים לב: הטופס עצמו בלתי נראה, ואורך ברירת המחדל של שדה טקסט הוא 20 תווים
type="password"
<input type="password" /> מגדיר שדה לסיסמה:
| <form> סיסמה: <input type="password" name="pwd" /> </form> |
איך הקוד נראה בדפדפן:
שים לב: התווים בשדה סיסמה מוחבאים
type="radio"
<input type="radio" /> מגדיר לחצני בחירה, הם מאפשרים למשתמש לבחור רק אחד מתוך מספר אפשרויות
| <form> <input type="radio" name="sex" value="male" /> זכר<br /> <input type="radio" name="sex" value="female" /> נקבה </form> |
איך הקוד נראה בדפדפן:
type="checkbox"
<input type="checkbox" /> מגדיר קופסאות בחירה, קופסאות בחירה מאפשרות למשתמש לבחור אפשרות אחת או יותר מבין מספר אפשרויות.
| <form> <input type="checkbox" name="vehicle" value="Bike" /> יש לי אופניים<br /> <input type="checkbox" name="vehicle" value="Car" /> יש לי אוטו </form> |
איך הקוד נראה בדפדפן:
type="submit"
<input type="submit" /> מגדיר כפתור"שלח".
כפתור ה"שלח" שולח את נתוני הטופס לקובץ הרשום בתכונה action של הטופס, הקובץ הזה בדרך כלל מבצע פעולה כלשהי עם המידע (שולח אותו באימייל או מוסיף אותו למסד נתונים לדוגמה)
| <form name="input" action="html_form_action.asp" method="get"> שם משתמש: <input type="text" name="user" /> <input type="submit" value="שלח" /> </form> |
איך הקוד נראה בדפדפן:
אם תלחץ על שלח בטופס הזה הוא ישלח את הנתונים לקובץ בשם example.php לצערי כרגע הוא לא קיים אז תקבל שגיאה.