Bernd: Radio Felder untereinader

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?

  1. @@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:

    • divfieldset
    • labellegend
    • spanlabel

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. 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.

      1. @@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 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. Ein Wordpress Plugin mal eben umprogrammieren? Alles klar!

          1. @@Bernd

            Ein Wordpress Plugin mal eben umprogrammieren? Alles klar!

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

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  2. 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.

    1. Du siehst aber schon dass ein Label da ist?

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

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

        --
        Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
        Kleine freie Männer von Terry Pratchett
    2. @@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 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. hallo

        Die Gruppierung ist nicht notwendig.

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

        1. @@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 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  3. 	<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.

    1. Ok, dann nehme ich dafür <br>

      1. @@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 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. 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.

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

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

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

            WP. Oh Gott! Du Armer.

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

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

              2. 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…

        2. @@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 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. <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>.

            1. @@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 🖖

              --
              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. 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.

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

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