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

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

 
מאמרים אחרונים מאמרים אחרונים
15/02/2022 22:51
ככה תיבנו חנות וירטואלית מותאמת סלולר שתשפר את חוויית המשתמש ותגדיל את ההמרות.
03/02/2022 0:06
תקן HTML5 לצד הלקוח באתרי אינטרנט הוא התקן המוביל בימינו. קראו על היתרונות של התקן.
31/01/2022 15:40
בניית אתר אינטרנט בשפת צד השרת PHP היא בחירה חכמה בשפת פיתוח ותיקה, מובילה ומהירה.
תגובות אחרונות תגובות אחרונות
מדריך CSS - מתחילים
17/01/2022 19:35
היי, עיצוב עושים עם CSS, ולא ...
מדריך CSS - מתחילים
16/01/2022 20:41
האם יש אפשרות לעצב רקע בתוך דף...
מדריך CSS - מתחילים
18/11/2021 10:18
היי ינון, אתה צריך את הטקסט ש...
תגובות אחרונות פוסטים אחרונים בפורום
27/06/2022 23:53
שלום רב, ישנה בעיה קטנה בא...
27/06/2022 23:51
שלום! הבעיה שלי אסביר אותה הר...
27/06/2022 23:49
הי,כיצד כדאי להשקיע בשיווק של ...

תגית form

  1. דף הבית
  2. מדריך HTML5
  3. תגית form

יצירת טבלאות במסמך 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
שילת בנתורה
היי
תודה על ההסברה המפורטת
עזרת לי מאוד
YouTube previewPlay

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

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

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

 

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

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