תגים הקשורים לטפסים

מאמר זה מסביר על תגים הקשורים לטפסים.

הסבר זה כולל שדות טופס שונים כמו קלטי טקסט ותפריטי בחירה נפתחים.

YouTube Video

תגים הקשורים לטפסים

תג <form>

1<form action="/submit" method="post">...</form>

• תגית <form> משמשת להגדרת הטופס כולו.
• המאפיין action מגדיר את היעד, והמאפיין method מגדיר את השיטה (GET או POST).
• תוכל גם להגדיר את המאפיין target, בדומה לתג <a>.

תג <input> (שדה קלט טקסט)

1<input type="text" name="username" placeholder="Enter your username">

• <input type="text"> יוצר שדה הזנה טקסט של שורה אחת. משתמשים יכולים להזין כל טקסט.

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

  • placeholder מתאים למתן מידע משלים ואינו מתאים להוראות חשובות כמו הזנה חובה. במקרים כאלה, עליך להשתמש בתווית.

תג <input> (שדה קלט סיסמה)

1<input type="password" name="password" placeholder="Type your password here">

• <input type="password"> יוצר שדה להזנת סיסמא. התווים שהוזנו מוסתרים ומוסווים לשמירה על אבטחה.

תג <input> (שדה קלט כתובת אימייל)

1<input type="email" name="email" placeholder="Enter your email">

• <input type="email"> יוצר שדה להזנת כתובת דואר אלקטרוני וכולל אימות לאימות פורמט דואר אלקטרוני תקין.

תג <input> (תיבת סימון)

1<input type="checkbox" name="subscribe"> Subscribe to newsletter

• <input type="checkbox"> יוצר תיבת סימון. כאשר זמינות מספר אפשרויות, משתמשים יכולים לבחור מספר פריטים.

תג <input> (כפתור רדיו)

1<input type="radio" name="gender" value="male"> Male<br>
2<input type="radio" name="gender" value="female"> Female

• <input type="radio"> יוצר כפתור רדיו שמאפשר למשתמש לבחור אפשרות אחת בלבד מתוך קבוצה.

תג <input> (לחצן שליחה)

1<input type="submit" value="Submit">

• <input type="submit"> יוצר כפתור לשליחת הנתונים בטופס.
• ערך המאפיין value נכלל בנתוני הטופס בעת שליחתו.

<תג input> (כפתור איפוס)

1<input type="reset" value="Reset">

• <input type="reset"> יוצר כפתור שאפס את כל ערכי הקלט בטופס.

<תג input> (שדה מוסתר)

1<input type="hidden" name="userid" value="12345">

• <input type="hidden"> יוצר שדה מוסתר שאינו מוצג על המסך ומשמש לשליחת נתונים לצד השרת כאשר הטופס נשלח.

תג <input> (בורר צבעים)

1<input type="color" name="favcolor" value="#ff0000">

• <input type="color"> מציג בורר צבעים ויוצר שדה הזנה עבור המשתמשים לבחירת צבע.

תג <input> (שדה קלט לתאריך)

1<input type="date" name="birthday">

• <input type="date"> יוצר שדה הזנת תאריך ומציג לוח שנה לבחירת תאריך.

תג <input> (שדה קלט לשעה)

1<input type="time" name="appointment_time">

• <input type="time"> יוצר שדה להזנת זמן ומציג בורר זמן.

<תג input> (שדה העלאת קובץ)

1<input type="file" name="resume">

• <input type="file"> יוצר שדה קלט שמאפשר למשתמשים לבחור ולהעלות קבצים.
• המאפיין enctype של תגית form חייב להיות מוגדר כ-multipart/form-data.

<תג input> (שדה מספרים)

1<input type="number" name="quantity" min="1" max="10">

• <input type="number"> יוצר שדה קלט מספרי שמאפשר להגדיר ערך מינימום, ערך מקסימום וגודל צעד (כמות הוספה/הפחתה).

<תג input> (שדה בחירת טווח מספרים)

1<input type="range" name="volume" min="0" max="100" value="50">

• <input type="range"> יוצר שדה קלט שמאפשר למשתמשים לבחור ערך בטווח מסוים באמצעות מחוון.

<תג textarea>

1<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

• תגית <textarea> יוצרת שדה טקסט עם מספר שורות. מתאים להזנת טקסט ארוך או הערות.

