Aktivieren Sie das Optionsfeld HTML, indem Sie auf die Beschriftung klicken

87

Gibt es bitte eine einfache Möglichkeit, ein Optionsfeld umzuschalten, wenn auf einen Text in der Nähe geklickt wird, ohne ein großes Javascript-Framework in mein kleines PHP-Projekt einzuführen?

Das Webformular sieht folgendermaßen aus:

<html>
<body>
<form method="post">
<p>Mode:<br /> 
<input type="radio" name="mode" value="create"><i>create table</i><br />
<input type="radio" name="mode" value="select" checked>select records (can specify id)<br />
<input type="radio" name="mode" value="insert">insert 1 record (must specify all)<br />
<input type="radio" name="mode" value="delete">delete records (must specify id)<br />
<input type="radio" name="mode" value="drop"><i>drop table</i><br />
</p>
<p>Id: <input type="text" name="id" size=32 maxlength=32 /> (32 hex chars)</p>

<p>Latitude: <input type="text" name="lat" size=10 /> (between -90 and 90)</p>
<p>Longitude: <input type="text" name="lng" size=10 /> (between -90 and 90)</p>
<p>Speed: <input type="text" name="spd" size=10 /> (not negative)</p>
<p><input type="submit" value="OK" /></p>
</form>
</body>
</html>

javascript html radio-button

— Alexander Farber
quelle

164

Sie können Ihre Elemente auch umbrechen, ohne ihnen jeweils eine ID zuzuweisen, da a <label>implizit für die darin enthaltene Eingabe gilt:

<label>
   <input type="radio" name="mode" value="create">
   <i>create table</i>
</label>

— Nick Craver
quelle

4

Dies erschwert das Stylen des Etiketts und erfordert, dass Sie Ihren Text in noch mehr Elemente einschließen.

— Soviut

2

Ja, aber wenn Sie nicht stylen, ist es einfacher, die gewünschte Funktionalität zu erhalten. Ich mag es nicht, zusätzliche ID- und "for" -Attribute hinzufügen zu müssen.

— Dr. C. Hilarius

4

+1 IDs können sehr böse sein, also vermeiden Sie sie am besten als allgemeine Regel

— Chris Stephens

Das Wickeln ist eine überlegene Lösung gegenüber dem Verwenden idund forohne Wickeln. Der Grund dafür ist, dass nichts passiert, wenn das Etikett einen großen Rand hat und der Benutzer zufällig in den Sweet Spot zwischen dem Kontrollkästchen und dem Etikett klickt (wie dies am wahrscheinlichsten der Fall ist). Geige hier: jsfiddle.net/v157ctja/5

— Marcus Junius Brutus

70

Sie können <label>Elemente verwenden, die genau dafür ausgelegt sind:

<input type="radio" id="radCreateMode" name="mode" value="create" />
<label for="radCreateMode"><i>create table</i></label>

— Frédéric Hamidi
quelle

1

@ Alexander, absolut. Nur Safari Version 2 und niedriger unterstützt dies nicht.

— Frédéric Hamidi

3

Anschließend können Sie mit der Auswahl input#radCreateMode:checked ~ labelStile auf das Etikett anwenden. Das Anwenden von Stilen auf Beschriftungen bei Auswahl ist nicht möglich, wenn wir die Eingabe innerhalb der Beschriftung verschachteln.

— Zuhaib Ali

1

Dies sollte wirklich die akzeptierte Antwort sein, es ist der richtige Weg, dies zu tun.

— greco.roamin

1

Ich verwende Safari v 13 und diese Methode hat bei mir nicht funktioniert. Das Optionsfeld konnte deaktiviert, aber nicht ausgewählt werden. Ich musste das Etikett um die Eingabe wickeln: <label> <input> mein Etikettentext </ label>. Beachten Sie, dass ich weder ein <Formular> noch ein <Feldsatz> verwende.

— IAM_AL_X

Stellen Sie sicher, dass der for-Attributwert die richtige ID für die Eingabe ist. Nur für den Fall, dass jemand den gleichen Fehler wie ich gemacht hat.

— Kevin .NET

5

Das Umschließen der Eingabe unter dem Etikett sollte funktionieren.

<label>
    <input type="radio" name="mode" value="create"><i>create table</i>
</label>

— Jason Ching
quelle

1

Ich hatte Probleme, den Wert des Optionsfelds mit dieser Methode zu ermitteln. Eine Alternative besteht darin, einen Trefferbereich zu verwenden, der den anklickbaren Bereich eines Schaltflächen vergrößert .

— Christopher Grigg
quelle