marctrix: Welchen nutzen haben die Bezeichner id und for im HTML

Beitrag lesen

Hej Dieter,

Ich versuche mich in den Anfängen mit Bootstrap.

In der Hoffnung, dass du noch mitliest: aus der folgenden Frage entnehme ich, dass du in HTML auch noch einigermaßen am Anfang stehst.

Daher würde ich Dir nicht raten, Bootstrap zu nutzen. Das Problem: Bootstrap verspricht, dass du zu schnellen Ergebnissen kommst. Die Wahrheit ist aber, dass es Dir das Erlernen von HTML nicht abnimmt. Du musst Bootstrap (seine ganzen Klassen, was die tun und zu welchem Verhalten sie führen), also zusätzlich zu HTML lernen.

Das Problem mit Bootstrap ist nämnlich, dass es sich „nur“ um das Aussehen einer einer Webseite kümmert.

Das eigentliche Dokument, das in HTMl geschrieben wird, muss aber zunächst einmal ordentlich ausgezeichnet werden,. sonst erkauft man sich das hübsche Aussehen nur mit zahlreichen Nachteile. Ein paar davon sind: deine Seiten sind durch Automaten schlecht analysierbar, was unter anderem dazu führt, dass du bei Suchmaschinen so weit unten landest, dass niemand deine Seite imWeb findet, dass Deine Seite für manche Menschen unbedienbar und für alle anderen schlechter als nötig bedienbar sind.

Bootstrap macht Deine Seite auch langsamer, vor allem wenn du nach dem Prinzip arbeitest: „Ich weiß nicht, was ich davon wirklich brauche, also nehme ich erst mal alles.“

An Bootstrap scheiden sich die Geister und mit der neuesten Version kann man ganz ordentliche Seiten erstellen, aber: man muss dafür HTML und Botstrap recht gut kennen!

Ich würde erst mal mit HTML beginnen. Und CSS für das Layout. Alles was Bootstrap kann, kann man auch selber umsetzen. Das zu lernen (z.B. „wie gestalte ich einen Button“ oder „wie ordne ich Elemente auf meiner Seite an“) sind jeweils überschaubare „Päckchen“. Die zu lernen bekommt jeder hin.

Am Ende kannst du dich auch noch über eine selbst gemachte Seite freuen. Der Riesen-Vorteil bei dieser Art zu arbeiten: du weißt genau, was du getan hast und kannst Deine Seite später weiter anpassen. Man hat immer wieder neue Ideen — auch solche, die sich mit Bootstrap nicht oder nur umständlich umsetzen lassen.

Bootstrap hat eigentlich nur einen Vorteil: es spart Menschen, die beruflich Webseiten entwicklen, eine Menge Zeit, weil es immer wiederkehrende Routine-Aufgaben abnimmt.

Das ließe sich auch anders realisieren, aber das führt an dieser Stelle etwas zu weit…

Kann mir bitte jemand sagen für was ich die Bezeichner

for="inputName"

id="inputName"

verwende.

Damit sorgst du dafür, dass die Bezeichnung eines Formulareldes (label) und das Formularfeld selber logisch miteinander verbunden werden. Das ist für viele Dinge nötig. Wenn du das korrekt verwendet hast, kann man beispielsweise auf das label klicken und dadurch den Fokus in das Feld setzen. Besonders praktisch, wenn das Feld eine winzige Checkbox ist. Sicher hast du dich selber auch schon mal über Seiten geärgert, wo man nciht auf „Ich habe die AGBs gelesen und akzeptiert“ klicken kann, sondern statt dessen das winzige Kästchen daneben treffen muss.

Ein anderer toller Einsatzbereich sind Fehlermeldungen. Wenn du irgendwo auf einer Webseite eine Fehlermeldung ausgibst, kannst du diese in ein label mit for-Atrtribut packen. Wenn der Benutzer dann so etwas wie z.B. „Das Feld Nachname ist nicht korrekt ausgefüllt“ anklickt, landet er direkt im betreffenden Feld und kann seine Angaben sofort korrigieren. Das funktioniert weil die Fehlermeldung und das input logisch miteinander verknüpft sind und diese Verknüpfung kann von Software (z.B. der Browser) erkannt werden.

Oder kann ich dies vernachlässigen.

Wenn du das tust, funktionieren Deine Webseiten für viele Menschen deutlich schlechter und ist für andere gar nicht mehr bedienbar.

