HTML 1 Ziel

(1)

1 Ziel

Erlangung von Fertigkeiten bezüglich der Grundlagen in HTML.

Erstellen einer einfachen Internetseite.

In der Klausur erhalten Sie i.d.R. den Ausdruck einer HTML-Datei vorgelegt und sollen einzelne Objekte beschreiben sowie ggf. die korrespondierende Bildschirmdarstellung skizzieren.

Beispiel aus der Klausur vom SS 2005:

Folgender HTML-Code beschreibt eine Tabelle in Verbindung mit einem Eingabeformular.

· Erläutern Sie die im HTML-Code gekennzeichneten Tags.

· Zeichnen Sie in dem dafür vorgesehenen (karierten) Bereich auf der folgenden Seite, der den Bildschirm darstellen soll, das Erscheinungsbild der Tabelle und der Eingabefelder für den Anwender. Geben Sie die Größenverhältnisse proportional wieder.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Bewerbung</title>

</head>

<body>

<tr>

Ja ich möchte mich bewerben!</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

1a) <textarea name=“Vorstellung“ cols=“60“ rows=“5“></textarea>

Antwort: Textfeld in der Größe: 60 Zeichen breit und 5 Zeilen hoch Dem Feld wurde der Name „Vorstellung“ zugewiesen

1b) <input type=“reset“ value=“Zurücksetzen“ name=“res“>

Antwort: Reset-Button.

Auf dem Reset-Button erscheint der Text „zurücksetzen“

Dem Feld wurde der Name „res“ zugewiesen

(2)

2.Hier bitte die Bildschirmdarstellung eintragen: (30 Spalten;

20 Zeilen)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 1

2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Die nachfolgend aufgeführte Bildschirmdarstellung muss in das oben aufgeführte Raster maßstabsgerecht eingetragen werden („Maßstabsgerecht“ bedeutet, dass z.B. die

Größenverhältnisse der Tabelle – hier sind die Spaltenbreiten im Verhältnis 30:70 gegeben –

(3)

Nachfolgend wird der Aufbau von HTML-Dateien näher beschrieben.

Titel

Tabelle (am Bildschirm nicht sichtbar) mit 30:70 des Bildschirms: 2 Punkte

Ausrichtung:

Richtige Buttons

Richtige Ausrichtung und doppelte Schriftgröße

(4)

2 Einführung in HTML

HTML (HyperText Markup Language) beschreibt die Anordnung von Elementen (z.B. Bilder, Tabellen) auf einer Internetseite/Dokument sowie deren Funktion und indirekt deren

Aussehen.

Jede HTML-Datei ist hierarchisch aufgebaut und setzt sich aus einzelnen Elementen zusammen, die wiederum aus Anfangs- und Endbefehlen (so genannten Tags) bestehen.

Beispiel

<body>

…

</body>

Objekt: Gesamtheit eines Elements zwischen einem Anfangstag und dem korrespondierenden Endtag.

Schreibweise der Tags: Groß-/Kleinschreibung der Tagbezeichnung bewirkt keinen Unterschied (anders als z.B. bei XML).

D.h., im Extrem wäre auch möglich (wenn auch nicht sinnvoll, weil schlecht zu lesen):

<BoDy>

…

</boDY>

Eine Verschachtelung verschiedener Tags ist möglich. Beispiel:

<i> kursiver Text <b> kursiver, fetter Text </b> kursiver Text </i>

Tags dürfen sich jedoch nicht überlappen.

Anfangstag Endtag

(5)

3 Das HTML-Grundgerüst

Grundgerüst einer HTML-Datei:

<!DOCTYPE …> Typ des Dokuments, damit der Browser alle Befehlsangaben richtig interpretieren kann. Üblich ist: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

html

head (engl. Kopf) mit Titel und Meta-Angaben sowie ggf. Scripte body (engl. Körper) Hauptteil der Seite mit Text, Bildern, Tabellen, … Beispiel:

<!DOCTYPE ...Angabe...>

<html>

<head>

... Angaben ...

</head>

<body>

... Angaben ...

</body>

</html>

Der Titel wird wie folgt notiert:

<title>Überschrift/Name der Seite</title>

Legen Sie mit dem Windows-Editor (Start->Programme->Zubehör->Editor eine neue Datei an. Speichern sie diese auf D:\Temp ab als „test.html“.

Erstellen Sie ein einfachen HTML-Gerüst mit einem Titel und einem beliebigen kurzen Text im Body.

4 Attribute

Mit Attributen können die Eigenschaften der verschieden Element verändert werden.

Verwendet wird hierfür das style-Attribut.

Ein Hintergrundbild kann mit background-image definiert werden. Als Wert sollte hierbei eine URL bzw. Adresse einer Bilddatei angegeben werden.

style="background-image:url(grafiken/TUM.gif)"

Die Hintergrundfarbe (des Dokuments) richtet man mit dem Schlüsselwort background-color ein. Die 16 Standardfarben heissen:

black(1), gray(2), maroon(3), olive(4), white(5), silver(6), red(7), yellow(8), green(9), teal(10), navy(11), purple(12), lime(13), aqua(14), blue(15), fuchsia(16).

(6)

Ein body-Element könnte dann z.B. so aussehen:

... Seiteninhalt ...

</body>

5 Text-Darstellung im Body

Texte in HTML-Dateien können unterschiedlich gestaltet werden.

Zeilenumbruch

Um einen Zeilenumbruch auf dem Bildschirm zu erzwingen (ansonsten wird Text immer als Fließtext dargestellt), benutzt man den <br>-Tag.

Beispiel:

a) Quelltext in der HTML-Datei:

In folgendem Text wird nicht nach diesem Wort,

sondern erst bei diesem Zeilenumbruchtag <br> ein Zeilenumbruch am Bildschirm dargestellt:

b) Bildschirmdarstellung:

In folgendem Text wird nicht nach diesem Wort, sondern erst bei diesem Zeilenumbruchtag ein Zeilenumbruch am Bildschirm dargestellt:

Absatz Beispiel:

<p>

beliebiger Text

</p>

Schriftgröße

Absätzen können bestimmte Schriftgröße zugewiesen werden – mittels font-size Schlüsselwort.

z. B. die Schriftgröße 20pt (entspricht 20er Schrift in Word). Als relative Größe sind u. a.

Prozentwerte oder Angaben wie large, small oder x-large erlaubt. Beispiele:

<p style="font-size: 12pt">beliebiger Text</p>

<p style="font-size: 80%">beliebiger Text</p>

<p style="font-size: small">beliebiger Text</p>

Schriftart

Absätzen können bestimmte Schriftarten zugewiesen werden (Schlüsselwort font-family). Als Wert wird der Name einer Schriftart angegeben. Beispiel:

<p style="font-family:'Arial'">beliebiger Text</p>

(7)

Schriftfarbe

Die Schriftfarbe für einen Absatz wird mit color: Farbname im style Attribut festgelegt. Es kann entweder der Name der Farbe oder der Farbcode verwenden werden. Beispiel:

<p style="color:black"> Text wird in schwarzer Schrift dargestellt</p>

<p style="color:#FF0000"> Dieser Text wird in roter Farbe dargestellt </p>

Textausrichtung

Die Textausrichtung in einem Absatz ist standardmäßig linksbündig. Soll dies geändert werden, wird das text-align Schlüsselwort verwendet (align = Ausrichtung). Rechtsbündiger Text: text-align: right. Zentrierter Text: text-align: center (center = zentriert). Beispiel:

<p> Text wird linksbündig ausgerichtet </p>

<p style="text-align:center"> Text wird zentriert </p>

<p style="text-align:right"> Text wird rechtsbündig dargestellt </p>

Blocksatz:

<p style="text-align:justify"> Text wird als Blocksatz dargestellt</p>

Beispiele für weitere Formatiermöglichkeiten:

<p style="font-weight:bold"> fetter Text</p>

Alternativ:

<b> fetter Text </b>

<p style="font-style:italic"> kursiver Text</p>

Alternativ:

<i> kursiver Text</i>

Sollen mehrere Attribute kombiniert werden:

Überschrift

Eine Überschrift ist immer mit <hx></hx> zu notieren. An Stelle des x steht eine Zahl, welche die Ordnung der Überschrift angibt. Möglich ist: <h1>…</h1> bis <h6>…</h6>. Beispiel

<h1>1 Einleitung</h1>

<h2>1.1 Einführung</h2>

<h2>1.2 Problemstellung</h3>

<h3>1.2.1 Verhalten der Betroffenen</h3>

<h3>1.2.2 Methoden</h3>

Dabei ist die hierarchische Anordnung so, dass h1 den anderen übergeordnet ist (Überschrift 1. Ordnung), dann folgt h2 (Überschrift 2. Ordnung) usw. Die Schriftgröße ändert sich i.d.R.

