Radio Felder untereinader

[Bernd]

Hallo,

wie würdet ihr vier Radio Felder untereinander bringen?

<div>
	<label for="usz_datum">Was</label>

	<input 
		name="wasBeginn" 
		type="radio" 
		value="Arbeitszeit" 
		checked="checked" />
	<span>Arbeitszeit</span>

	<input 
		name="wasBeginn" 
		type="radio" 
		value="Urlaub" />
	<span>Urlaub</span>

	<input 
		name="wasBeginn" 
		type="radio" 
		value="Krank" />
	<span>Krank</span>

	<input 
		name="wasBeginn" 
		type="radio" 
		value="Überstundenabbau" />
	<span>Überstundenabbau</span>
</div>

Mit Grid oder Felx lässt sich da nichts machen? Also doch alles in ein extra DIV packen oder lieber mit <br> arbeiten?

[Gunnar Bittersmann]

@@Bernd

<div>
	<label for="usz_datum">Was</label>

	<input 
		name="wasBeginn" 
		type="radio" 
		value="Arbeitszeit" 
		checked="checked" />
	<span>Arbeitszeit</span>

	<input 
		name="wasBeginn" 
		type="radio" 
		value="Urlaub" />
	<span>Urlaub</span>

	<input 
		name="wasBeginn" 
		type="radio" 
		value="Krank" />
	<span>Krank</span>

	<input 
		name="wasBeginn" 
		type="radio" 
		value="Überstundenabbau" />
	<span>Überstundenabbau</span>
</div>

Bevor’s ans CSS geht, ist zunächst das HTML zu berichtigen:

• div → fieldset
• label → legend
• span → label

LLAP 🖖

[Bernd]

Das war hier nicht die Frage! Das HTML wird so von Wordpres gerändert, da habe ich kaum Einfluss drauf ohne ein Plugin komplett umschreiben zu müssen.

[Gunnar Bittersmann]

@@Bernd

Das war hier nicht die Frage! Das HTML wird so von Wordpres gerändert, da habe ich kaum Einfluss drauf ohne ein Plugin komplett umschreiben zu müssen.

Du solltest inzwischen wissen, dass Bedienbarkeit hier immer die Frage ist. Also ja, dem Wordpress beibringen, richtiges HTML zu generieren.

LLAP 🖖

[Bernd]

Ein Wordpress Plugin mal eben umprogrammieren? Alles klar!

[Gunnar Bittersmann]

@@Bernd

Ein Wordpress Plugin mal eben umprogrammieren? Alles klar!

Ja. Und dann ein Pull-Request an den Ersteller des Plugins.

LLAP 🖖

[beatovich]

hallo

Hallo,

wie würdet ihr vier Radio Felder untereinander bringen?

<div>
	<label for="usz_datum">Was</label>

	<input 
		name="wasBeginn" 
		type="radio" 
		value="Arbeitszeit" 
		checked="checked" />
	<span>Arbeitszeit</span>

	<input 
		name="wasBeginn" 
		type="radio" 
		value="Urlaub" />
	<span>Urlaub</span>

	<input 
		name="wasBeginn" 
		type="radio" 
		value="Krank" />
	<span>Krank</span>

	<input 
		name="wasBeginn" 
		type="radio" 
		value="Überstundenabbau" />
	<span>Überstundenabbau</span>
</div>

Mit Grid oder Felx lässt sich da nichts machen? Also doch alles in ein extra DIV packen oder lieber mit <br> arbeiten?

Erst mal mit label ausstatten.

Bei <label><input> Labeltext </label> bekommst du die notwendige Gruppierung geschenkt.

[Bernd]

Du siehst aber schon dass ein Label da ist?

[beatovich]

hallo

Du siehst aber schon dass ein Label da ist?

Ein sinnfreies dazu, da dieses mit keinem Feld assoziiert ist. Gunnar hat dir schon gesagt, dass für diese Absicht fieldset/legend vorgesehen ist.

[Auge]

Hallo

Du siehst aber schon dass ein Label da ist?

Es ist da, wo es nicht hingehört. Dein label ist ein legend und deine spans sind die Elemente, die labels sein sollen. Aber das hatte Gunnar schon erläutert.

Tschö, Auge

[Gunnar Bittersmann]

@@beatovich

Mit Grid oder Felx lässt sich da nichts machen? Also doch alles in ein extra DIV packen oder lieber mit <br> arbeiten?

Erst mal mit label ausstatten.

Label sind notwendig.

Bei <label><input> Labeltext </label> bekommst du die notwendige Gruppierung geschenkt.

Die Gruppierung ist nicht notwendig.

Bei

<fieldset>
	<legend>…</legend>
	<input/>
	<label>…</label>
	<input/>
	<label>…</label>
	<input/>
	<label>…</label>
	<input/>
	<label>…</label>
</fieldset>

kann man auch ein zweispaltiges Grid aufspannen und die input in die 1. und die label in die 2. Spalte plazieren.

LLAP 🖖

[beatovich]

hallo

Die Gruppierung ist nicht notwendig.

Im Falle von flex wäre sie ratsam. Kommt halt auf die Absicht an.

[Gunnar Bittersmann]

@@beatovich

Die Gruppierung ist nicht notwendig.

Im Falle von flex wäre sie ratsam.

Aber flex wäre nicht ratsam, wenn es darum geht, in 2 Dimensionen zu layouten.

LLAP 🖖

[ursus contionabundo]

	<input 
    type="radio" 
    name="wasBeginn"
    id="wasBeginn"
    value="Arbeitszeit" 
    checked="checked"
  /><label for="wasBeginn">Arbeitszeit</label>

was das erste Label soll ist unklar:

	<label for="usz_datum">Was</label>

Wolltest Du ein fieldset? Die Dinger sind ziemlich interessant.

Dann:

<form>
  <fieldset>
    <legend>Was</legend>

	  <input 
      type="radio" 
      name="wasBeginn"
      id="wasBeginn"
      value="Arbeitszeit" 
      checked="checked"
   /><label for="wasBeginn">Arbeitszeit</label>

<!-- [...] -->
  </fieldset>
</form>

Der Rest ist CSS. Aber ein <br> würde es bis zu Gunnars Aufschrei auch tun.

[Bernd]

Ok, dann nehme ich dafür <br>

[Gunnar Bittersmann]

@@Bernd

Ok, dann nehme ich dafür <br>

??

Du kannst br einfügen (also das Markup ändern), aber nicht span zu label machen (also das Markup ändern)?

LLAP 🖖

[Bernd]

Du kannst br einfügen (also das Markup ändern), aber nicht span zu label machen (also das Markup ändern)?

ich kann das <br> über ein leeres HTML Element einfügen und sagen der Inhalt soll ein <br> sein.

[ursus contionabundo]

<form>
  <fieldset>
    <legend>Was</legend>

	  <span class="radioItem">
      <input 
        type="radio" 
        name="wasBeginn"
        id="wasBeginn"
        value="Arbeitszeit" 
        checked="checked"
     /><label for="wasBeginn">Arbeitszeit</label>
   </span>

<!-- [...] -->
  </fieldset>
</form>

Jetzt Kannst Du im CSS span.radioItem { display: block; } setzen. Und wenn es Dir irgendwann anders gefällt kannst Du alles mit css zur Liste, Tabelle oder sonstwas machen.

[Bernd]

Dein Aufbau weicht jetzt sehr von diesem ab:
https://forum.selfhtml.org/self/2019/jan/21/radio-felder-untereinader/1741197#m1741197

Deine gefällt mir besser, da habe ich nicht so viele legend-Felder. Aber wie gesagt ich kann den Code derzeit nicht so einfach ändern ohne ein WP Plugin umzuschreiben.

[ursus contionabundo]

ich kann den Code derzeit nicht so einfach ändern ohne ein WP Plugin umzuschreiben.

WP. Oh Gott! Du Armer.

[Bernd]

Warum "Oh Gott"? Findest du Wordpress nicht gut?

[ursus contionabundo]

Warum "Oh Gott"? Findest du Wordpress nicht gut?