<div class="form-group">
    <label for="inputName" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-10">
    	<input class="form-control" id="inputName" name="name" type="text" value="<?php echo htmlentities($user['name']); ?>" required>
    </div>
</div>

Bootstrap benötigt all die vielen div-elemente und klassen dafür, damit alle Möglichkeiten, die Bootstrap für die Positionierung von Beschriftung und Feld existieren auch angewendet werden können. Für ein konkretes Projekt sind (nicht immer, aber) meist viel weniger Elemente nötig.

Bootstrap macht deine Webseite unnötig kompliziert und aufgebläht. — Es sei denn, du schmeißt wirklich konsequent alles Überflüssige raus, was leider selten gemacht wird…

Marc

0 83

Welchen nutzen haben die Bezeichner id und for im HTML

Dieter
  • html
  1. 1
    dedlfix
    1. 0
      Gunnar Bittersmann
      1. 1
        beatovich
        1. 0
          Gunnar Bittersmann
      2. 0
        dedlfix
        1. 0
          Gunnar Bittersmann
          1. 0
            dedlfix
            1. 0
              Gunnar Bittersmann
              1. 0
                dedlfix
                1. 0
                  Gunnar Bittersmann
                  1. 0
                    dedlfix
                    1. 0
                      Gunnar Bittersmann
                      1. 0
                        dedlfix
                        1. 1
                          Gunnar Bittersmann
        2. 0
          marctrix
          1. 0
            Gunnar Bittersmann
    2. 0
      marctrix
  2. 0
    Gunnar Bittersmann
  3. 0
    beatovich
    1. 1
      Gunnar Bittersmann
      1. 0
        beatovich
        1. 1
          Gunnar Bittersmann
          1. 0
            beatovich
        2. 0
          marctrix
          1. 0
            dedlfix
            1. 1
              Gunnar Bittersmann
              • barrierefreiheit
              1. 0
                dedlfix
                1. 0
                  marctrix
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      marctrix
                      • menschelei
            2. 0
              marctrix
              1. 1
                dedlfix
                1. 1
                  marctrix
                  1. 0

                    bootstrap

                    beatovich
                    • html
                    • programmiertechnik
                    1. 0
                      Mitleser
                    2. 0
                      Matthias Apsel
                      • bootstrap
                      • selfhtml-wiki
                    3. 2
                      dedlfix
                      1. 1
                        Gunnar Bittersmann
                        • bootstrap
                        • css
                        • html
                        1. 1
                          marctrix
                          1. 2
                            at
                            1. 3
                              Henry
                              1. 2
                                dedlfix
                                1. 0
                                  marctrix
                            2. 0
                              marctrix
                              1. 0
                                dedlfix
                                1. 0
                                  marctrix
                                  1. 1
                                    dedlfix
                            3. 1
                              Gunnar Bittersmann
                              • bootstrap
                  2. 0
                    dedlfix
                    1. 0
                      marctrix
                      1. 0
                        Matthias Apsel
                        1. 0
                          marctrix
                          1. 0
                            dedlfix
                            1. 0
                              Gunnar Bittersmann
                              1. 0
                                dedlfix
                                1. 0
                                  Gunnar Bittersmann
                      2. 1
                        dedlfix
                        1. 0
                          marctrix
                          1. 0
                            dedlfix
                        2. -1
                          Gunnar Bittersmann
                          1. 1
                            dedlfix
                            1. 0
                              Gunnar Bittersmann
                              1. 1
                                dedlfix
                                1. 1
                                  Gunnar Bittersmann
                                  1. 0
                                    Henry
                                    1. 1
                                      Gunnar Bittersmann
                                      • aria
                                      • html
                                      1. 0
                                        Henry
                                        • aria
                                        • barrierefreiheit
                                        • semantik
                                        1. 3
                                          Gunnar Bittersmann
                                          • html
  4. 3
    marctrix
    • bootstrap
    • html
    1. 1
      Gunnar Bittersmann
      • bootstrap
      1. 0
        marctrix
        1. 1
          Gunnar Bittersmann
          1. 0
            Henry
            • bootstrap
            • design
            1. 0
              Gunnar Bittersmann
              • design
              1. 0
                Henry
                • design
                • meinung
                1. 0
                  beatovich
                  1. 0
                    Henry
                    1. 0
                      beatovich
                      1. 0
                        Henry
                        1. -1
                          beatovich
                          1. 1
                            Henry
      2. 0
        marctrix