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

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

 
מאמרים אחרונים מאמרים אחרונים
12/01/2022 12:57
בניית חנות באינטרנט למדבקות קיר מעוצבות ולתמונות קנבס
05/01/2022 15:55
אתר מכירות פומביות לרכישת מוצרים באמצעות שיטת המכרז האנגלי לפיה זוכה בעל ההצעה הגבוהה ביותר
29/11/2021 16:33
29/11/2021 16:32
29/11/2021 16:32
תגובות אחרונות תגובות אחרונות
מדריך CSS - מתחילים
17/01/2022 19:35
היי, עיצוב עושים עם CSS, ולא ...
מדריך CSS - מתחילים
16/01/2022 20:41
האם יש אפשרות לעצב רקע בתוך דף...
מדריך CSS - מתחילים
18/11/2021 10:18
היי ינון, אתה צריך את הטקסט ש...

תגית form

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

יצירת טבלאות במסמך HTML5 באמצעות תגית form.

טפסים

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

רוצה שנקפיץ גם את העסק שלך?

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

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

 

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

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