Webseiten Quick'n easy
<html><head><title>erstes Formular</title>
</head><body>
<form action="mailto:info@nekosoft.de" method="post">
Bitte geben Sie Ihren Vornamen ein:
<input type="text" name="vname" size="10">
<br>
<input type="submit" value="abschicken">
</form>
</body></html>
Ein Eingabefenster für Texteingaben sieht in seiner einfachen Form
wie folgt aus:
<input type="text" name="name" size="10">
type gibt an, dass es sich um Text handelt.
name enthält die Information für das später verarbeitende
Programm, um den Inhalt zuzuordnen. Dieser Inhalt muss abgestimmt
werden. Jetzt, hier zum Üben, haben Sie vorerst die freie Wahl.
size gibt an, wie viele Zeichen das Feld im Webbrowser breit sein
soll. Die Länge beschränkt nicht die Menge der eingebbaren
Zeichen, sondern nur die Breite des Eingabebereiches.
Über die Angabe method="post" denken wir später nach und
übernehmen sie einfach erst einmal nur.
Jetzt macht es Sinn das Formular kurz auszuprobieren. Das
erleichtert Ihnen den folgenden Absatz. Vergessen Sie nicht die
Emailadresse gegen Ihre eigene auszutauschen!
Formularfelder mit input-Tag
<html><head><title>Auswahl mit input</title>
</head><body>
<form action="mailto:info@nekosoft.de" method="post">
<h3>Auswahl mit input...</h3>
<table>
<tr>
<td>Texteingabe </td>
<td><input type="text" name="name" size="15"></td>
</tr>
<tr>
<td>Passwort </td>
<td><input type="password" name="passwort" size="8"></td>
</tr>
<tr>
<td>Button abschicken </td>
<td><input type="submit" value="abschicken"></td>
</tr>
<tr>
<td>Button zurücksetzen </td>
<td><input type="reset" value="nochmal"></td>
</tr>
<tr>
<td>Einmalauswahl </td>
<td><input type="radio" name="radioauswahl" value="1">
<input type="radio" name="radioauswahl" value="2">
<input type="radio" name="radioauswahl" value="3"></td>
</tr>
<tr>
<td>Mehrfachauswahl</td>
<td><input type="checkbox" name="checkboxauswahl" value="a">
<input type="checkbox" name="checkboxauswahl" value="b">
<input type="checkbox" name="checkboxauswahl" value="c"></td>
</tr>
</table>
</form>
</body></html>
<input type="text" ... kennen wir schon. Es stellt eine
Texteingabe zur Verfügung. Size gibt die Anzahl der sichtbaren
Zeichen und damit die Länge des Feldes an.
<input type="password" ... Stellt eine spezielle Texteingabe
zur Verfügung. Alle Eingaben werden durch ein Sternchen (*)
angezeigt. Dies verhindert, daß jemand anderes das Passwort bei
der Eingabe am Bildschirm mitlesen kann.
<input type="submit" ... Stellt einen Submit-Button zur
Verfügung. Beim Anklicken wird das Formular (und sein Inhalt)
abgeschickt - in unserem Fall an unsere Emailadresse. Kleine
Falle: Das, was auf dem Button steht, wird im Attribut value
angegeben.
<input type="reset" ... Stellt einen Button zur Verfügung, der
beim Anklicken den Inhalt des Formulars in seinen Ausgangszustand
zurückversetzt. Kleine Falle: Das, was auf dem Button steht, wird
im Attribut value angegeben.
<input type="radio" ... Stellt die kleinen runden Auswahlbuttons
zur Verfügung. Es kann immer nur einer gleichzeitig angewählt
werden.
Wichtig: alle zusammengehörige Buttons haben den
gleichen namen! (Das Attribut name ist jeweils identisch). Der
Webbrowser kümmert sicht darum, dass immer nur ein Button
gleichzeitig ausgewählt sein kann.
<input type="checkbox" ... Stellt die kleinen viereckigen
Auswahlbuttons zur Verfügung. Es können mehrer buttons gleichzeit
aktiviert werden. Wichtig: alle zusammengehörige Buttons
haben auch hier den gleichen namen (wie beim Radio).
Eine Vorauswahl bei Radio und Checkboxen kann man durch <input
type=... checked> erreichen. Bitte nicht irritieren lassen,
checked wirkt allein durch seine Präsenz.
Es gibt noch den type="image", den werden wir und für eine der Übungen
aufheben.
Hinweis: es ist korrekt, alle input-Tags haben kein End-Tag.
Sonstige Formularfelder
<html><head><title>Sonstige Eingabevarianten</title>
<style>
td {
vertical-align: top;
padding-bottom: 20pt;
}
</style>
</head><body>
<h3>Sonstige Eingabevarianten...</h3>
<form action="mailto:info@nekosoft.de" method="post">
<table>
<tr>
<td colspan="2"><textarea name="eingabefeld" rows="5"
cols="30">Eingabefeld</textarea></td>
</tr>
<tr>
<td>Einmalauswahl Menue</td>
<td><select name="menu1">
<option value="1">Feld1</option>
<option value="2">Feld2</option>
<option value="3">Feld3</option>
<option value="4">Feld4</option>
</select></td>
</tr>
<tr>
<td>Mehrfachauswahl Menue</td>
<td><select name="menu2" multiple size="3">
<option value="1">Feld1</option>
<option value="2">Feld2</option>
<option value="3">Feld3</option>
<option value="4">Feld4</option></td>
</select>
</tr>
</table>
</form>
</body></html>
<textarea> und </textarea> liefern ein Fenster für einen
Freitext. Man kann etwas Text bereits vorgeben, indem man ihn
zwischen die beiden Tags schreibt. Die Höhe und Breite des
Eingabefeldes wird durch die Attribute rows und cols bestimmt.
Rows zeigt an, wie viele Zeilen das Feld haben soll und cols wie
viele Zeichen pro Zeile.
<select> liefert ein Menue zum Auswählen von bereits angegebenen
Möglichkeiten. Es gibt zwei verschiedene Typen:
Einmalauswahl: hier benötigt man lediglich das Attribut name.
Mehrfachauswahl: hier benötigt man zusätzlich die Attribute
multipe (etwas ganz besonderes, da es allein durch seine Existenz
etwas bewirkt) und mit size gibt man an, wie viele Felder sichtbar
sein sollen.
<option> und </option> zeigen jeden einzelnen, anklickbaren
Menuepunkt an. Im Attribut value schreibt man rein, was der
Webbrowser als 'Inhalt' des Feldes an das Programm liefern soll,
wenn der entsprechende Menuepunkt ausgewählt wird. Damit ist man
unabhängig vom Text, der dann letztendlich als Benutzerführung
dient.
selected verwendet man um eine Vorauswahl anzugeben:
<option value="2" selected>Zweite Wahl</option>
Layout am Beispiel eines Feedback-Formulars
Bis hier hin hatten wir viele neue Tags. Diese kann man bei Bedarf
einfach nachschlagen. Der eigentlich spannende Teil kommt jetzt:
Wie bekomme ich die Dinger hübsch angeordnet?
Die Antwort ist klar: Mit HTML. Wir dürfen uns austoben und genau
das werden wir jetzt anhand eines kleinen(!) Feedback-Formulars
machen.
Wir gehen Schrittweise vor, von der Idee bis zur fertigen
Umsetzung.
Bevor man sich an den Rechner setzt, ist es sehr ratsam sich mit
Papier und Bleistift an einen ruhigen, gemuetlichen Ort zu setzen
und aufzuschreiben, was man möchte. Hierbei kann man auch gleich
das Design berücksichtigen.
Erst danach geht es an den Rechner - die eigentliche
Implementierung ist dann nur noch ein systematisches Umsetzen der
Skizze und eventuelle kleine optische Korrekturen.
Wir beginnen also mit einer Skizze und ein paar Stichpunkten, was
wir uns wünschen.
Um zu wissen, wer uns schreibt, muss er uns zumindest seinen Namen
verraten. Angabe von Name. Eine Postadresse? Wollen wir die?
Vorerst noch nicht.
Um gerade bei ausländischen Namen nicht ins Fettnäpfchen zu
treten, fragen wir am besten auch gleich, wie die Anrede sein
soll. Alternativ könnte man auch nach dem Geschlecht
(männl./weibl.) fragen.
Wollen wir dem Benutzer eine EMail schreiben können? Dann brauchen
wir die Angabe einer EMailadresse. Das kann man aber später noch
ergänzen.
Jetzt brauchen wir auf jeden Fall ein Feld, in dem der Benutzer
uns seine Gedanken mitteilen kann.
Zum Abschluß nicht den Abschicken-Button vergessen!
Eine grobe Abschätzung wie groß die jeweiligen Eingabefelder sein
könnten, schreiben wir in die freien Ecken. Die einzeiligen Felder
schätzen wir auf 15 bis 20 Zeichen. Das große Textfeld könnte bei
30-40 Zeichen Breite und um die 7 Zeilen Länge optisch ganz nett
wirken.
Jetzt noch ein Blick auf das optische Layout.
Die Beschriftungen der Felder sind links und in sich bündig
ausgerichtet. Ob Rechtsbündig oder linksbündig besser aussehen,
können wir später am Computer ausprobieren.
Der Text neben dem großen Eingabefeld liegt oben links daneben.
Das ganze schreit nach Tabelle, diese zeichnen wir jetzt in einer
anderen Farbe in unsere Skizze mit ein.
Ob wir den blauen Rahmen behalten möchten? Können wir später,
ausprobieren.
Für die Schrift werden wir versuchen eine hübsche Schreibschrift
zu finden (Muriel), als Alternativen wählen wir Coronet, Slogan und einfach
cursive. Ich habe einfach eine Schrift im Bildbearbeitungsprogramm
ausgewählt. Da ich hier eine Standardinstallation habe, stehen die
Chancen ganz gut, dass der ein oder andere Surfer da draußen genau diese
Schrift auch hat.
Den blauen Unterstrich unter der Überschrift könnten wir mit einem
Bildchen einlagern, welches wir in einem einfachen
Bildbearbeitungsprogramm erstellen. Wir können auch erst einmal
darauf verzichten.
Muriel, script #00045b
Jetzt setzen wir mit HTML die Struktur unserer Seite um, danach machen
wir mit CSS etwas Optik.
<html><head><title>erstes Formular</title>
</head><body>
<h3>Feedback</h3>
<form action="mailto:info@nekosoft.de" method="post">
<table border="1">
<tr>
<td>Anrede</td>
<td>
<select name="anrede">
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
</td>
</tr>
<tr>
<td>Vorname</td>
<td><input type="text" name="vname" size="15"></td>
</tr>
<tr>
<td>Nachname</td>
<td><input type="text" name="nname" size="15"></td>
</tr>
<tr>
<td>Nachricht</td>
<td><textarea name="msg" rows="7" cols="30"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Abschicken"></td>
</tr>
</table>
</form>
</body></html>
Sehen wir uns das Ganze nocheinmal etwas genauer an.
Wir beginnen mit einer Überschrift.
Danach eröffnen wir unser Formular mit dem form-Tag. Wenn man eine
Tabelle zum Layout eines Formulares verwendet, legt man das
Formular immer um die Tabelle drumherum. Zur Not auch um mehrere
Tabellen.
Jetzt darf man sich nicht von der Tabelle irritieren lassen. Sie
hat 5 Zeilen mit je zwei Spalten.
Es empfiehlt sich zum Entwickeln immer einen border zu behalten
(also border="1" oder 2 oder größer). Das erleichtert die
Fehlersuche enorm, da man sieht, wo die Zellenränder sind (und
damit wo man ein td oder tr vergessen hat).
Wir steigen gleich am Anfang mit einem Auswahlmenue ein. Der name
ist frei gewählt, aber der Einfachheit halber ist er 'sprechend',
d.h. man kann am Namen ersehen, welche Funktion das Menue hat.
Als nächstes kommen zwei fast identische Tabellenzeilen: die eine
für den Vornamen, die andere für den Nachnamen. Beide
Eingabefelder sind einfache Textzeilen.
Jetzt noch das große Eingabefeld: <textarea>
Und zum Schluss mit <input type="submit" value="Abschicken">
unseren Button zum Abschicken des Formulars.
Jetzt noch einen kurzen Blick auf das form-Tag oben: Wir schicken
unser Formular an eine Emailadresse, als method verwenden wir auch
hier wieder Post (Groß- Kleinschreibung ist egal). Dies sollte man
immer verwenden, wenn man Daten per EMail verschicken möchte. Die
Alternative wäre GET, sie eignet sich nur für kurze Formulare, die
von einem echten Programm bearbeitet werden. Die Online
Übungsumgebung wird hierzu eine Übung zur Verfügung stellen.
Eigentlich war es das jetzt schon, wir können uns nun noch etwas
der Optik hingeben. Dafür verwenden wir Stylesheets, die wir
wieder im head-Bereich einlagern.
Es empfiehlt sich an dieser Stelle das Kapitel CSS (Kapitel 5) noch einmal
daneben zu legen und damit den folgenden Code genauer zu
betrachten.
<html><head><title>erstes Formular</title>
<style>
body {
color: #00045b;
font-family: Muriel, Coronet, Slogan, cursive;
font-size: 30pt;
margin: 5px;
border: 3px solid #00045b;
}
h3 { text-align: center; }
td {
font-family: Muriel, Coronet, Slogan, cursive;
font-size: 25pt;
vertical-align: top;
padding: 5pt 10pt 5pt 10pt;
}
input, select, textarea {
border: 1px solid #00045b;
background-color: #ffffff;
}
.right { text-align: right; }
.button {
font-family: Muriel, Coronet, Slogan, cursive;
font-size: 25pt;
color: #00045b;
background-color: #ffffff;
border: 1px solid #00045b;
}
</style>
</head><body>
<h3>Feedback</h3>
<form action="mailto:info@nekosoft.de" method="post">
<table border="0" align="center">
<tr>
<td class="right">Anrede</td>
<td>
<select name="anrede">
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
</td>
</tr>
<tr>
<td class="right">Vorname</td>
<td><input type="text" name="vname" size="15"></td>
</tr>
<tr>
<td class="right">Nachname</td>
<td><input type="text" name="nname" size="15"></td>
</tr>
<tr>
<td class="right">Nachricht</td>
<td><textarea name="msg" rows="7" cols="30"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Abschicken" class="button"></td>
</tr>
</table>
</form>
</body></html>
body - interessant ist hier die Kombination aus margin und border.
Sie sorgt für den blauen Rand in einigen Pixeln Abstand.
td - bemerkenswert hier: padding. Man kann bei padding und margin
im Uhrzeigersinn alle 4 Seiten angeben. Dabei wird mit der
obersten angefangen. Gibt man nur einen Wert an, wird dieser für
alle 4 möglichen Ränder verwendet.
input, select, textarea - mit Komma getrennt, kann man
angeben auf welche Tags oder class-Angaben die Angaben wirken
sollen. Wir geben hier also allen input, select und textarea Tags
eine weiße Hintergrundfarbe und einen dunkelblauen Rand.
Zusätzlich verteilen wir noch ein paar Attribute:
Jede linke Tabellenzelle bekommt ein class="right", damit der
Inhalt rechtsbündig angezeigt wird.
Unser Abschicken Button bekommt ein eigenes class="button"
verpasst und das table-Tag erweitern wir um ein Attribut:
align="center". Dieses ist zwar veraltet, aber die Alternative mit
Stylesheets wird leider von vielen Webbrowsern noch nicht umgesetzt.
W3Consortium
Kapitel Formulare im Standard (engl. Original)
Erweiterungen
Erweitern Sie unser Formular aus dem Beispiel um die Angabe
einer EMailadresse.
zwischen den Tabellenzeilen für Nachname und Nachricht, fügt man
eine weitere Tabellenzeile ein, die die EMailadresse abfragt.
....
<tr>
<td class="right">Nachname</td>
<td><input type="text" name="nname"
size="15"></td>
</tr>
<tr>
<td class="right">EMail Adresse</td>
<td><input type="text" name="email"
size="15"></td>
</tr>
<tr>
<td class="right">Nachricht</td>
<td><textarea name="msg" rows="7"
cols="30"></textarea></td>
</tr>
....
Sendebutton im Eigenbau
Die Gestaltungsmöglichkeiten beim Sendebutton sind naturgemäß
etwas eingeschränkt. Deswegen gibt es eine Möglichkeit, ein Bild
als Sendebutton zu definieren:
<input type="image" src="submitbutton.png">
Der Webbrowser weiß anhand der Angabe image, daß es sich um
ein Bild handelt, welches als submit fungiert. src gibt - wie
beim img-Tag auch - an, wo das Bild zu finden ist, welches er
als Button verwenden soll.
Die anderen Attribute name und value sind auch hier zulässig.
Man benötigt sie bei kleinen Formularen allerdings selten.
Tauschen Sie doch einmal den Button in unserem Beispiel aus
diesem Kapitel gegen einen runden Knopf aus!
Original:
<td><input type="submit"
value="Abschicken"
class="button"></td>
Neu:
<td><input type="image"
src="submitbutton.png"
value="Abschicken"
class="button"
style="border: 0px solid transparent;"></td>
Unser style malt um alle Eingabefelder (am Tag input
festgemacht) einen blauen Rahmen. Den
unterbinden wir hier im Tag mit einer eigenen style-Angabe.