מאמרים אחרונים מאמרים אחרונים
15/05/2020 13:15
בניית אתר קטלוגי למכירה של סוככים, מרקיזות, פרגולות ומרקיזות
13/05/2020 15:41
בניית חנות וירטואלית לשעונים לגבר ולאישה
13/05/2020 15:06
בניית חנות וירטואלית לתכשיטים מעוצבים באנגלית ובעברית
30/04/2020 14:51
חנות מקוונת למכירה של חלקים ואביזרים לרכבי שטח
29/04/2020 21:10
בניית חנות אינטרנטית למכירת דלתות מעוצבות
תגובות אחרונות תגובות אחרונות
עיצוב רווחים ושוליים
21/04/2020 12:37
היי, קוד ה-CSS יכול להרשם בכל...
עיצוב רווחים ושוליים
02/04/2020 6:24
את העיצוב בשפת css כותבים בדף ...
תהליך בניית אתרים
17/10/2019 13:13
אחלה מאמר! ערך מעולה!

תגית 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.

 

הוספת תגובה

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

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

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

 

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

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