Skip to main content

יצירת לחצנים על תבניות HTML

קורס בסיס HTML ו CSS - טפסים הקדמה (אַפּרִיל 2025)

קורס בסיס HTML ו CSS - טפסים הקדמה (אַפּרִיל 2025)
Anonim

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

אלה הן הדרכים שבהן תוכל לשלוח את הטפסים שלך:

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

      INPUT תג נותן הרבה אפשרויות כמו התמונה

      INPUT אבל נראה יותר כמו סוג הגשה סטנדרטי. זה דורש JavaScript כדי להפעיל.

    • ה

      לחצן תג הוא סוג רב תכליתי יותר של לחצן מאשר

      INPUT תג. תג זה מחייב הפעלה של Javacript.

    • ה

      פקודה אלמנט חדש ב- HTML5, והוא מספק דרך להפעלת סקריפטים וטפסים עם פעולות קשורות. זה מופעל עם JavaScript.

אלמנט INPUT

הקלט

INPUT אלמנט הוא הדרך הנפוצה ביותר להגיש טופס, כל מה שאתה עושה זה לבחור סוג (

כפתור,

תמונה, או

שלח) ואם יש צורך להוסיף כמה scripting להגיש את הטופס פעולה.

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

value = "שלח טופס">

אלמנט כתוב ככה, אבל אם אתה משאיר את כל התכונות האחרות, כל זה יוצג בדפדפנים הוא כפתור אפור ריק. כדי להוסיף טקסט ללחצן, השתמש ב-

ערךתכונה. אך לחצן זה לא ישלח את הטופס אלא אם תשתמש ב- JavaScript.

onclick = "submit ();">

זה דומה ל

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

src = "submit.gif">

אלמנט הלחצן

ה

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

להגיש טופס

ניתן לכלול תמונות בלחצן שלך או לשלב תמונות וטקסט כדי ליצור לחצן מעניין יותר.

להגיש טופס

אלמנט הפיקוד

ה

פקודהאלמנט חדש ב- HTML5. זה לא דורש

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

תוויתתכונה.

תווית = "שלח טופס">

אם אתה רוצה את הפקודה להיות מיוצג על ידי תמונה, אתה משתמש

סמלתכונה.

סמל = "submit.gif">

לטופסי HTML יש מספר דרכים שונות להגשה, כפי שלמדת בדף הקודם. שתי שיטות אלה הן

INPUTהתג

לחצןתג. ישנן סיבות טובות להשתמש בשני האלמנטים האלה.

אלמנט קלט

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

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

INPUTלחץ על התג.

הבעיה היא כי כפתור זה הוא מאוד מכוער ופשוט. לא ניתן להוסיף תמונות אליו. אתה יכול סגנון זה בדיוק כמו כל רכיב אחר, אבל זה עדיין יכול להרגיש כמו כפתור מכוער.

להשתמש ב

INPUTכאשר הטופס שלך צריך להיות נגיש גם בדפדפנים כי יש JavaScript כבוי.

אלמנט BUTTON

ה

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

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

DIV ולהפוך את כל זה כפתור שלח אם אתה רוצה.

החיסרון הגדול ביותר

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

INPUTשיטה. כל משתמש שלא הפעיל JavaScript לא יוכל לשלוח טופס עם רק

לחצןאלמנט לשלוח אותו.

להשתמש ב

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