יצירת קשר עם חברת בניית אתרים צור קשר

 077-7644819
חייגו או השאירו הודעתכם

 
מאמרים אחרונים מאמרים אחרונים
17/09/2024 12:49
הכירו את פורמטי המדיה המתקדמים, וידאו ותמונה, שנחוצים בכל בניית חנות וירטואלית ואתר אינטרנט חדשים: A...
15/09/2024 17:03
במדריך זה נכיר את מנגנון הטעינה העצלה שבפיתוח אתרי אינטרנט. נציג את הרעיון שעומד מאחורי המנגנון, יתר...
17/07/2024 20:18
שלב אחר שלב, כך תגדירו קמפיין גוגל עם מודעות חיפוש דינמיות. מדריך טכני מקיף שיכוון אתכם מההתחלה ועד ...

טפסים, תגית form, input, textarea

  1. דף הבית
  2. מדריך HTML5 למתכנת המתחיל
  3. טפסים, תגית form, input, textarea
יצירת טבלאות במסמך HTML5 באמצעות תגית form.

יצירת טפסים ב-HTML5

ב-html משתמשים בתגית form בכדי ליצור טפסים. הטפסים משמשים כדי להעביר אל השרת נתונים שהוכנסו ע"י הגולשים.

זהו המבנה הכללי של תגית form:

<form action="URL">
    <div class="form_wrapper">
        ... input elements ...
    </div>
</form>

טופס מכיל אלמנטים המכונים input elements המגדירים את אובייקטים שונים בטופס, כמו למשל שדה טקסט, כפתורי רדיו, כפתור שמירה ואחרים. סוג האובייקט בטופס מוגדר ע"י הערך (value) של מאפיין type. דוגמאות לכך ניתן לראות מטה בתתי-הפרק העוסקים בהגדרת השדות השונים. עם לחיצה על כפתור השליחה, ישלח הטופס את הנתונים אל ה-URL שיכול להיות כתובת אתר אינטרנט או קובץ ביצועי בשפת שרת (כגון PHP או ASP).

נשים לב כי בדוגמא שהבאנו הוספנו מעטפת של תגית div בתוך תגית ה-form. הסיבה לכך היא שתקן HTML5 כופה על ה-input elements להיות עטופים בתוך תגית div ולא להופיע ישירות בתוך תגית form.

שדה טקסט

על מנת ליצור שדה טקסט בן שורה אחת, שבו יוכל הגולש להקליד טקסט, משתמשים במאפיין input type=text, כמו בדוגמה הבאה:

<form action="https://www.mgweb.co.il" >
    <div class="form_wrapper">
        First name: <input type="text" name="firstname" /><br />
        Last name: <input type="text" name="lastname" />
    </div>
</form>

הקוד הנ"ל יוצג בדפדפן באופן הבא:

First name:
Last name:

שדה סיסמה

input type=password משמש להגדרת שדה סיסמה, לדוגמה:

<form action="https://www.mgweb.co.il">
    <div class="form_wrapper">
        Password: <input type="password" name="pwd" />
    </div>
</form>

כך ייראה שדה סיסמה בדפדפן:

Password:

תיבת טקסט

ניתן ליצור תיבת טקסט שבה ניתן להקליד מלל חופשי בן יותר משורה אחת. עושים זאת באמצעות התגית textarea. לתגית זו מאפיין cols ומאפיין rows המציינים את גודל תיבת הטקסט בתווים ובשורות. המלצתנו היא להכניס להם ערכים של 1 לשניהם ופשוט לעצב את אזור הטקסט ב-CSS. לצערנו ומשום מה 2 מאפיינים אלו הם מאפייני חובה.

דוגמא להגדרת תיבת טקסט:

<form action="https://www.mgweb.co.il">
    <div class="form_wrapper">
        <textarea name="details" rows="1" cols="1"></textarea>
    </div>
</form>

הפעם נסו בעצמכם בכדי לראות איך זה נראה בדפדפן :)

כפתורי רדיו

כפתורי רדיו הם כפתורים המאפשרים לגולש לבחור לסמן אך ורק אחד מהם. בכדי להגדיר כפתורי רדיו משתמשים במאפיין input type=radio, כמו בדוגמה הבאה:

<form action="https://www.mgweb.co.il">
    <div class="form_wrapper">
        <input type="radio" name="employment" value="employed" /> employed<br />
        <input type="radio" name="employment" value="unemployed" /> unemployed
    </div>
</form>

כך נראים כפתורי רדיו לפי הקוד שבדוגמה:

employed
unemployed

checkboxes

בניגוד לכפתורי רדיו, כפתורים מסוג checkboxes מאפשרים בחירה של יותר מאפשרות אחת. בכדי להגדיר כפתורים אלה, משתמשים ב- input type=checkbox:

<form action="https://www.mgweb.co.il">
    <div class="form_wrapper">
        <input type="checkbox" name="hobby" value="swimming" /> Swimming<br />
        <input type="checkbox" name="hobby" value="dancing" /> Dancing
    </div>
</form>

וכך יוצג הקוד בדפדפן:

Swimming
Dancing

כפתור "שלח" (Submit)

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

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

להלן דוגמא לטופס עם כפתור שליחה:

<form name="input" action="html_form_action.php" method="get">
    <div class="form_wrapper">
        Username: <input type="text" name="user" />
        <input type="submit" value="Submit" />
    </div>
</form>

וכך נראה כפתור submit בדפדפן:

Username:

בדוגמא זו, הנתונים שיוקלדו בשדה הטקסט יישלחו לאחר לחיצה על submit אל העמוד html_form_action.php בשיטת get.

 

הוספת תגובה

תודה

18/07/2021 23:44
שילת בנתורה
היי
תודה על ההסברה המפורטת
עזרת לי מאוד

תודה רבה

25/05/2020 12:06
רועי מונסה
תודה רבה עזר לי מאד!
YouTube previewPlay

שנקפיץ יחד את העסק שלך לגבהים חדשים?

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

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

 

אל תהססו! מלאו את הטופס או התקשרו עכשיו 077-7644819

 
WhatsApp
שנקפיץ לך את העסק?
לחץ כאן
התקשר עכשיו 077-7644819
או מלא את הטופס להלן: