המדריך הבסיסי ל-HTML – חלק ח' – כפתורים וטפסים

הזמינו אותי לכוס קפה
buy me coffee

בפרקים הקודמים של המדריך כיסינו כמעט את כל הנושאים החשובים ב-HTML. בחלק זה נעבור על 2 אלמנטים חשובים נוספים – כתפורים וטפסים

טפסים

טפסים ב-HTML משמשים אותנו למצבים שבהם אנו רוצים לאסוף מידע מהמשתמש.

  • התגית form היא התגית הפותחת שבה נשתמש ליצירת טפסים.
  • התגית input משמשת ליצור שדה שבו ניתן להקליד טקסט
  • במאפיין type נשתמש על מנת להגדיר את סוג השדה של ה-input.
    מאפיין זה יודע לקבל את הערכים text, number וכו'.
  • התגיות select ו-option מייצרות מעין קופסא שבוררת בין מספר אופציות.
  • התגית textarea משמשת ליצירת קופסא גדולה של שדה טקסט לפי מספר השורות שנגדיר במאפיין –rows.
  • את הטופס נסגור באמצעות תגית סוגרת form כמובן:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello, World!</title>
    <h1>this is an exemple of our basic HTML Document with form</h1>
</head>
<body>
    <p>this is an exemple of link, click <a href="https://www.technow.co.il">here</a>
        <br/>
        <br/>
        this is my image:
        <br/>
        <br/>
        <a href="https://www.g4a.co.il/">
            <img src="logo.png" alt="text" style="height: 100px;" style="width: 100px;">
        </a>
        <br/>
        table exemple:
        <br/>
        <form action="/action_page.php">
            <label for="fname">First name:</label><br>
            <input type="text" id="fname" name="fname" value="Yurgen"><br>
            <label for="lname">Last name:</label><br>
            <input type="text" id="lname" name="lname" value="Vice"><br><br>
            <input type="submit" value="Submit">
        </form> 
    </p>
</body>
</html>

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

HTML form
HTML form

פקדים נוספים שניתן להשתמש בהם בטופס

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

<form>
      <input type="radio" id="html" name="colors" value="Red">
      <label for="html">Red</label><br>
      <input type="radio" id="css" name="colors" value="Yellow">
      <label for="css">Yellow</label><br>
      <input type="radio" id="javascript" name="colors" value="Green">
      <label for="javascript">Green</label>
</form>

שימו לב כי כל Radio Button ניתן לסמן פעם אחת בזמן נתון,
כלומר שלא ייתכן מצב שבו יהיו מסומנות 2 תיבות כאלו באותו הזמן.
פקד שימושי נוסף שיש להכיר הוא קופסאות סימון – Check Boxes:

<form>
      <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
      <label for="vehicle1"> I have a bike</label><br>
      <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
      <label for="vehicle2"> I have a car</label><br>
      <input type="checkbox" id="vehicle3" name="vehicle3" value="Hoverboard">
      <label for="vehicle3"> I have a hoverboard</label>
</form>

שימו לב כי ניתן לבחור מ-0 קופסאות סימון עד לכולן בזמן נתון:

HTML Check Boxes
HTML Check Boxes

כפתורים ב-HTML

  • התגית button משמשת ליצירת כפתור.
  • ההבדל בין כפתור לקישור הוא שכפתור הוא גרפי וקישור הוא טקסטואלי (לרוב).
  • המאפיין onclick משמש לחיווי בעת הקשת המשתמש על הכפתור
  • המאפיין ondblclick משמש לחיווי בעת לחיצה כפולה (דאבל-קליק) של המשתמש על הכפתור:
<!DOCTYPE html>
<html>
<head>
    <title>Hello, World!</title>
    <h1>this is an exemple of our basic HTML Document with button</h1>
</head>
<body>
    <button ondblclick="myalert()">
        Show Alert Message
      </button>   
      <script>
          function myalert() {
              alert("You've clicked the button");
          }
      </script>
</body>
</html>

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

ניתן לומר כי בכך סיימנו ללמוד את כלי הבסיס של HTML.
בחלק הבא נלמד על HTML5 והשינויים שהגיעו אתו.

לקריאה מורחבת באתר של איגוד האינטרנט הישראלי יש ללחוץ כאן.

רוצים לשתף את המדריך?

אהבתכם את המדריך? פתר לכם תקלה?

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

כתיבת תגובה

אהבתכם את המדריך? פתר לכם תקלה? הזמינו את כותב המדריך לכוס קפה

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