phone - type of inputs in html




النقر فوق النص لتحديد زر الاختيار المطابق (4)

في الرمز الخاص بك ، لديك تسمية في النموذج نفسه. تريد وضع التصنيفات على كل مجموعة راديو فردية ، كما هو موضح أدناه.

<form>
  <p>What is my middle name?</p>
  <br>
  <input id="349" type="radio" value="1" name="question1">
  <label for="349">Abe</label>
  <br>
  <input id="350" type="radio" value="2" name="question1">
  <label for="350">Andrew</label>
  <br>
  <input id="351" type="radio" value="3" name="question1">
  <label for="351">Andre</label>
  <br>
  <input id="352" type="radio" value="4" name="question1">
  <label for="352">Anderson</label>
  <br>
</form>

يجب أن تضع في اعتبارك أن العنصرين يجب ألا يكون لهما نفس المعرّف. يتم استخدام سمة name بحيث تعمل أزرار الاختيار كمجموعة وتسمح بتحديد واحد فقط في كل مرة.

أنا بصدد إنشاء تطبيق ويب اختبار باستخدام PHP. يتكون كل سؤال من <label> منفصل ولديه 4 خيارات ممكنة ، باستخدام radio buttons للسماح للمستخدم بتحديد إجابته. يبدو HTML الحالي لمسألة واحدة كما يلي:

<label for="349">What is my middle name?</label>
<br>
<input id="349" type="radio" value="1" name="349">Abe
<br>
<input id="349" type="radio" value="2" name="349">Andrew
<br>
<input id="349" type="radio" value="3" name="349">Andre
<br>
<input id="349" type="radio" value="4" name="349">Anderson
<br>

أرغب في أن يكون لدى المستخدم خيار النقر على النص المرتبط بزر الراديو. الآن ، يمكن للمستخدم فقط الضغط على زر الراديو نفسه - الذي أجد أنه مهمة مرهقة للغاية.

قرأت غير قادر على تحديد اختيار زر اختيار معين من خلال النقر على نص الاختيار ونقاط الاقتراح في اتجاه مطابقة سمات السمات id . لقد فعلت هذا وما زالت لا تعمل.

سؤالي هو: أريد أن أكون قادرًا على النقر فوق نص كائن <input type="radio"> ، على عكس القدرة على تحديد زر التحديد نفسه فقط. وأنا أعلم أنني قرأت عن هذا من قبل ولكن لا يبدو أن العثور على أي حل لمشكلتي. أي مساعدة أو اقتراحات هي محل تقدير كبير!


يبدو أن هناك مساحة صغيرة غير قابلة للطباعة بين زر الاختيار والتسمية إذا تم ذلك وفقًا لإجابة ناثان . هنا كيفية جعلهم ينضمون بسلاسة (راجع هذه المقالة ):

<form>
    <p>What is my middle name?</p>
    <br>
    <label><input id="349" type="radio" value="1" name="question1">Abe</label>
    <br>
    <label><input id="350" type="radio" value="2" name="question1">Andrew</label>
    <br>
    <label><input id="351" type="radio" value="3" name="question1">Andre</label>
    <br>
    <label><input id="352" type="radio" value="4" name="question1">Anderson</label>
    <br>
</form>

يضمن وضع علامة الإدخال داخل علامة التسمية ظهور العلامة بجوار زر الاختيار مباشرةً. مع مقاربات سابقة مقترحة ، يمكنك وضع علامة التسمية في أي مكان داخل ملف html وستقوم بتحديد زر الاختيار المرتبط عند النقر فوقه. تحقق من هذا:

<html>
<body>

<form>
  <p>What is my middle name?</p>
  <br>
  <input id="349" type="radio" value="1" name="question1">

  <br>
  <input id="350" type="radio" value="2" name="question1">
  <label for="350">Andrew</label>
  <br>
  <input id="351" type="radio" value="3" name="question1">

  <br>
  <input id="352" type="radio" value="4" name="question1">
  <label for="352">Anderson</label>
  <br>
</form><br/>
<p>This is a paragraph</p>
  <label for="349">Abe</label><br/>
  <label for="351">Andre</label>
  
</body>
</html>

وبدلاً من ذلك ، يؤدي التخلص من هذا الخطأ إلى:

<form>
  <p>What is my middle name?</p>
  <br>
  
  <label>
    <input id="349" type="radio" value="1" name="question1"/>Abe
  </label>
  <br>
  
  <label>
    <input id="350" type="radio" value="2" name="question1"/>Andrew
  </label>
  <br>
  
  <label>
    <input id="351" type="radio" value="3" name="question1"/>Andre
  </label>
  <br>
  
  <label>
    <input id="352" type="radio" value="4" name="question1"/>Anderson
  </label>
  <br>
</form>


يمكنك فعلها هكذا

 <label for="1">hi</label>
 <input type="radio" id="1" />

لذلك إذا قمت بالنقر فوق النص أو التسمية ، فسيتم تحديد زر الاختيار. ولكن إذا قمت بذلك ...

<label for="1">//</label>

وقمت بإضافة هذا إلى الرمز الذي كتبته قبل هذا مباشرة ، ثم إذا قمت بالنقر فوق الملصق الثاني ، فسيتم أيضًا تحديد الراديو.





radio-button