حقول HTML المتكررة: اربط كل label بمعرّف id فريد

الخلاصة السريعة

ابدأ بعلاقة التسمية والحقل

تتصل label الصريحة بأول عنصر مطابق لقيمة for إذا كان قابلًا للتسمية؛ لذلك قد يربط تكرار id تسمية الصف الثاني بالحقل الأول. [1]

قرب التسمية من مربع المسافر لا ينشئ الارتباط الصريح؛ تشابه المعرفات لا يُحل بترتيب الصفوف. صحح id وfor معًا. [1]

لا تنسخ المعرفات كما هي

ينسخ cloneNode سمات العنصر وقيمها؛ تكرار الصف بمعرّفه القديم قد ينتج معرفات مكررة، لذا راجع المعرفات داخل النسخة قبل إضافتها. [2]

نسخ صف موجود يحمل id ثابتًا يعيد المشكلة في كل إضافة. وقد تكون للصف أو لعناصر داخله معرفات أخرى تحتاج مراجعة؛ تغيير معرف input وحده لا يصلحها جميعًا. [2]

احفظ الهيكل التالي داخل body. محتوى template منفصل في DocumentFragment؛ سننسخه إلى المستند باستخدام document.importNode. لم نضع معرفًا ثابتًا على حقل القالب أو تسميته. [3]

مرّر الشيفرة أفقيًا عند الحاجة.

<button id="add-row" type="button">أضف مسافرًا</button>
<div id="rows"></div>
<template id="row-template">
  <div class="row">
    <label>اسم المسافر</label>
    <input type="text" name="guest">
  </div>
</template>

ولّد المعرف ثم أدخل الصف

استورد محتوى template، ثم خصص للحقل id غير مستخدم وحدّث htmlFor لتسميته؛ أضف النسخة بعد ضبط الارتباط. [3] [1]

ضع الشيفرة التالية داخل script بعد الهيكل السابق. يبدأ المثال بصف واحد، ويضيف الزر نسخة عند كل نقرة. يفحص المولد المعرف المقترح في المستند، ويتجاوز المستخدم منه؛ أبق هذا المولد واحدًا لهذه المجموعة. [3] [1]

مرّر الشيفرة أفقيًا عند الحاجة.

const rows = document.getElementById("rows");
const template = document.getElementById("row-template");
let serial = 0;
function addRow() {
  const fragment = document.importNode(template.content, true);
  const input = fragment.querySelector("input");
  const label = fragment.querySelector("label");
  let id;
  do {
    id = "guest-" + ++serial;
  } while (document.getElementById(id));
  input.id = id;
  label.htmlFor = id;
  label.textContent = "اسم المسافر " + serial;
  rows.append(fragment);
}
document.getElementById("add-row")
  .addEventListener("click", addRow);
addRow();

اختبر التسمية بعد كل إضافة

اجعل التسمية مرئية وواضحة، وتحقق من مطابقة for وid؛ يساعد النقر على التسمية المرتبطة في الوصول إلى حقلها. [4]

أضف ثلاثة صفوف، ثم انقر نص «اسم المسافر 2»؛ ينبغي أن يصبح الحقل الثاني جاهزًا للكتابة. كرر التجربة مع كل صف، وافحص أن المعرفات مختلفة وأن كل for يطابق حقلًا واحدًا. جرّب التنقل بلوحة المفاتيح أيضًا، وتأكد من بقاء غرض الحقول مفهومًا دون الاعتماد على ترتيبها البصري فقط. [4]

عند إدماج العينة في نموذج أكبر، راجع التسميات في الصفحة كاملة. الأرقام في عيّنتنا تميز الحقول؛ اختر نصوصًا تصف البيانات المطلوبة في مشروعك، واحتفظ بالتسمية المرئية بدل الاكتفاء بمظهر مربع الإدخال. [4]