Workshop – Erstellen eines einfachen, zugänglichen Formulars

In diesem Beispiel wurde das Formular mit Absätzen und Präsentationselementen ausgezeichnet, wie z.B. <br> and <strong>.

<form action="#" method="get">

	   <p>

	      <strong>Persönliche  Details</strong><br>

	      Name:

	      <input type="text" name="details-name" size="15">

	      Telefonnummer:

	      <input type="text" name="details-phone" size="15">

	   </p>

	   <p>

	      <strong>Wählen Sie die gewünschten Broschüren aus</strong><br>

	      <input type="checkbox" name="roses" value="checkbox">

	      Rosen

	      <input type="checkbox" name="daffodils" value="checkbox">

	      Narzissen

	      <input type="checkbox" name="tulips" value="checkbox">

	      Tulpen

	   </p>

	</form>

Schritt 1 - Gruppieren von Informationen mit fieldset und legend

<form action="#" method="get">

	   <fieldset>

	      <strong>Personliche  Details</strong><br>

	      Name:

	      <input type="text" name="details-name" size="15">

	      Telefonnummer:

	      <input type="text" name="details-phone" size="15">

	   </fieldset>

	   <fieldset>

	      <strong>Wählen Sie die gewünschten Broschüren aus</strong><br>

	      <input type="checkbox" name="roses" value="checkbox">

	      <label>Rosen</label> 

	      <input type="checkbox" name="daffodils" value="checkbox">

	      <label>Narzissen</label>

	      <input type="checkbox" name="tulips" value="checkbox">

	      <label>Tulpen</label>

	   </fieldset>

	</form>

Schritt 2 – Gruppen kennzeichnen mit legend

<form action="#" method="get">

	   <fieldset>

	      <legend>Persönliche Details</legend>

	      Name:

	      <input type="text" name="details-name" size="15">

	      Telefonnummer:

	      <input type="text" name="details-phone" size="15">

	   </fieldset>

	   <fieldset>

	      <legend>Wählen Sie die gewünschten Broschüren aus</legend>

	      <input type="checkbox" name="roses" value="checkbox">

	      Rosen

	      <input type="checkbox" name="daffodils" value="checkbox">

	      Narzissen

	      <input type="checkbox" name="tulips" value="checkbox">

	      Tulpen

	   </fieldset>

	</form>

Schritt 3 – eine Beschriftung an ein bestimmtes Formularelement binden mit <label for=…> und id

<form action="#" method="get">

	   <fieldset>

	      <legend>Persönliche Details</legend>

	      <label for="details-name">Name:</label>

	      <input id="details-name" type="text" name="details-name" size="15">

	      <label for="details-phone">Telefonnummer:</label>

	      <input id="details-phone" type="text" name="details-phone" size="15">

	      </fieldset>

	   <fieldset>

	   <legend>Wählen Sie die gewünschten Broschüren aus</legend>

	      <input id="roses" type="checkbox" name="roses" value="checkbox">

	      <label for="roses">Rosen</label>

	      <input id="daffodils" type="checkbox" name="daffodils" value="checkbox">

	      <label for="daffodils">Narzissen</label>

	      <input id="tulips" type="checkbox" name="tulips" value="checkbox">

	      <label for="tulips">Tulpen</label>

	   </fieldset>

	</form>

Schritt 4 – Hinzfügen von title

<form action="#" method="get">

	   <fieldset>

	      <legend>Persönliche Details</legend>

	      <label for="details-name">Name:</label>

	      <input id="details-name" type="text" title="Geben Sie Ihren Namen ein" name="details-name" size="15">

	      <label for="details-phone">Telefonnummer:</label>

	      <input id="details-phone" type="text" title="Geben Sie Ihre Telefonnummer ein" name="details-phone" size="15">

	   </fieldset>

	   <fieldset>

	      <legend>Wählen Sie die gewünschten Broschüren aus</legend>

	      <input id="roses" type="checkbox" title="Broschüre über Rosen" name="roses" value="checkbox">

	      <label for="roses">Rosen</label> 

	      <input id="Narzissen" type="checkbox" title="Broschüre über Narzissen" name="daffodils" value="checkbox">

	      <label for="daffodils">Narzissen</label>

	      <input id="tulips" type="checkbox" title="Broschüre über Tulpen" name="tulips" value="checkbox">

	      <label for="tulips">Tulpen</label>

	   </fieldset>

	</form>

Teil 4 – Accessibility (Zugänglichkeit)

Erstellen eines einfachen, zugänglichen Formulars

Unzugängliche Auszeichnung

Schritt 1 - Gruppieren von Informationen mit `fieldset` und `legend`

Schritt 2 – Gruppen kennzeichnen mit `legend`

Schritt 3 – eine Beschriftung an ein bestimmtes Formularelement binden mit `<label for=…>` und `id`

Schritt 4 – Hinzfügen von `title`

Schritt 5 – Das Aussehen der zugänglichen Elemente anpassen

Teil 4 – Accessibility (Zugänglichkeit)

Erstellen eines einfachen, zugänglichen Formulars

Unzugängliche Auszeichnung

Schritt 1 - Gruppieren von Informationen mit fieldset und legend

Schritt 2 – Gruppen kennzeichnen mit legend

Schritt 3 – eine Beschriftung an ein bestimmtes Formularelement binden mit <label for=…> und id

Schritt 4 – Hinzfügen von title

Schritt 5 – Das Aussehen der zugänglichen Elemente anpassen

Schritt 1 - Gruppieren von Informationen mit `fieldset` und `legend`

Schritt 2 – Gruppen kennzeichnen mit `legend`

Schritt 3 – eine Beschriftung an ein bestimmtes Formularelement binden mit `<label for=…>` und `id`

Schritt 4 – Hinzfügen von `title`