HTML / CSS - Praxistutorial 3 - Anstellung

1. Die Abschnitte

2. Der Codeabschnitt


<fieldset>
  <legend>Anstellung</legend>      
</fieldset>

Der folgende Code wird nun wie gehabt eingefügt. Aber das macht ihr ab sofort selber.

3. Gehaltswunsch

Hier nehmen wir ein einfaches <select>-Feld für die Auswahl. Auch unterteilen wir die einzelnen Punkte wieder mit einem Absatz. Warum erfährt ihr später.


<p>
  <label for="gehalt">Gehaltswunsch</label>
  <select name="gehalt" id="gehalt">
    <option value="1000">bis 1000</option>
    <option value="1500">bis 1500</option>
    <option value="2500" selected="selected">bis 2500</option>
    <option value="3000">bis 3000</option>
    <option value="3500">bis 3500</option>
  </select>
</p>

Erläuterung

Hier gibt es eigentlich nicht viel zu erzählen. <label> wie gehabt und die id setzen wir ins <select>! Dazu legen wir die 2500 noch als Vorauswahl fest (selected="selected"). Das mache ich aber nur, um euch zu zeigen, was passiert, wenn man auf das Label "Gehaltswunsch" klickt. Nun, nicht viel. Das Feld wird einfach fokussiert, also so, wie wenn man mit der Tabulatortaste die Formularelemente ansteuert. Dementsprechend klappt das <select>-Feld auch nicht aus.

4. Art der Anstellung

Hier wollen wir dem geneigten Bewerber die Möglichkeit geben, sein gewünschtes Arbeitsverhältnis anzugeben. Da wir das aber mittels radio-Buttons machen, gibt es eine Besonderheit. Denn in dem Fall muss man für jedes(!) ein eigenes <label> setzen. Das bedeutet für den Code das hier.


<p>
  <span>Art der Anstellung</span>
  <input type="radio" name="anstellung" id="praktikum" value="1" /> 
  <label for="praktikum">Praktikum</label>
  <input type="radio" name="anstellung" id="freelancer" value="2" /> 
  <label for="freelancer">Freelancer</label>
  <input type="radio" name="anstellung" id="fest" value="3" /> 
  <label for="fest">Fest</label>       
</p>

Erläuterung

Die Beschreibung für die einzelnen Elemente, die wir bisher schön in ein <label> packen konnten, müssen wir diesmal anderweitig unterbringen. Ich habe hier mal ein <span> genommen, weil mir ehrlich gesagt, nichts anderes eingefallen ist.

Ansonsten hat sich auch die Reihenfolge geändert. Es kommt zuerst das Formularelement und dann erst das Label. Trotzdem bleibt die Zuordnung über for und id erhalten. Klickt ruhig mal auf die Labels drauf. Dann seht ihr auch, dass in diesem Fall der jeweilige radio-Button als gesetzt (checked) markiert wird.

Folgerung

Wenn man sauber mit for und id arbeitet, so könnte man theoretisch das jeweilige Label und Formularelement an weit von einander entfernten Punkten im Code unterbringen und trotzdem bliebe die Funktionalität erhalten. Auch wenn das ziemlich hirnrissig wäre.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt