Kliknięcie tekstu, aby wybrać odpowiedni przycisk opcji

87

Tworzę aplikację internetową z quizami przy użyciu PHP. Każde pytanie składa się z osobnego <label>i ma 4 możliwe wybory, za pomocą radio buttonsktórych użytkownik może wybrać swoją odpowiedź. Bieżący kod HTML dla pojedynczego pytania wygląda następująco:

<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>

Chciałbym, aby użytkownik miał możliwość kliknięcia tekstu związanego z przyciskiem opcji. W tej chwili użytkownik może kliknąć tylko przycisk opcji - co uważam za dość uciążliwe zadanie.

Przeczytałem Nie można wybrać konkretnego przycisku opcji, klikając tekst wyboru, a sugestia wskazuje na dopasowanie atrybutów fori idtagów. Zrobiłem to i nadal nie działa.

Moje pytanie brzmi: chciałbym móc kliknąć tekst <input type="radio">obiektu, a nie tylko wybrać sam przycisk opcji. Wiem, że czytałem o tym wcześniej, ale nie mogę znaleźć żadnego rozwiązania mojego problemu. Każda pomoc lub sugestie są bardzo mile widziane!

html css forms input radio-button Obfitość 10
źródło

Odpowiedzi:

176

W swoim kodzie masz etykietę na samym formularzu. Chcesz umieścić etykiety na każdej indywidualnej grupie radiowej, jak pokazano poniżej.

<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>
Rozwiń fragment

Należy pamiętać, że dwa elementy nigdy nie powinny mieć tego samego identyfikatora. nameAtrybut jest używany tak, że przyciski radiowe funkcjonować jako grupa i pozwolić tylko jeden wybór w danym momencie.

Nathan
źródło
7
Doskonale proste. Uwielbiam, gdy prawie ukryta cecha tagów zostaje ponownie odkryta
Spragniona małpa,
38

Wydaje się, że pomiędzy przyciskiem radiowym a etykietą jest trochę nie do kliknięcia odstępu, jeśli jest to zgodne z odpowiedzią Nathana . Oto jak sprawić, by dołączyli bezproblemowo (zobacz ten artykuł ):

<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>
user21820
źródło
2
Wolę tę odpowiedź. Ale czy na pewno w tym podejściu potrzebujesz atrybutów „za”?
Piddu
@Piddu: Myślę, że masz rację, więc zaktualizowałem moją odpowiedź. Dzięki!
user21820
Inną opcją, aby uniknąć dodatkowego odstępu między przyciskiem radiowym a etykietą, jest po prostu nie umieszczanie go tam <input id="349" type="radio" value="1" name="question1"><label for="349"> Abe</label>(bez spacji ani znaków nowej linii między tagami)
Arye Eidelman
1
Właśnie przetestowałem swój sposób w chrome i firefox i stwierdziłem, że zmniejsza to nieklikalną przestrzeń z 7 do 3 pikseli, usuwając znak spacji. zobacz, dlaczego-istnieje-niewytłumaczalny-luka-między-tymi-blokowymi-elementami-div . trzy pozostałe piksele to domyślny prawy margines na przycisku opcji margin: 3px 3px 0 5px;(jest bardziej zauważalny w przeglądarce Firefox, ponieważ domyślnie występuje efekt najechania kursorem), który można naprawić za pomocą CSS, usuwając margines i zastępując go dopełnieniem.
Arye Eidelman
1
@AryeDovEidelman: Rozumiem, dziękuję za zbadanie! Chociaż dla uproszczenia będę trzymał się zamknięcia całości w etykiecie. =)
user21820
1

Etykieta powinna znajdować się wokół każdej odpowiedzi, np. Abe, Andrew, itp. I musi być niepowtarzalna dla każdej z nich.

endyourif
źródło
1

Zagnieżdżenie tagu wejściowego w tagu etykiety zapewnia, że ​​etykieta pojawi się tuż obok przycisku opcji. Przy sugerowanych wcześniejszych podejściach możesz umieścić znacznik etykiety w dowolnym miejscu w pliku html, a po kliknięciu wybierze powiązany przycisk opcji. Sprawdź to:

<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>
Rozwiń fragment

Zrobienie tego w ten sposób eliminuje zamiast tego tę wadę:

<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>
Rozwiń fragment

Neo
źródło
0

Możesz to zrobić w ten sposób

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

Więc jeśli klikniesz tekst lub etykietę, wybierze przycisk opcji. Ale jeśli to zrobisz ...

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

a dodasz to do tego co napisałem w kodzie tuż przed tym to jak klikniesz na drugą etykietę to też wybierze radio.

JuicY_Burrito
źródło
0

Robię to od lat, ale żadne z nich nie działa dla mnie przy użyciu zmiennych.

    echo "<input type='radio' name='student' id='$studentID' value='$studentID'>
        <label for='$studentID'>$fname</label> $lname<br />\n";
    echo "<input type='radio' name='student' id='$studentID' value='$studentID'>
        <label for='$studentID'>$fname $lname</label><br />\n";

a oto źródło:

        <input type='radio' name='student' id='986875' value='986875'>
        <label for='986875'>John</label> Brown<br />
Gymus
źródło