5. Unterrichtsblock

HTML Logo

Inhaltsverzeichnis

Block und Inline Elemente

Jedes HTML-Element hat einen Standardanzeigewert, je nachdem, um welchen Elementtyp es sich handelt.

Es gibt zwei Anzeigewerte: Block und Inline.

Block Elemente

Ein Element auf Blockebene beginnt immer in einer neuen Zeile, und die Browser fügen vor und nach dem Element automatisch etwas Platz (einen Rand) hinzu.

Ein Element auf Blockebene nimmt immer die volle verfügbare Breite ein (dehnt sich so weit wie möglich nach links und rechts aus).

Zwei häufig verwendete Blockelemente sind: <p> und <div>.

  • Das Element <p> definiert einen Absatz in einem HTML-Dokument.
  • Das <div>-Element definiert eine Abteilung oder einen Abschnitt in einem HTML-Dokument.
<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>–<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>
<p>Hier kommt ein Block-Element</p>

<div>
 <p>Dies ist ein Block-Element innerhalb eines Block-Elements</p>
</div>

Inline Elemente

  • Ein Inline-Element beginnt nicht in einer neuen Zeile.
  • Ein Inline-Element nimmt nur so viel Breite ein wie nötig.
<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>
<p>Das ist der gesamte Satz in einem Block-Element und <span>hier kommt das Inline-Element</span>, welches innerhalb des Block-Elements liegt.</p>

Aufgabe

Probiere alle o.g. Inline- und Block-Elemente im Code-Editor aus, um die Darstellung und Funktion zu testen.

Suche in Suchmaschinen auch nach geeigneten Attributen für die jeweiligen Elemente und probiere diese aus.

HTML-Formulare

Ein HTML-Formular wird verwendet, um Benutzereingaben zu sammeln. Die Benutzereingabe wird meistens zur Verarbeitung an einen Server gesendet. Wie die Verarbeitung auf dem Server funktioniert, wird im 2. Lehrjahr unterrichtet.






Beim Klick auf den „Absenden“ Button wird der Inhalt der Formulare an den Server zur weiteren Verarbeitung mit PHP übermittelt

<!--
    Beispiel für ein Formular zur Eingabe von Vor- und Familienname:
-->

<!-- Formular-Element mit Zieldatei auf dem Server zur weiteren Verarbeitung -->
<form action="/2-jahr/php/">

<!-- Label = Beschreibung -->
  <label for="vorname">Vorname:</label><br>

<!-- Eingabefeld mit Attributen zur Werte-Übergabe an den Server -->
  <input type="text" id="vorname" name="vorname" value="Thomas"><br>

  <label for="nachname">Nachname:</label><br>
  <input type="text" id="nachname" name="nachname" value="Müller"><br><br>
  <input type="submit" value="Absenden">
</form>

Das form-Element

Das HTML-Element <form> wird verwendet, um ein HTML-Formular für Benutzereingaben zu erstellen:

<form>
.
form Elemente
.
</form>

Das <form>-Element ist ein Container für verschiedene Arten von Eingabeelementen, wie z. B.:

  • Textfelder
  • Kontrollkästchen
  • Optionsfelder
  • Senden-Schaltflächen
  • usw.

Mehr zu den Formularelementen wird später noch erläutert.

Das input-Element

Das <input>-Element ist das meist verwendete Formular-Element und kann durch das Attribut type=" " individualisiert werden.

TypBeschreibung
<input type=“text“>Zeigt ein einzeiliges Text-Eingabefeld an
<input type=“radio“>Zeigt einen Radio-Button an (Möglichkeit eines von mehreren Optionen auszuwählen)
<input type=“checkbox“>Zeigt eine abhakbares Kästchen an (Möglichkeit einige, oder alle von mehreren Optionen auszuwählen)
<input type=“submit“>Zeigt den „Absenden-Button“ an (Möglichkeit das Formular abzusenden)
<input type=“button“>Zeigt einen klickbaren Button

Alle Eingabe-Formulare werden in einem späteren Teil erläutert.

Text Felder

Das Feld <input type="text"> definiert ein einzeiliges Eingabefeld für die Texteingabe.

<form action="/2-jahr/php/">

<!-- Label = Beschreibung -->
  <label for="vorname">Vorname:</label><br>

<!-- Eingabefeld mit Attributen zur Werte-Übergabe an den Server -->
  <input type="text" id="vorname" name="vorname" value="Thomas"><br>

  <input type="text" id="nachname" name="nachname" value="Müller"><br><br>

</form>

Das <label>-Element

  • Der <label>-Tag definiert die Bezeichnung für die Formular-Elemente (siehe Beispiel oben).
  • Das <label>-Element wird auch in der Vorlese-Funktion laut vorgelesen.
  • Das <label>-Element hilft auch Benutzern, die Schwierigkeiten haben, auf sehr kleine Bereiche (z. B. Optionsfelder oder Kontrollkästchen) zu klicken – denn wenn der Benutzer auf den Text innerhalb des <label>-Elements klickt, wird das Optionsfeld/Kontrollkästchen umgeschaltet.
  • Das for-Attribut des <label>-Tags sollte gleich dem id-Attribut des <input>-Elements sein, um beide Elemente aneinander zu binden.

Radio-Buttons

Das Element <input type="radio"> definiert einen Radiobutton. Radio-Buttons ermöglichen es einem Benutzer, EINE aus einer begrenzten Anzahl von Auswahlmöglichkeiten auszuwählen.

Beispiel

Wähle Die aktuelle Sprache, die Du lernst:



<p>Wähle Die aktuelle Sprache, die Du lernst:</p>

<form>
  <input type="radio" id="html" name="web_sprache" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="web_sprache" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="web_sprache" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

Kontrollkästchen

Das Element <input type="checkbox"> definiert ein Kontrollkästchen. Kontrollkästchen ermöglichen es einem Benutzer, KEINE oder MEHRERE Optionen aus einer begrenzten Anzahl von Auswahlmöglichkeiten auszuwählen.

Beispiel:



 <form>
  <input type="checkbox" id="fahrzeug1" name="fahrzeug1" value="Fahrrad">
  <label for="fahrzeug1"> Ich habe ein Fahrrad</label><br>
  <input type="checkbox" id="fahrzeug1" name="fahrzeug1" value="Auto">
  <label for="fahrzeug1"> Ich habe ein Auto</label><br>
  <input type="checkbox" id="fahrzeug1" name="fahrzeug1" value="Boot">
  <label for="fahrzeug1"> Ich habe ein Boot</label>
</form>

Absenden-Button

Das Element <input type="submit"> definiert eine Schaltfläche zum Senden der Formulardaten an eine Stelle zur Formular-Verarbeitung. Der sog. „Form-Handler“ ist typischerweise eine Datei auf dem Server mit einem Skript zur Verarbeitung von Eingabedaten. Der „Form-Handler“ wird im action-Attribut des Formulars angegeben.






 <form action="/formular_verarbeitung.php">
  <label for="vorname">Vorname:</label><br>
  <input type="text" id="vorname" name="vorname" value="Thomas"><br>
  <label for="nachname">Nachname:</label><br>
  <input type="text" id="nachname" name="nachname" value="Müller"><br><br>
  <input type="submit" value="Absenden">
</form>

Das name-Attribut für <input>

Beachten Sie, dass jedes Eingabefeld ein Namensattribut haben muss, um übermittelt zu werden. Wenn das name-Attribut weggelassen wird, wird der Wert des Eingabefelds nicht gesendet.

Fehlerhaftes Beispiel

 <form action="/formular_verarbeitung.php">
  <label for="vorname">Vorname:</label><br>
  <input type="text" id="vorname" value="Thomas"><br>
  <label for="nachname">Nachname:</label><br>
  <input type="text" id="nachname" value="Müller"><br><br>
  <input type="submit" value="Absenden">
</form>

Übungsaufgabe

1. Aufgabe

Erstelle ein Formular mit folgenden Optionen:

  • Eingabefeld: Vorname
  • Eingabefeld: Nachname
  • Eingabefeld: PLZ
  • Eingabefeld: Stadt
  • Eingabefeld: Straße / Hausnummer
  • Auswahl – Über 18? – Ja, Nein
  • Mehrfachauswahl – Hobbys mit sechs verschiedenen Optionen
  • Absende-Button mit der Aufschrift: „Jetzt registrieren“

Erstelle für die o.g. Eingabefelder passende <label>-Elemente sowie passende name-Attribute.