Beispiele aus dem Buch (Abschnitt 2.7: Strukturen und Validierung)

Cover: 'Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen' von Jan Eric Hellbusch
"Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen" bei amazon.de

Warning: Undefined variable $anmerkung in /home/lfqdu6ah4gh6/migrated_webspace/www/bfw/lib/php/_ANFANG.php on line 330

Dies ist ein Beispiel aus dem Buch [i;30-80-000-1], das Ende 2004 im dpunkt.Verlag erschienen ist.


Warning: Undefined variable $id_array_ in /home/lfqdu6ah4gh6/migrated_webspace/www/bfw/lib/php/_ANFANG.php on line 341

Warning: Trying to access array offset on value of type null in /home/lfqdu6ah4gh6/migrated_webspace/www/bfw/lib/php/_ANFANG.php on line 341

Verwendung von FIELDSET zur Unterteilung von Informationsblöcken

Das (X)HTML-Element FIELDSET kann in Formularen eingesetzt werden. Zusammen mit dem LEGEND-Element können damit Informationsblöcke strukturell und optisch unterteilt werden, und für den Nutzer handhabbarer gemacht werden.

HTML

<form>
  <fieldset>
    <legend>Anschrift</legend>
    <table>
      <tr>
        <td>
          <label for="strasse">Straße</label>
        </td>
        <td>
          <input type="text" name="strasse" value="Straße eingeben" id="strasse" />
        </td>
        <td>
          <label for="nummer">Nr.</label>
        </td>
        <td>
          <input type="text" name="nummer" value="Nr." id="nummer" />
        </td>
      </tr>
      <tr>
        <td>
          <label for="plz">PLZ</label>
        </td>
        <td>
          <input type="text" name="plz" value="PLZ" id="plz" />
        </td>
        <td>
          <label for="ort">Ort</label>
        </td>
        <td>
          <input type="text" name="ort" value="Wohnort" id="ort" />
        </td>
      </tr>
    </table>
  </fieldset>
  <fieldset>
    <legend>Persönliche Angaben</legend>
    <table>
      <tr>
        <td>
          <label for="alter">Alter</label>
        </td>
        <td>
          <input type="text" name="alter" value="Alter eingeben" id="alter" />
        </td>
        <td>
          <label for="geschlecht">Geschlecht</label>
        </td>
        <td>
          <input type="text" name="geschlecht" value="Geschlecht" id="geschlecht" />
        </td>
      </tr>
      <tr>
        <td>
          <label for="ausbildung">Ausbildung</label>
        </td>
        <td>
          <input type="text" name="ausbildung" value="Ausbildung" id="ausbildung" />
        </td>
        <td>
          <label for="religion">Religion</label>
        </td>
        <td>
          <input type="text" name="religion" value="Religion" id="religion" />
        </td>
      </tr>
    </table>
  </fieldset>
</form>

Browseransicht

Anschrift
Persönliche Angaben