je nach Zahl. Das heißt, h1 ist die größte, h6 die kleinste Überschrift.

(8)

6 Links

Verweise / Links / Anker

Ziel: Sprung an gezielte Stellen auf einer HTML-Seite oder zu neuen HTML-Seiten oder Anzeige von Bildern, ….

Notation

Ein Link besteht immer aus Start- und Endtag, die um das/die gewünschten Objekt gelegt werden. Beispiel:

<a href="http://www.wzw.tum.de">Klicke hier</a>

Um anzugeben, worauf verwiesen wird, wird das href-Attribut verwendet.

Anker

Anker oder Sprungmarken markieren eine Stelle innerhalb einer Datei (z.B. Überschrift).

Anker werden ebenfalls mit dem a-Element notiert. Allerdings verwendet man hierzu das name-Attribut.

Beispiel für einen Link auf einen Anker:

<a href="name.htm#Ankername">Klick hier</a>

<a href="http://www.test-seite.de#unten">Klick hier</a>

Die betreffenden Anker:

<a name="Ankername">Textstelle</a>

<a name="unten">Unten auf der Seite</a>

Mail-Links

Mail-Links sind Links, bei denen sich automatisch das eingestellte Mailprogramm des Systems öffnet. Beispiel:

<a href="mailto:webmaster@muster.de">Schreiben Sie mir ihre Meinung</a>

</a>

7 Listen

Listen

Listen ohne Listenpunkte (ohne Aufzählungszeichen, …) Beispiel:

<ul>

Listenpunkt 1<br>

Listenpunkt 2<br>

</ul>

(9)

Listen mit Listenpunkten Beispiel:

<ul>

<li>Listenpunkt 1</li>

</ul>

Veränderung des Aussehens der Listenpunkte mittels type-Attribut an. Möglich sind:

circle - ein Kreis square - ein Viereck disc - ein Karo Beispiel:

</ul>

Zähllisten

Erforderlich ist das ol-Element. Im einleitenden ol-Tag kann der Typ der Listenpunkte mit dem type-Attribut festlegt werden:

type="1" - Liste mit Zahlen (1, 2, 3, 4...)

type="I" - Liste mit großen röm. Buchstaben (I, II, III, IV ...) type="i" - Liste mit kleinen röm. Buchstaben (i, ii, iii, iv ...) type="A" - Liste mit großen Buchstaben (A, B, C, D...) type="a" - Liste mit kleinen Buchstaben (a, b, c, d...) Beispiele:

<li>Listenpunkt 1 (Ziffer I)</li>

<li>Listenpunkt 2 (Ziffer II)</li>

</ol>

<li>Listenpunkt 1 (Ziffer vii)</li>

<li>Listenpunkt 2 (Ziffer viii)</li>

</ol>

<li>Listenpunkt 1 (Ziffer A)</li>

<li>Listenpunkt 2 (Ziffer B)</li>

</ol>

<li>Listenpunkt 1 (Ziffer a)</li>

<li>Listenpunkt 2 (Ziffer b)</li>

</ol>

Listen in Listen Beispiel:

(10)

<ul>

<li>

<ul>

<li>Listenpunkt 1.1</li>

<li>Listenpunkt 1.2</li>

</ul>

</li>

</ul>

Die Darstellung kann innerhalb der Liste als umschließendes Element im style-Attribut festgelegt werden:

...

</ul>

8 Literatur

Kostengünstige Broschüren des RRZN (erhältlich über das LRZ bzw. das ITW) zu HTML.

(11)

9 Tabellen

Eine Tabelle setzt sich zusammen aus dem Tabellengerüst, Tabellenzeilen, Tabellenspalten, Tabellenzellen, …

1. dem Tabellengerüst

<table>

Weitere Tags des Tabelleninhaltes

</table>

2. Tabellenzeilen (tr-Element; tr für „Table Row“)

<table>

<tr>... Zeileninhalt ... </tr>

</table>

3. Tabellenzellen (td-Element; td für „Table Data“)

<table>

<tr>

<td>... Inhalt der 1.Zeile erste Zelle ... </td>

<td>... Inhalt der 1.Zeile zweite Zelle ... </td>

</tr>

<tr>

<td>... Inhalt der 2.Zeile erste Zelle ... </td>

<td>... Inhalt der 2.Zeile zweite Zelle ... </td>

</tr>

