Moderne Alternative zu Radiobutton?

Question

Ich habe ein Formular in dem unter anderem ein Radiobutton vorkommt.

.Mitglied
.Kein Mitglied

Schöner wäre es, wenn ich dort eine Art Taste programmieren könnte
die man anklicken kann.
Und die Taste dann die Beschriftung "Miglied" oder "kein Mitglied" hat.

Weiß jemand wie man soetwas realisiert?

Answer 1

Hallo ClaudiaGauss,

eine direkte Lösung für grafisch umgestaltete RasioButtons kenne ich nicht. Anstelle der RadioButtons kannst du natürlich InputButtons nehmen. Deren grafisches Erscheinungsbild kannst du über CSS (im Beipiel unten MeinButtonAktiv und MeinButtonInaktiv genannt) weitgehend frei gestalten und in Abhängigkeit von aktiv/inaktiv unterschiedlich. Die Buttons werden als Submit definiert und beim Klick auf einen Button kannst du auswerten, welche gedrückt wurde.
Im nachfolgenden Beispiel wird php verwendet, zur Übersichtlichkeit fehlen aber die echo-Statements vor den HTML Ausgaben.
Lege zunächst drei Arrays an:
Das Aray TastenNamen enthält die programminternen Bezeichnungen der Buttons,
Array Tastenbezeichnung enthält die Texte, die auf den Buttons stehen sollen und
Array TasteAktiv hält für jede der Tasten den Zustand aktiv/inaktiv.

Jetzt legst du die Buttons in einer Schleife über $i an:

if (Aktiv[$i])
{<input type='submit' class='MeinButtonAktiv' name='TastenNamen[$i]' value='Tastenbezeichnung[$i]'>}
else
{<input type='submit' class='MeinButtonInaktiv' name='TastenNamen[$i]' value='Tastenbezeichnung[$i]'>}

Zum Einlesen holst du die Tasten über:

$XX = array_keys($_POST['DLStart']);
if (count($XX)!=0)
{
$i = $XX[0];
}

$i gibt die Nummer der gedrückten Taste an.

Für die gegenseitige Verriegelung der Buttons (wie beim RadioButton) musst du den zuletzt gedrückten Knopf im Array TasteAktiv aktiv setzen und alle anderen inaktiv setzen.
Anschließend gibst du die Seite neu aus, wobei der Zustand aktiv/inaktiv der Buttons jeweils im aktuellen Zustand dargestellt wird.

Gruß
computerschrat

Answer 2

Schön, dass du ein Formular hast und wo ist er?
Nehme doch zwei [submit] Buttons.
Packst du es im <fieldset> <span> und dazu eine formular.css dazu, dann kannst du die Buttons im Formular positionieren.
Mit <span> ..... </span> zwei Button nebeneinander, ohne normal untereinander.

<fieldset class="knopf">
<span class="select"><input class="button" type="submit" name="mitg" value="Mitglied" /></span>
<span class="select"><input class="button" type="submit" name="kmitg" value="Kein Mitglied" /></span>
</fieldset>

In der formular.css beispilesweise

.knopf {
margin-left: 50px;
border: hidden;
}

Oder falls Probleme mit den zwei [submit] geben sollte, versuche mit [button] und dann mit "onclick" arbeiten.
Ich verwende den zweiten "Knopf" als [button] um alle Eingabefelder zu löschen.

Suche im Netz nach "Formular zwei submit buttons"

Answer 3

wer googled der findet - also es gibt sehr schöne ansätze mit CSS standart-formular elemente derart zu gestallten, dass diese sehr ansprechend aussehen.

vielleicht gibt es bessere aber z.B. hier
webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953

Beachte unbedingt das jegliche eigenwillige Programmierung auch ein Formular für manche Benutzer unbrauchbar macht z.B. Blinde menschen mit berill-einheit (oder wie das ding heißt)
Personen mit Virenscannern die an der Javascript-enginge vom Browser etwas geändert haben, oder personen die standartmäßig javascript deaktiviert haben wie ich (siehe mal nach "noscript" damit kann man javascript im einzelfall einschalten).

Zudem können Scripte auch in verschiedenen Browsern verschieden gut oder gar nicht funktionieren, das läßt sich natürlich beim Programmieren meistens berücksichtigen - aber wer denkt schon immer an andere.