HTML / CSS - Praxistutorial 3 - Mitteilung

1. Die Abschnitte

2. Der Codeabschnitt


<fieldset>
  <legend>Mitteilung</legend>
</fieldset>

3. Die Mitteilung

Hier bauen wir einfach nur noch das übliche "Ihre Nachricht"-Textfeld ein, inklusive einer kleinen Erläuterung.


<label>
  <span>Ihre Nachricht</span>     
  <textarea name="nachricht" id="nachricht" rows="10" cols="60">
  </textarea>
</label>
<p>
  An dieser Stelle können sie uns noch eine zusätzliche Nachricht 
  hinterlassen. Und hier könnte noch viel mehr stehen, also
  bla blubb, blubber, schwall, laber.
</p>

Erläuterung

Hier setzen wir mal wieder das Formularelement komplett in ein <label>-Tag. Warum dem so ist, erfahrt ihr im anschließenden Tutorial. Darum arbeiten wir auch beim "Titel" entsprechend mit einem <span>-Element. Für die zusätzliche Erläuterung nehmen wir einen stinknormalen Absatz. Und das war es auch schon. Wirklich nicht der Rede wert.

4. Die Buttons

... hauen wir dann noch unter(!) obiges <fieldset> und fertig.


<p>
  <input type="reset" value="Zurücksetzen" />
  <input type="submit" value="Senden" />
</p>

5. Fazit

Wenn ihr während dieses Tutorials fleißig den HTML-Validator beobachtet habt, so werdet ihr merken, dass der Code absolut valide ist. Trotz der teilweise unterschiedlichen Vorgehensweise beim Labeln. Ich hoffe auch, dass ihr ein klein wenig über den korrekten Aufbau von Formularen ohne Layout-Tabellen gelernt habt.

Feinheiten

Man kann Formulare auch noch wesentlich feiner und vielschichtiger aufbauen, also zum Beispiel über tabindex oder accesskey. Ich habe aber bewusst darauf verzichtet, weil es in diesem Beispiel ziemlich sinnlos ist. Und Beispiele um der Beispiele willen mag ich nicht.

Aber!

Die eigentlichen Probleme kommen noch auf uns zu. Nämlich die Formatierung per CSS. Und glaubt mir, das wird heftig. Also macht euch schon mal auf etwas gefasst. Zumal wir hier, wie ich eingangs schon sagte, nicht sauber gearbeitet haben. Aber das gehört zum Lernprozess.

zurück zum vorherigen Abschnitt