Naja. Mal abgesehen von den Sicherheitsproblemen: Ich schreib mir lieber ein effektives und schlankes "CMS" für genau die Aufgaben, die auch anstehen. Damit bin ich schneller fertig als wenn ich mit Wordpress, Plugins und Templates rumfummeln würde und auch noch nachträglich für die Sicherheit dieser wüsten Skriptsammlung sorgen sollte.

[klawischnigg]

Hi there,

Warum "Oh Gott"? Findest du Wordpress nicht gut?

Wordpress ist für das Web was deutscher Schlager und amerikanischer Pop für die Musik sind - ein billiges Kotzmittel…

[Gunnar Bittersmann]

@@ursus contionabundo

<form>
  <fieldset>
    <legend>Was</legend>

	  <span class="radioItem">
      <input 
        type="radio" 
        name="wasBeginn"
        id="wasBeginn"
        value="Arbeitszeit" 
        checked="checked"
     /><label for="wasBeginn">Arbeitszeit</label>
   </span>

<!-- [...] -->
  </fieldset>
</form>

Jetzt Kannst Du im CSS span.radioItem { display: block; } setzen.

Und wenn du statt span das passende p nimmst, kannst du dir die Zeile CSS auch sparen.

LLAP 🖖

[ursus contionabundo]

<form>
  <fieldset>
    <legend>Was</legend>

	  <span class="radioItem">
      <input 
        type="radio" 
        name="wasBeginn"
        id="wasBeginn"
        value="Arbeitszeit" 
        checked="checked"
     /><label for="wasBeginn">Arbeitszeit</label>
   </span>

<!-- [...] -->
  </fieldset>
</form>

Jetzt Kannst Du im CSS span.radioItem { display: block; } setzen.

Und wenn du statt span das passende p nimmst, kannst du dir die Zeile CSS auch sparen.

Statt dessen formatiere ich im CSS dann die Absätze(!) in Formularen... Ich kann mich dem (wg. d. Semantik) nicht anschließen. Wenn es schon ein natives Block-Element sein soll, dann <div>.

[Gunnar Bittersmann]

@@ursus contionabundo

Absätze(!) in Formularen... Ich kann mich dem nicht anschließen.

Die HTML-Spec sagt:
“The p element represents a block of content, a paragraph as defined in this specification.” (Hervorhebung von dort)

Click auf paragraph:
“A paragraph is typically a run of phrasing content that forms a block of text with one or more sentences that discuss a particular topic, as in typography, but can also be used for more general thematic grouping.” (Hervorhebung von mir)

Wenn es schon ein natives Block-Element sein soll, dann <div>.

Die Beispiele in §4.10 Forms gruppieren auch mit div. Beides möglich.

LLAP 🖖

[ursus contionabundo]

Beides möglich.

Da hast Du mich missverstanden.

Ich hab nicht gesagt, dass p nicht erlaubt sei. Ich kann mich nur nicht dem anschließen, dass man hier p nehmen möge - weil mir doch das div im Hinblick auf die Semantik so sehr viel besser gefällt.

[beatovich]

hallo

@@ursus contionabundo

Absätze(!) in Formularen... Ich kann mich dem nicht anschließen.

Die HTML-Spec sagt:
“The p element represents a block of content, a paragraph as defined in this specification.” (Hervorhebung von dort)

Click auf paragraph:
“A paragraph is typically a run of phrasing content that forms a block of text with one or more sentences that discuss a particular topic, as in typography, but can also be used for more general thematic grouping.” (Hervorhebung von mir)

Ein p Element stellt die explizite Vernichtung des Flowkontextes dar, bis ein Element wieder diesen Flow-Context erfordert. Explizit deshalb, als diese Vernichtung oft implizit ohne ein im DOM sichtbarem p-Element vorgenommen wird.

Eine Beziehung zu Paragraph besteht bestenfalls im historischen Sinne.

[Robert B.]

Moin,

das Anliegen ginge doch noch billiger:

<form>
  <fieldset>
    <legend>Was</legend>

	  <label>
      <input 
        type="radio" 
        name="wasBeginn"
        id="wasBeginn"
        value="Arbeitszeit" 
        checked="checked"
     />Arbeitszeit</label>

<!-- [...] -->
  </fieldset>
</form>

Und dann eben

label {
    display: block;
}

Viele Grüße
Robert