Gunnar Bittersmann: Antwort der Frage bestimmt die URL-Weiterleitung

Beitrag lesen

@@Henry

Das Markup ist kaputt:

<!DOCTYPE html>
<html>
<body>

<h1>Was ist das beste Forum?</h1>  
<form>
<input type="radio" name="antwort" value="2"> SelfHtml
<hr>
<input type="radio" name="antwort" value="1"> Keine Ahnung     
<hr>
<input type="submit">  
</form>
 
</body>
</html>  

Ich repariere das mal:

  • Die Sprache des Seiteninhalts muss angegeben werden (aus Gründen):
<html lang="de">
  • Die verwendete Zeichencodierung sollte angegeben werden.
  • Die Seite braucht einen Titel.
  • Damit die Seite auf Mobilgeräten vernünftig dargestellt wird, bedarf es einer Angabe (Tutorial: Grundgerüst):
  <head>
    <meta charset="utf-8" />
    <title>Was ist das beste Forum?</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  • Alle Formularfelder brauchen eine Beschriftung.
  • Buttons auch.
  • Die Radiobuttons gehören zusammen, nicht getrennt (hr). Wenn bei der visuellen Ausgabe Linien gewünscht sind, ist das Sache von CSS.
  • Für Buttons gibt es das button-Element. type="submit" ist default, kann also auch weggelassen werden.
    <h1>Was ist das beste Forum?</h1>
    <form>
      <label>
        <input type="radio" name="antwort" value="2"> SelfHtml
      </label>
      <label>
        <input type="radio" name="antwort" value="1"> Keine Ahnung
      </label>     
      <button type="submit">Weiter</button>
    </form>

Nun sind zwar die Antworten beschriftet, die Frage allerdings steht nicht dabei, sondern ganz woanders.

  • Radiobutton sind meist in einem fieldset mit zugehöriger Beschriftung gut aufgehoben:
    <h1>Was ist das beste Forum?</h1>
    <form>
      <fieldset>
        <legend>Was ist das beste Forum?</legend>
        <label>
          <input type="radio" name="antwort" value="2"> SelfHtml
        </label>
        <label>
          <input type="radio" name="antwort" value="1"> Keine Ahnung
        </label>     
      </fieldset>
      <button type="submit">Weiter</button>
    </form>

Die Dopplung von „Was ist das beste Forum?“ soll natürlich nicht so sein. Womöglich ist das gar nicht die Seitenüberschrift, sondern <h1>Ein kleines Quiz</h1>?

Ansonsten könnte es vielleicht auch so gehen (ungetestet):

    <h1 id="heading">Was ist das beste Forum?</h1>
    <form>
      <fieldset aria-labelledby="heading">
        <label>
          <input type="radio" name="antwort" value="2"> SelfHtml
        </label>
        <label>
          <input type="radio" name="antwort" value="1"> Keine Ahnung
        </label>     
      </fieldset>
      <button type="submit">Weiter</button>
    </form>

LLAP 🖖

--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

—Marc-Uwe Kling