HTML / CSS - Praxistutorial 3 - Adresse
1. Die Abschnitte
2. Der Codeabschnitt
<fieldset>
<legend>Adresse</legend>
</fieldset>
Alles, was nun kommt, fügt ihr bitte unterhalb des <legend>-Tags ein. Und zwar innerhalb von <fieldset>.
Gut, das sollte eigentlich selbstverständlich sein, aber man weiß ja nie. Für die völlig Merkbefreiten, schaut notfalls in die Lösung.
3. Die Eingabefelder
Hier wollen wir die üblichen Adressdaten erfassen. Der Einfachheit halber nehmen wir mal nur die postalischen. Dabei trennen wir die einzelnen Felder durch einen Absatz. Warum wir das machen, erzähle ich euch gleich, also habt ein klein wenig Geduld.
<p>
<label for="vorname">Vorname</label>
<input type="text" name="vorname" id="vorname" />
</p>
<p>
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</p>
<p>
<label for="strasse">Straße</label>
<input type="text" name="strasse" id="strasse" />
</p>
Erläuterung
Wir haben also in unserem <fieldset> pro Eingabefeld einen Absatz um die einzelnen Felder später (im nächsten Tutorial)
optisch von einander abzuheben. Jeder Absatz besteht aus einem <label>- und <input>-Element. Die
entsprechende Zuordnung erfolgt, wie schon gesagt, über das for im <label> und dem id im
jeweiligen <input>-Element.
4. Die Besonderheit
... ist mal wieder die Kombination aus PLZ und Ort. Gut, die Briefträger brauchen das, um ihre Zustellungen korrekt abzuliefern. Aber wenn wir mal ehrlich sind, so nervt uns das als Webentwickler doch ein wenig. Vor allem, wenn wir eine Abneigung gegen Ausnahmen haben. Und jetzt werdet ihr auch erfahren, warum ich in diesem Abschnitt mit Absätzen arbeite, denn der folgende Code (den ihr bitte unter den "Straße"-Absatz packt) sieht so aus.
<p>
<label for="plz">PLZ</label><label for="ort">Ort</label>
<input type="text" name="plz" id="plz" class="plz" />
<input type="text" name="ort" id="ort" class="ort" />
</p>
Erläuterung
PLZ und Ort stehen gewöhnlich nebeneinander. Und erst dann kommen die entsprechenden <input>-Felder. Daher müssen wir
zuerst die zwei <label>-Elemente anlegen. Eine Verschachtelung mittels des im vorherigen Abschnitts beschriebenen
<label for="plz">
PLZ
<input type="text" name="plz" id="plz" class="plz" />
</label>
<label for="ort">
Ort
<input type="text" name="ort" id="ort" class="ort" />
</label>
wäre hier weiß Gott nicht sinnvoll, da wir erst die PLZ samt Feld und dann den Ort hätten. Und das sieht erstens sch***e aus und irritiert zweitens auch die Benutzer. Die Zuordnung bleibt trotzdem erhalten. Klickt mal auf den Text "PLZ" und dann auf "Ort". Dann könnt ihr schön sehen, wie der Cursor im jeweiligen Feld platziert wird.
Die Optik
... ist im Moment nicht so prickelnd, da die Texte "PLZ" und "Ort" direkt nebeneinander stehen. Das liegt schlicht und einfach daran, dass
<label>-Tags zu den Inline-Elementen gehören. Außerdem sind beide <input>-Felder gleich groß.
Und wie man das sauber per CSS formatiert, erfährt ihr im folgenden Tutorial. Also übe dich in Geduld, junger Padawan.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt