בחזרה ליסודות: מה ההבדל בין תכונה HTML "id" ל"שם "?

תצלום של מריה טנבה ב- Unsplash

מה תפקידם ומדוע?

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

לפיכך, הפשוטה ביותר (והחזקה ביותר) של שני המרכיבים הללו היא תכונת ה"זה ".

תכונה 'מזהה':

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

למה זה?

תכונת ה- id משמשת בעיקר לגישה ישירה לרכיב ב- JavaScript. דוגמא לשימוש:

var myElement = document.getElementById ('myelementid');

תרחיש נוסף שניתן להשתמש בו (תלוי בתרחיש שלך, גישה טובה יותר לשימוש בכיתות שניתנות לשימוש חוזר) הוא באמצעות עיצוב CSS, כגון:

#myelementid {צבע רקע: אדום; }

תכונה שם:

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

למה זה?

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

שקול את אלמנט ה- HTML הבא:

פריט זה:

  • זהו סוג של אלמנט קלט טקסט, המאפשר להזין תווי טקסט
  • מכיל טקסט 'סופר-על'
  • לתכונה המזהה יש ערך "שם משתמש"
  • תכונת השם מכילה את הערך "שם משתמש"
  • אתה יכול ליצור איתו קשר באמצעות:
document.getElementById ('שם משתמש'). value = 'megauser';
  • אתה יכול גם לקיים אינטראקציה עם בורר השמות (אוקיי, אתה יכול לעשות זאת, אך מומלץ להשתמש בתכונה מזהה מכיוון שהוא יעיל יותר):
document.querySelector ("input [name = 'myusname']"). ערך = 'מבחן';
  • אתה יכול להשתמש בסגנונות CSS עם בורר זיהוי:
#usus {גודל גופן: 700}
  • אתה יכול גם להשתמש בסגנונות CSS עם הבוחר (אתה יכול לעשות זאת, אך זה גם לא מומלץ כי במקרה זה הסגנונות שלך מחוברים לחוזקה למסמך שלך - אם תשנה את שם הפריט, הסגנונות יאבדו.):
input [name = 'myusname'] {fill: 20px; }

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

שם משתמש = סופר-על

האם אוכל להשיג אלמנט HTML שיש לו שתי תכונות אלה?

כמובן ששתי תכונות HTML אלה משלימות. אתה יכול להשתמש במזהה כדי להעביר נתונים לשרת כדי ליצור אינטראקציה עם JavaScript או CSS ושם.

במפרט HTML 3.2 (ינואר 1997) תוכלו למצוא קישורים מפורטות לתכונות וההפניה היחידה למזהה:

ל- HTML אין תכונות מזהה, CLASS ו- STYLE בגירסה זו.

מסקנה שתכונת השם נוצרה לראשונה ומאוחר יותר מזהה.

הפניות: