Formulare: Checkbox in Form von Text

[stefft]

Hallo,

ist es möglich, ein Formular zu erstellen, in welchem der Ausfüller Wörter markieren kann, so dass diese ausgewählten Wörter dann z. B. fett geschrieben dargestellt werden?

Beispiel:
------
Bitte wählen Sie eines der folgenden Wörter aus:

dick, dünn, schlank, groß, klein
------

Der User wählt "dünn" und "groß" aus, indem er auf diese Wörter klickt. Statt einem Haken in einer Checkbox wird das Wort für den User mit Fettschrift markiert.

Nach der Auswahl sieht das dann für den User so aus (bevor er das Formular abschickt):
------
Bitte wählen Sie eines der folgenden Wörter aus:

dick, <b>dünn</b>, schlank, <b>groß</b>, klein
------

stefft

[Gunnar Bittersmann]

@@stefft:

nuqneH

ist es möglich, ein Formular zu erstellen, in welchem der Ausfüller Wörter markieren kann, so dass diese ausgewählten Wörter dann z. B. fett geschrieben dargestellt werden?

Ja.

Markup:

<form action="">  
  <ul>  
    <li><input type="checkbox" id="dick" value="dick"/><label for="dick">dick</label></li>  
    <li><input type="checkbox" id="duenn" value="duenn"/><label for="duenn">dünn</label></li>  
    <li><input type="checkbox" id="schlank" value="schlank"/><label for="schlank">schlank</label></li>  
    <li><input type="checkbox" id="gross" value="gross"/><label for="gross">groß</label></li>  
    <li><input type="checkbox" id="klein" value="klein"/><label for="klein">klein</label></li>  
  </ul>  
</form>

Stylesheet:

form ul  
{  
  list-style: none;  
  padding: 0;  
}  
  
form li  
{  
  display: inline;  
}  
  
form li:not(:last-child)::after  
{  
  content: ", ";  
}  
  
input[type="checkbox"]  
{  
  display: none;  
}  
  
:checked+label  
{  
  font-weight: bold;  
}

Qapla'

PS: Viel Spaß mit IE!

[stefft]

Hallo Gunnar,

vielen Dank! Wie ich jedoch schon bei deinem PS befürchtet habe, funktioniert diese Methode nicht mit dem IE. Mit dem Firefox habe ich sie erfolgreich getestet.

Gibt es eine Möglichkeit, eine derartige Funktion auch auf dem IE zum Laufen zu bringen?

stefft

[ChrisB]

Hi,

Gibt es eine Möglichkeit, eine derartige Funktion auch auf dem IE zum Laufen zu bringen?

Ja, mittels JavaScript.

Checkboxen per CSS ausblenden, Klick auf die Labels abfangen und Aussehen entsprechend des Zustandes anpassen.

MfG ChrisB

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Checkboxen per CSS ausblenden

Dies aber nur bei aktiviertem JavaScript*, damit das Formular auch ohne JavaScript noch bedienbar ist.

Qapla'

* Javascript mehrstufig zünden. In: [PERFORMANCE-BP2]

[stefft]

Hallo Gunnar,
hallo Chris,

danke für eure bisherige Hilfe, ich weiß nun mehr als zuvor.

Meine JS-Kenntnisse sind jedoch sehr gering. Wenn der Programmieraufwand nicht zu hoch ist: Könnt ihr mir den JS-Code hier in diesen Thread hineinschreiben?

stefft

[ChrisB]

Hi,

Meine JS-Kenntnisse sind jedoch sehr gering.

Daran kannst du ja arbeiten.

Wenn der Programmieraufwand nicht zu hoch ist: Könnt ihr mir den JS-Code hier in diesen Thread hineinschreiben?

Nein - unabhängig vom Aufwand.
Wir unterstützen hier beim Selbermachen - aber wir nehmen nicht die komplette Arbeit ab.

MfG ChrisB

[stefft]

Das Javascript habe ich jetzt geschrieben. Die Labels werden entsprechend - wie gewünscht - markiert.

<style type="text/css">  
<!--  
label.highlight {font-weight: bold;}  
input[type="checkbox"]  
{  
  position: relative; left: -10000px;  
}  
-->  
</style>

  
<label for="box1">Box1<input type="checkbox" name="boxen[]" value="box1" id="box1" onclick="this.parentNode.className = this.checked ? 'highlight' : ''" /></label>

Das Problem, das Gunnar schon beschrieben hat, nämlich dass der IE nicht auf den Klick auf ein Label reagiert, sobald die Checkbox ausgeblendet wird, habe ich ebenso berücksichtigt und die ebenfalls von ihm vorgeschlagene Version mit der Verschiebung der Checkboxen um -10000px verwendet.

Hierbei kommt es nun zu einem Problem:

Einleitung: Ich habe über 50 Checkboxen/Labels. Diese Checkboxen/Labels sind mit schlichtem Komma hintereinander aufgereiht. Ich will hier keine Tabelle verwenden, da dadurch die Anzahl der Wörter pro Zeile fix würde - und das will ich nicht. Die Anzahl soll sich nach der Größe des Browserfensters richten.

Problem: Durch die Verschiebung verschwinden die Checkboxen zwar, der Abstand zwischen den Wörtern/Labels, den sie zuvor eingenommen haben, bleibt jedoch bestehen. Ich vermute, dass man hier nichts machen kann, frage jedoch trotzdem: Kann man hier was machen?

[ChrisB]

Hi,

Das Problem, das Gunnar schon beschrieben hat, nämlich dass der IE nicht auf den Klick auf ein Label reagiert, sobald die Checkbox ausgeblendet wird, habe ich ebenso berücksichtigt

Das betrifft ja „nur“ die Änderung des Status der Checkbox - auf den Klick auf das Label kann man sehr wohl reagieren.

Problem: Durch die Verschiebung verschwinden die Checkboxen zwar, der Abstand zwischen den Wörtern/Labels, den sie zuvor eingenommen haben, bleibt jedoch bestehen. Ich vermute, dass man hier nichts machen kann, frage jedoch trotzdem: Kann man hier was machen?

Du könntest es mit absoluter Positionierung statt mit relativer versuchen.
Wenn damit der IE die Checkboxen auch nicht entsprechend umschalten will - dann könnte man das ja auch gleich per JavaScript machen, wenn auf das Label geklickt wird. (Dabei muss man allerdings aufpassen, dass sich keine Nebenwirkungen der Art einstellen, dass man erst per JS den Status ändert, und dann der Browser bei der weiteren Verarbeitung des Events ihn anschliessend wieder ins Gegenteil umgkehrt. Verhindern des Event-Bubblings wäre hier also das mindeste, sowie ausführliches Testen auch in anderen Browsern und -Versionen.)

MfG ChrisB

[stefft]

Danke Chris,
danke Gunnar!

Die Position auf "absolute" zu setzen, hat gereicht und erfüllt seinen Zweck besser als ein negativer Margin-Left-Wert: ich habe die Kommata nicht im Label mit drin, da diese ja nicht fett werden sollen - somit befinden sich bei einem neg. ML-Wert die Kommata inmitten der Wörter. Wenn man die Boxenverschiebung nicht relativ, sondern absolut wählt, verschwindet der Abstand und das Problem mit den "übergangenen" Kommata tritt nicht auf.

Ich habe nur noch eine Frage: Warum verschwindet bei "absolute" der Abstand und bei "relative" (ohne den Einsatz eines neg. ML-Wertes) nicht?

[Gunnar Bittersmann]

@@stefft:

nuqneH

Die Position auf "absolute" zu setzen, hat gereicht und erfüllt seinen Zweck besser als ein negativer Margin-Left-Wert

Stimmt.

Ich habe nur noch eine Frage: Warum verschwindet bei "absolute" der Abstand und bei "relative" (ohne den Einsatz eines neg. ML-Wertes) nicht?

„Im Modell der absoluten Positionierung wird eine Box []… völlig aus dem normalen Fluss entfernt (sie hat keinen Einfluss auf spätere gleichrangige Elemente)“ [CSS2 §9.6]

„Mit absolute oder fixed positionierte Elemente werden aus dem normalen Elementfluss entfernt und haben damit keinen Einfluss auf nachfolgende Elemente.“ [http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=SELFHTML]

Qapla'

[stefft]

Danke für die Info!

Kann man sich das dann bei der relativen Positionierung so vorstellen, dass der Raum, den das Element am urspr. Platz eingenommen hat, nicht entfernt wird, damit der Browser die relative Verschiebung überhaupt berechnen kann?

[Gunnar Bittersmann]

@@stefft:

nuqneH

Ich vermute, dass man hier nichts machen kann, frage jedoch trotzdem:

Gut, dass du fragst. Deine Vermutung ist nicht zutreffend.

Kann man hier was machen?

Ja: negativer 'margin-left' für 'label'.

Qapla'

[Gunnar Bittersmann]

@@stefft:

nuqneH

Wie ich jedoch schon bei deinem PS befürchtet habe, funktioniert diese Methode nicht mit dem IE.

Das erste Problem ist, dass IE nicht auf Clicks aufs Label reagiert, wenn die Checkbox per 'display: none' ausgeblendet ist. Dasselbe bei 'visibility: hidden'. 'opacity: 0' versteckt die Checkbox nicht; 'position: relative; left: -10000px' tut es.

Allerdings versteht IE (auch in der 8er Version) noch nicht die :checked-Pseudoklasse. Bye bye CSS.

Gibt es eine Möglichkeit, eine derartige Funktion auch auf dem IE zum Laufen zu bringen?

JavaScript.

Aber warum willst du das eigentlich? Bei Checkboxen ist dem Nutzer sofort der Zweck und der gegenwärtige Status klar. Deine anders gestalteten Formularelemente wären nicht intuitiv bedienbar.

Qapla'