<תג select>

1<select name="animal">
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4</select>

• תגית <select> יוצרת תפריט נפתח, והאפשרויות מוגדרות באמצעות תגית <option>. משתמשים יכולים לבחור פריט אחד או כמה פריטים.

1<select name="animals" multiple>
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4    <option value="bird">Bird</option>
5</select>

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

תווית <optgroup>

 1<select name="fruits">
 2    <optgroup label="Citrus">
 3        <option value="orange">Orange</option>
 4        <option value="lemon">Lemon</option>
 5    </optgroup>
 6    <optgroup label="Berries">
 7        <option value="strawberry">Strawberry</option>
 8        <option value="blueberry">Blueberry</option>
 9    </optgroup>
10</select>

• תווית ה-<optgroup> משמשת לקיבוץ פריטים קשורים יחד. התכונה label מאפשרת לך להגדיר שם קבוצה, ומספקת אפשרויות ברורות למשתמשים גם אם הרשימה ארוכה.

<תג label>

1<label for="username">Username:</label>
2<input type="text" id="username" placeholder="Enter your username">

• תגית <label> מגדירה תוויות לשדות קלט, תיבות סימון וכפתורים רדיו, משפרת שימושיות ונגישות.
• לדוגמה, לחיצה על תווית (label) יכולה להפעיל שדה קלט או להפעיל/לכבות תיבת סימון.

תגית <fieldset>

1<fieldset>
2    <legend>Personal Information</legend>
3    <label for="name">Name:</label>
4    <input type="text" id="name" placeholder="Enter your name">
5</fieldset>

• תגית <fieldset> מקבצת פקדים קשורים בטופס, ותגית <legend> מספקת כותרת לקבוצה.

<תג button>

1<button type="button">Button</button>
2<button type="submit" name="action" value="send">Submit</button>
3<button type="reset">Reset</button>

• תגית <button> מגדירה כפתור לחיץ שמפעיל שליחה של הטופס או פעולות אחרות.

  כאשר type="button" מוגדר, הוא מתפקד ככפתור רגיל. לחיצה עליו לא מגישה את הטופס ולא מפעילה פעולות ברירת מחדל אחרות. משתמשים בו כאשר רוצים להגדיר פעולות מותאמות אישית באמצעות JavaScript.

  כאשר type="submit" מוגדר, הוא מתפקד ככפתור שליחה של הטופס. כאשר כפתור זה נלחץ, הטופס שנמצא בתוכו יוגש.

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

  אם התכונה type לא מצוינת, דפדפנים מסוימים עשויים להתייחס אליו כאל type="submit", ולכן מומלץ לציין את הסוג במפורש כדי להבטיח את ההתנהגות הרצויה.

• ניתן לכלול תגיות HTML אחרות בין תגי הפתיחה והסגירה של התג <button>, מה שמאפשר ליצור כפתורים עם סמלים או טקסט מורכב.

• עבור כפתור שליחה שמשתמש בתגית <input>, הערך של המאפיין value נכלל בנתוני הטופס, אבל בתגית <button>, הוא לא נשלח כברירת מחדל.

  על ידי ציון המאפיינים name ו-value עבור תגית <button>, ניתן לשלוח את הערך שלה כנתוני טופס.

תגית <datalist>

1<input list="browsers" name="browser">
2<datalist id="browsers">
3    <option value="Chrome">
4    <option value="Firefox">
5    <option value="Safari">
6</datalist>

• התג <datalist> מספק רשימה של אפשרויות שניתן לבחור בהן עבור פריט <input>. המשתמשים יכולים לבחור מתוך הרשימה או להזין ערך משלהם.

תגית <output>

1<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
2    <input type="range" id="a" value="50"> +
3    <input type="range" id="b" value="50"> =
4    <output name="result" for="a b">100</output>
5</form>

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

תגית <progress>

1<progress value="70" max="100">70%</progress>

• התג <progress> מציג למשתמשים את ההתקדמות של משימה. לדוגמה, הוא יכול להציג בצורה ויזואלית את ההתקדמות של הורדת קובץ או התקנה.

תגית <meter>

1<meter value="0.6">60%</meter>

• התג <meter> מייצג מדידה מספרית בטווח ידוע. הוא משמש להצגת מדידות כמו שימוש בדיסק או מד דלק בטווח מסוים.

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

YouTube Video