HTML / CSS - Praxistutorial 3 - Kenntnisse
1. Die Abschnitte
- Überblick
- Grundaufbau
- Labeln
- Adresse
- Anstellung
- Daten
- Kenntnisse
- Mitteilung
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 mir 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 halt, 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 müssen wir aber leider nur deswegen machen, weil der vermaledeite Internet Explorer mal wieder ein Extrasüppchen
kocht. Ohne die size-Angabe reagieren vernünftige Browser nämlich so. Sie ziehen das <select>-Element
so weit auf, dass alle Einträge sichtbar sind. Nur nicht die Gurke aus Redmond in allen aktuellen Versionen (6.0 bis 9.0). Die setzt
als Standard eine 4 beim size, völlig egal ob es nun drei oder acht Einträge sind. Probiert es ruhig mal aus.
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.