</table>

Nähere Spezifikationen innerhalb einer Tabelle 1. Spaltengruppen

Um die Zellen in einer Spalte mit gleichen Attributen zu definieren, verwendet man das colgroup-Element in Verbindung mit col-Elemente(n). Beispiel:

<table>

</colgroup>

<tr>

<td>... Zelleninhalt; Breite der Zelle 100 Pixel ... </td>

<td>... Zelleninhalt; Höhe der Zelle 45 Pixel ... </td>

</tr>

</table>

Die Elemente col und colgroup bewirken nur eine optische Formatierung.

(12)

2. Tabellenkopf (th-Element; „Table Heading“), Tabellenkörper (tbody-Element; „Table Body“) und Tabellenfuß (tfoot-Element; „Table Foot“)

Wenn eines der o.g. Elemente verwendet werden soll, müssen alle drei Elemente immer in der Reihenfolge thead->tfoot->tbody erscheinen (Das tbody-Element darf auch mehrmals auftreten).

Ziel: Strukturierung der Tabelle Beispiel:

<table>

<thead>

<tr>

<th>Inhalt der 1.Zeile erste Zelle der einzeiligen Kopfzeile </th>

<th>Inhalt der 1.Zeile zweite Zelle der einzeiligen Kopfzeile </th>

</tr>

</thead>

<tfoot>

<tr>

<td>Inhalt der Fußzeile erste Zelle (einzeilige Fußzeile)</td>

<td>Inhalt der Fußzeile zweite Zelle (einzeilige Fußzeile)</td>

</tr>

</tfoot>

<tbody>

<tr>

<td>... Zelleninhalt der 2.Zeile erste Zelle (direkt unter der o.g. Kopfzeile)... </td>

<td>... Zelleninhalt der 2.Zeile zweite Zelle (direkt unter der o.g. Kopfzeile)... </td>

</tr>

</tbody>

</table>

Bildschirmdarstellung:

Inhalt der 1.Zeile erste Zelle der einzeiligen

Kopfzeile Inhalt der 1.Zeile zweite Zelle der einzeiligen

Kopfzeile ... Zelleninhalt der 2.Zeile erste Zelle (direkt

unter der o.g. Kopfzeile)...

... Zelleninhalt der 2.Zeile zweite Zelle (direkt unter der o.g. Kopfzeile)...

Inhalt der Fußzeile erste Zelle (einzeilige Fußzeile)

Inhalt der Fußzeile zweite Zelle (einzeilige Fußzeile)

(13)

Mehrspaltige Zellen

Erstrecken sind Zellen über mehrere Spalten Beispiel:

<table>

<tr>

<td colspan="2"> Diese Zelle steht in der ersten Zeile der Tabelle und erstreckt sich über die Spalten 1 und 2 </td>

<td>Diese Zelle steht in der ersten Zeile der Tabelle und erstreckt sich nur über eine Spalte (die 3. Spalte der Tabelle) </td>

</tr>

<tr>

<td>Diese Zelle steht in der zweiten Zeile der Tabelle und stellt die erste Spalte dar</td>

<td> Diese Zelle steht in der zweiten Zeile der Tabelle und stellt die zweite Spalte dar </td>

<td> Diese Zelle steht in der zweiten Zeile der Tabelle und stellt die erste Spalte dar </td>

</tr>

</table>

Bildschirmdarstellung:

Diese Zelle steht in der ersten Zeile der Tabelle und

erstreckt sich über die Spalten 1 und 2 Diese Zelle steht in der ersten Zeile der Tabelle und erstreckt sich nur über eine Spalte (die 3. Spalte der Tabelle)

Diese Zelle steht in der zweiten Zeile der Tabelle und stellt die erste Spalte dar

Diese Zelle steht in der zweiten Zeile der Tabelle und stellt die zweite Spalte dar

Diese Zelle steht in der zweiten Zeile der Tabelle und stellt die erste Spalte dar

Mehrzeilige Zellen (mittels rowspan-Attribut)

Um folgende Bildschirmdarstellung der Tabelle zu erhalten …

erste Zelle zweite Zelle

dritte Zelle

…

ist erforderlich:

<table>

<tr>

<td rowspan="2">erste Zelle </td>

<td>zweite Zelle</th>

</tr>

<tr>

<td>dritte Zelle</td>

</tr>

</table>

Breite und Höhe von Tabelle, Zellen, Zeilen Hierfür dienen:

1. width-Attribut für Tabellenbreite, Zellenbreite und Zeilenbreite 2. height-Attribut für Tabellenhöhe, Zellenhöhe und Zeilenhöhe.

Zur Breiten-/Höhenangabe sind möglich: Pixelangaben und Prozentangaben Beispiel:

(14)

<td>Inhalt der ersten Zelle in der ersten Zeile </td>

<td>Inhalt der zweiten Zelle in der ersten Zeile </td>

</tr>

</table>

<td style="width:130px">Zelleninhalt </td>

<td style="width:70px">Zelleninhalt </td>

</tr>

</table>

Bei Prozentangaben richten sich die Angaben der Zellen- bzw. Zeilenhöhe nach der Tabellenhöhe bzw. -breite.

Zellenabstand (mittels „border-spacing“)

Beispiel:

</table>

</table>

Innerer Zellenabstand

<table>

<tr>

<td style="padding:3px">Inhalt der Zelle</td>

</tr>

</table>

Ausrichtung von/in Tabellen Mögliche Werte sind:

left - linksbündig right - rechtsbündig center - zentriert justify - Blocksatz

<table>

<td style="text-align:left">... Zelleninhalt linksbündig ... </td>

<td>... Zelleninhalt zentriert ... </td>

Zentrierte Ausrichtung des Textes gilt grundsätzlich für die gesamten Tabellenzeile

(15)

Vertikale Ausrichtung Mögliche Werte sind:

top - am oberen Rand ausgerichtet middle - in der Mitte stehend

bottom - am unteren Rand ausgerichtet

baseline - Ausrichtung an einer gemeinsamen Basislinie Beispiel:

<table>

<td>Text wird mittig ausgerichtet </td>

Text erscheint am unteren Rand der Zelle </td>

</tr>

</table>

Tabelleneigenschaften

1. Tabellenrahmen (mittels „border“ im style-Attribut; border bestimmt Dicke und Farbe des Rahmens):

Beispiel:

</table>

</table>

Für jedes Element einer Tabelle kann der Rahmen oder einzelne Seiten des Rahmens extra

(16)

Hintergrundbild

Tabellen – aber auch einzelne Zellen – können ein Hintergrundbild erhalten. Beispiel:

... Tabelleninhalt ...

</table>

<tr>

<td style="background-image:url(stubai.gif)>... Zelleninhalt ... </td>

<td style="background-image:url(zillertal.gif)>... Zelleninhalt ... </td>

</tr>

</table>

Hintergrundfarbe

Tabellen, Zeilen und Zellen können eine Hintergrundfarbe erhalten. Bei allen dreien notiert man dies mit dem bgcolor-Attribut. Beispiel:

... Tabelleninhalt ...

</table>

<td style="background-color: yellow">... Zelleninhalt ... </td>

<td>... Zelleninhalt ... </td>

</tr>

</table>

10 Formulare

Wichtig:

1. Jedes Formular hat einen Namen

2. Jedes Formularelement (Inputfeld, Textarea usw.) hat einen Namen

... usw. ...

Was soll mit dem Formular „passieren“, sobald der Anwender die Felder im Formular ausgefüllt hat und z.B. den „Send-Button“ gedrückt hat?

Erforderlich ist die Angabe einer „Aktion“, die erfolgen soll.

Beispiel:

1. Formularinhalt wird, wenn der Anwender den „Send-Button“ drückt, serverseitig von der CGI Anwendung Immatrikulation.pl verarbeitet.

…

Angezeigt wird ein Input-Feld. Es hat den Namen (vergleichbar einem

Variablennamen) „Matrikelnummer“

(17)

…

</form>

Das method-Attribut beschreibt, wie (nach welcher Methode) das Formular verarbeitet wird.

Als Wert sind post oder get möglich.

„Post“ bedeutet, dass der Formularinhalt wie eine Benutzereingabe in der Kommandozeile verarbeitet wird.

„Get“ bedeutet, dass der Formularinhalt serverseitig ausgelesen und verarbeitet werden muss.

(Eingabe)Felder in Formularen

Einzeiliges Textfeld

</form>

Feld mit Standardwert vorbelegen. Beispiel:

<input value="Geben sie hier ihren Kommentar ein" name="Kommentar"

type="text">

</form>

Die Länge des jeweiligen Textfeldes (sichtbare Größe auf dem Bildschirm) kann mit dem size-Attribut bestimmt werden (nur ganze Zahlen erlaubt). Beispiel:

</form>

Die maximale Länge für den Inhalt von Textfeldern kann von der Eingabefeldgröße (s.

obiges Beispiel) abweichen. Beispiel:

<input maxlength="30" value="Ihr Nachname (max. 30 Buchstaben)"

name="Nachname" type="text">

<input maxlength="30" value="Ihr Vorname (max. 30 Buchstaben)"

name="Vorname" type="text">

</form>

Passwortfelder Beispiel:

</form>

Type=“text“ bewirkt, dass es sich um ein einzeiliges Textfeld handelt.

(18)

Mehrzeilige Textfelder (textarea-Element) Beispiel:

... Kommentar ...

</textarea>

</form>

Sie erhalten auf dem Bildschirm ein dreizeiliges Eingabefeld (30 Spalten breit) angezeigt, in das Sie Ihren Kommentar eingeben können.

Weitere Spezifikationsmöglichkeiten betreffen z.B. den automatischen Zeilenumbruch mittels Wrap-Attribut usw.

Selectfelder

Sie ermöglichen es, aus mehreren Alternativen zu wählen. Wichtig ist, dass sich Select- und Option-Elemente bedingen. Beispiel:

<option>Alternative 1</option>

<option> Alternative 2</option>

<option> Alternative 3</option>

</select>

Es besteht die Möglichkeit, den option-Elementen Werte zuzuweisen:

</select>

Soll bereits eine Option vorausgewählt werden werden:

</select>

Soll die Möglichkeit bestehen, mehrere Alternativen auszuwählen (Mehrfachauswahl mit

„multiple“):

Wohin möchten Sie verreisen?

<option selected>Italien</option>

<option>Frankreich</option>

<option>Portugal</option>

</select>

Absenden Button

Die Option 1 ist hiermit

vorausgewählt (am Bildschirm markiert)

(19)

werden mit dem input-Element definiert. Damit es sich aber nicht um ein Textfeld handelt, sonder um ein Knopf, notiert man zusätzlich das Attribut type mit dem Wert Submit. Beispiel:

Bei Absende Buttons können Sie außerdem das Attribut value notieren. In diesem wird festgehalten, wie der Knopf beschriftet werden soll. Wird das Attribut nicht notiert, so erfolgt die Beschriftung mit dem Standardtext des Browsers.

Seit HTML 4.0 ist es nun auch möglich Absende Buttons mit dem button-Element zu definieren. Hierzu lesen Sie bitte die Beschreibung zum button-Element.

Reset Buttons

Reset Button: Löscht alle Eingabefelder in einem Formular

Checkboxen

Checkboxen sind eigentlich einzellige Textfelder und ermöglichen es aber nur, sie leer zu lassen oder anzukreuzenBeispiel:

<input name="pest" type="Checkbox">Pest

<input name="cholera" type="Checkbox">Cholera Radio-Buttons

Radio-Buttons haben eine ähnliche Funktion wie Checkboxen, ermöglichen jedoch eine

„Entweder-Oder“ VerarbeitungBeispiel:

Welche Tiere lieben Sie besonders?

Auswahl aus Gruppe 1:

<input name="gruppe1" type="Radio">Bären

<input name="gruppe1" type="Radio">Wölfe Auswahl aus Gruppe 2:

<input name="gruppe2" type="Radio">Schnecken

<input name="gruppe2" type="Radio">Spinnen

<input name="gruppe2" type="Radio">Haie

Die Buttons, unter denen einer ausgewählt werden soll, muss mit dem gleichen Wert des name-Attributes versehen werden.

Die Voreinstellung eines Sendewertes erfolgt analog den Beispielen bei den Select- Feldern

Der Reset- Button hat den Namen „Res“

Auf dem Bildschirm erscheint auf dem betreffenden Button der Text „Abschicken“

(20)

Die Möglichkeit des Ankreuzens besteht analog den Select-Feldern – allerdings ist hierfür das „checked-Attribut“ zu verwenden.

Beispiel:

Auswahl aus Gruppe 1:

<input checked name="gruppe1" type="Radio">Bären

<input name="gruppe1" type="Radio">Wölfe Auswahl aus Gruppe 2:

<input name="gruppe2" type="Radio">Schnecken

<input name="gruppe2" type="Radio">Spinnen

<input checked name="gruppe2" type="Radio">Haie

In Gruppe 1 sind die Bären als Lieblingstiere ausgewählt.