بازگشت به مبانی: تفاوت بین ویژگیهای HTML "شناسه" و "نام" چیست؟

عکس ماریا تنوا در Unsplash

اهمیت و اهمیت آنها برای چیست؟

این سؤالات ، گرچه ممکن است اساسی به نظر برسند ، اما مرتبط هستند و هدف این پست دقیقا پاسخ دادن به آنها است.

بنابراین ، در میان این دو عنصر ، ساده ترین درک (و قدرتمندترین) ویژگی "id" است.

ویژگی "id":

این ویژگی ، یک ویژگی جهانی در نظر گرفته شده است که از یک ویژگی است که برای همه عناصر HTML مشترک است - هر عنصر HTML می تواند دارای ویژگی شناسه باشد.
با تعریف ، این ویژگی یک شناسه (ID) منحصر به فرد در نظر گرفته می شود و به معنای آن است که باید در هر صفحه HTML بی نظیر باشد.

این برای چیست؟

ویژگی شناسه در درجه اول در جاوا اسکریپت مورد استفاده قرار می گیرد تا مستقیماً به عنصر مورد نظر دسترسی پیدا کنید.
مثال استفاده:

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

سناریوی دیگری که می توان از آن استفاده کرد (بسته به سناریوی شما ، یک رویکرد بهتر می تواند از کلاسهای قابل استفاده مجدد استفاده کند) از طریق یک ظاهر طراحی CSS با استفاده از انتخاب شناسه است ، برای مثال:

#myelementid
 پس زمینه-رنگ: قرمز؛
}

ویژگی "name":

از طرف دیگر ویژگی این نام فقط در مورد برخی از عناصر HTML مانند ورودی ، دکمه ، انتخاب از بین سایر موارد اعمال می شود.

این برای چیست؟

از این ویژگی برای ارسال اطلاعات فرم به سرور وب استفاده می شود.
وقتی فرم را ارسال می کنیم ، مقادیر موجود در عناصر HTML مانند ورودی ، دکمه ، انتخاب و غیره با استفاده از ویژگی نام و نه شناسه ارسال می شود - این مهم است!

بیایید عنصر HTML زیر را در نظر بگیریم:

این عنصر:

  • یک عنصر ورودی از نوع متن است ، یعنی اجازه می دهد تا شخصیت های متن را وارد کنید
  • حاوی متن "superuser" است
  • ویژگی شناسه دارای مقدار "نام کاربری" است
  • ویژگی اسم دارای مقدار "myusername" است
  • با استفاده از:
document.getElementById ("نام کاربری"). مقدار = "megauser"؛
  • همچنین می توانید با استفاده از انتخابگر نام با آن ارتباط برقرار کنید (خوب ، می توانید این کار را انجام دهید ، اما توصیه می شود از ویژگی شناسه استفاده کنید زیرا بسیار کارآمدتر است):
document.querySelector ("input [name = 'myusername']"). مقدار = 'testuser'؛
  • می توانید سبک های CSS را با استفاده از انتخاب شناسه اعمال کنید:
#username {font-weight: 700
  • شما همچنین می توانید سبک های CSS را با استفاده از انتخاب نام اعمال کنید (همچنین می توانید این کار را انجام دهید ، اما توصیه نمی شود زیرا در این حالت سبک های شما کاملاً با سند شما همراه هستند - اگر نام عنصر خود را تغییر دهید ، سبک ها را از دست خواهید داد. ):
input [name = 'myusername'] {padding: 20px؛ }

اما ، هنگامی که فرم به سرور ارسال می شود ، از ویژگی شناسه استفاده نمی شود ، و در اینجاست که ویژگی این ویژگی اهمیتی کسب می کند.
در این حالت خاص ، مقدار ورودی با مقدار "superuser" و همچنین "نام" عنصری که به آن مربوط می شود ، ارسال می شود - بنابراین ، داده های ارسال شده عبارتند از:

myusername = superuser

آیا می توانم یک عنصر HTML با این دو ویژگی داشته باشم؟

البته ، این دو ویژگی HTML مکمل یکدیگر هستند. برای انتقال اطلاعات به سرور می توانید از ID استفاده کنید تا با عنصر ارتباط برقرار کند.

در مشخصات HTML 3.2 (مورخ ژانویه 1997) می توانید اشارات مفصلی به ویژگی اسم پیدا کنید و تنها مرجع شناسه آن است:

ویژگی های ID ، CLASS و STYLE در این نسخه از HTML لحاظ نمی شوند.

قطعی است که ابتدا ویژگی این نام ایجاد شد و بعداً شناسه ایجاد شد.

منابع: