| 1. | Eine zweispaltige Tabelle können wir mit Hilfe des <table>-Tags erstellen, in welcher wir eine Zeile mit zwei Zellen integrieren. |
| In die erste Spalte (jeweils immer das erste <td>) schreiben wir die Überschrift des Formularfeldes hinein (z. B. "Wohnort"). |
| Vergessen Sie nicht das  Formular mit dem <form>-Tag zu öffnen, bevor Sie mit dem <input>-Tag und dem Attribut "type" (mit dem Wert "text") ein einzeiliges Textfeld erstellen. Auswahlfelder werden mit Hilfe von <select>-Tag erstellt, dabei werden die einzelnen Optionen werden mit Hilfe von <option>-Tags definiert. |
| Eine sinnvolle Größe kann mit dem "size"-Attribut definiert werden, eine Maximallänge der Felder kann im "maxlength"-Attribut angegeben werden. |
| Ein Absendebutton lässt sich mit <input>-Tag mit type="submit" darstellen. |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Lösung für Aufgabe 1 [2]</title>
</head>
<body>
<form action="http://www.htmltut.de/verarbeitende_datei.php" method="post">
<table>
<tr>
<td width="100">
Wohnort
</td>
<td>
<input type="text" size="30" maxlength="50" name="wohnort">
</td>
</tr>
<tr>
<td width="100">
Postleitzahl
</td>
<td>
<input type="text" size="5" maxlength="6" name="postleitzahl">
</td>
</tr>
<tr>
<td width="100">
Land
</td>
<td>
<select name="land">
<option value="de">Deutschland</option>
<option value="a">Österreich</option>
<option value="ch">Schweiz</option>
</select>
</td>
</tr>
<tr>
<td width="100">
</td>
<td>
<input type="submit" value="Absenden">
</td>
</tr>
</table>
</form>
</body>
</html>
| 2. | Mit dem <a>-Tag und dem Zeichen # sowie dem Ankernamen im "href"-Attribut können Sie zwei Links zu den entsprechenden Ankern erstellen. |
| Platzieren Sie nach einigen <br>-Tags den ersten Anker mit dem <h1>-Tag. Über das Attribut "id" können Sie der Überschrift einen eindeutigen Ankernamen zuweisen. Verfahren Sie mit dem 2.Anker genauso. |
| Um den Text der ersten Überschrift grün anzeigen zu lassen, müssen Sie mit dem <font>-Tag (welchem das Attribut "color" mit dem Wert "green" zugewiesen ist) den Überschriftentext des 1.Ankers umschließen. |
| Verfahren Sie analog dazu mit dem zweiten Anker, aber weisen Sie dem Attribut "color" dabei den Wert "blue" zu. |
| Platzieren Sie ganz unten auf der HTML-Seite einen Link, der mit dem Linkziel "#top" (im "href"-Attribut) nach oben verweist. |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Lösung für Aufgabe 2 [2]</title>
</head>
<body>
<a href="#anker1">Link zum 1.Anker</a><br>
<a href="#anker2">Link zum 2.Anker</a><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1 id="anker1"><font color="green">1.Anker</font></h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1 id="anker2"><font color="blue">2.Anker</font></h1><br><br>
<a href="#top">nach oben</a>
</body>
</html>
| 3. | Vergessen Sie auch bei dieser Übung nicht das Formular mit dem <form>-Tag einzuleiten. |
| Mit einem <input>-Tag und dem Wert "checkbox" können Sie eine Checkbox erstellen. Mit dem leeren Attribut "checked" ist die Checkbox vormarkiert. |
| Die vier Radioboxen werden mit type="radio" im <input>-Tag erstellt. Geben Sie allen vier Radioboxen denselben Namen, damit sich nur eine davon auswählen lässt. |
| Mit type="text" im <input>-Tag wird ein einzeiliges Text-Feld erstellt. Wird dem einzeiligen Text-Feld das leere Attribut "readonly" zugewiesen, so lässt sich dessen Inhalt nur noch lesen. Das Attribut "value" ermöglicht es einen Standardwert beim Aufruf festzulegen. |
| Eine mehrzeilige Textbox wird mit einem <textarea>-Tag erstellt, ein Passwortfeld (password) wird wie ein einzeiliges Text-Feld per <input>-Tag definiert. |
| Indem dem Attribut "type" der Wert "submit" im <input>-Tag zugewiesen wird, kann ein Absende-Button erstellt werden. |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Lösung für Aufgabe 3 [2]</title>
</head>
<body>
<form action="http://www.htmltut.de/verarbeitende_datei.php" method="post">
Checkbox <input type="checkbox" name="test1" checked><br><br>
<input type="radio" name="test2" value="m1"> Möglichkeit 1 | <input type="radio" name="test2" value="m2"> Möglichkeit 2 | <input type="radio" name="test2" value="m3"> Möglichkeit 3 | <input type="radio" name="test2" value="m4"> Möglichkeit 4<br><br>
<input type="text" size="20" value="Titel" name="htmltut" readonly><br><br>
<input type="pass" size="20" name="passwort"><br><br>
<textarea cols="50" rows="15"></textarea><br><br>
<input type="submit" value="Absenden">
</form>
</body>
</html>
> Listing 12.3: Lösung zu Übung 3 (Online-Beispiel / Download)
Weiter zu Teil 13 (Elementtypen und Weiteres) >
(as)
|
MEMBERS LOGIN
SEITE DURCHSUCHEN
