מאמרים אחרונים מאמרים אחרונים
24/10/2018 19:39
מתכנן הקמת חנות מתנות מקוונת? אספנו עבורך כל מה שחשוב לדעת לפני שאתה יוצא לדרך.
15/09/2018 19:27
יש לך עסק למכירת רהיטים או שאתה מתכנן אחד כזה בקרוב? קרא איך הקמת חנות וירטואלית למכירה של רהיטים בא...
06/09/2018 18:05
מחשבים זו אהבת חייך? האם חשבת למכור מחשבים, טלפונים סלולריים, קונסולות משחק וציוד היקפי באינטרנט? המ...
24/08/2018 13:39
הקמת פורטל בריאות באנגלית
22/08/2018 0:27
מתכנן להקים עסק למכירת מוצרי מזון באינטרנט? אנחנו כאן כדי לעזור לך בתכנון להצלחת העסק.
תגובות אחרונות תגובות אחרונות
בניית חנות וירטואלית
29/08/2018 13:50
חברה לבניית אתר וחנות וירטואלי...
שפת שרת מול שפת לקוח
04/07/2018 15:45
היי, השפות PHP ו-PYTHON שתי...
שפת שרת מול שפת לקוח
04/07/2018 14:10
מה ההבדל בין php ל python

תגית form

»
»
תגית 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
או מלא את הטופס להלן: