HTML / CSS - Praxistutorial 3 - Kenntnisse

1. Die Abschnitte

2. Der Codeabschnitt


<fieldset>
  <legend>Kenntnisse</legend>
</fieldset>

3. Sprachen

Hier soll unser potentieller Mitarbeiter angeben, in welche der folgenden Sprachen er sich auskennt. Man könnte das zwar auch mit radio-Buttons machen, wir nehmen aber mal ein <select>-Feld dafür. Und da soll es die Möglichkeit geben, mehrere Optionen auszuwählen.


<p>
  <label for="sprache">Sprachen</label>
  <select name="sprache[]" id="sprache" multiple="multiple" size="8">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="javascript">JavaScript</option>
    <option value="sql">SQL</option>
    <option value="php">PHP</option>          
    <option value="ruby">Ruby</option>          
    <option value="python">Python</option>          
    <option value="java">Java</option>          
  </select>
</p>

Erläuterung

Hier arbeite ich wieder mit der Absatz-Variante und packe nicht, wie im vorherigen Abschnitt, alles komplett in das <label>-Tag. Warum? Nun aus Erfahrung. Ich hatte mal mit Uralt-Code zu kämpfen, wo das gemacht worden ist. Und bin dann tierisch auf die Fresse gefallen, als ich die alten Layout-Tabellen ersetzt habe durch modernes HTML. Denn leider macht da der Firefox je nach Version einige Zicken, wenn es um die Formatierung mit CSS geht. Daher solltet ihr euch das wirklich merken. Setzt <select>-Elemente nicht in ein <label>. Das kann böse enden.

Mehrfachauswahl

Dies geschieht mit dem Attribut multiple="multiple". Dann kann man, wenn man "Strg" gedrückt hält, beim Klick auf eine Option mehrere auswählen. Die Angabe size benötigen wir, um die Anzahl der sichtbaren Optionen anzugeben, in diesem Fall also alle acht. Das machen wir deswegen, weil sonst als standardmäßig in allen Browsern nur vier Elemente sichtbar wären und man scrollen musste. nd das wäre nicht sehr benutzerfreundlich.

`name="sprache[]"`

Dieses seltsam anmutende Konstrukt benötigt man später, um das Formular per PHP auszuwerten. Denn wenn man ein name="sprache" angibt, so landet nur ein Wert beim PHP-Script, nämlich der letzte markierte. Mit obiger Variante dagegen erhält man alle ausgewählten Optionen in einem Array, also zum Beispiel


[sprache] => Array
(
    [0] => html
    [1] => sql
    [2] => python
)

4. Betriebssysteme

Hier gehen wir genau so vor wie bei den Sprachen. Nur unterteilen wir die Betriebssysteme zusätzlich in Hauptkategorien.


<p>
  <label for="os">Betriebssysteme</label>
  <select name="os[]" id="os" multiple="multiple" size="8">
    <optgroup label="Windows">
      <option value="xp">Windows XP</option>
      <option value="vista">Windows Vista</option>
      <option value="server">Windows Server</option>
      <option value="exchange">Windows Exchange Server</option>
    </optgroup>  
    <optgroup label="Linux">
      <option value="ubuntu">Ubuntu</option>
      <option value="debian">Debian</option>
    </optgroup> 
    <optgroup label="MacOS">
      <option value="osx">MacOS X</option>
      <option value="osx_server">MacOS X Server</option>
    </optgroup> 
  </select>
</p>

Erläuterung

Mit <optgroup> schafft man logische Abschnitte innerhalb eines <select>-Feldes. Das sollte man, wenn möglich, vor allem bei längeren Listen machen. Es erhöht die Übersichtlichkeit. Das Attribut label ist dabei der dargestellte Text. Man kann diese Elemente allerdings nicht per Mausklick markieren. Sie sind von Natur aus inaktiv.

Die Angabe beim <size dient hier rein optischen Zwecken, da man in diesem Fall trotzdem scrollen muss. Denkt euch erst mal nichts Besonderes dabei.

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