<form><label><input><textarea>select/option<input type="radio"><input type="checkbox"><input type="file">onclick="..."<fieldset> <legend>Prinzip:
Grundlagen:
Workshops:
<form>
Prinzip:
<form> und </form> wird ein
Formular definiert. Alles, was zwischen diesen beiden Tags steht,
gehört zum Formular.
Grundlagen und Workshops:
<form action="..." method="...">...</form>
<form> Dies ist der Formular-Tag und steht ganz am Anfang
des Formulars. Dieser Code erzeugt eine "Formularbox"
(oder "Formular-Container").
<form action="..." method="..."> Attribute des Formulars.
<form> und </form>
werden die Elemente des Formulars eingetragen.
</form> mit diesem Code wird das Formular abgeschlossen.
<form action="..." method="...">
<form ...>
Quelltext: form (es ist kein weiterer Eintrag notwendig)
Stylesheet: form {...} (siehe "Stylesheet")
Quelltext: form class="xxx"
Stylesheet: form.xxx {...}
action="..."
Prinzip:
action="..." Angabe der URL der Datei, in der die Eingaben verarbeitet
werden. Die URL kann absolut http://www... oder relativ sein
(nur Dateiname), wenn sich die Datei im gleichen Ordner befindet.
#... oder Querystring ?...
Mit einem dieser Zusätze zum Dateinamen kann nach dem Absenden eine
bestimmte Stelle im Dokument angezeigt werden.
Beispiel:
Workshops:
method="..."
Prinzip:
action="..." angegebene Datei
übermittelt werden.
Arten der Weiterleitung:
method="post" Die "Post"-Methode Übermittelt die Daten
über den Header.$... = $_POST ['...'];
eingelesen werden.
method="get" Die "GET"-Methode übermittelt die Daten
über die URL.$... = $_GET ['...'] eingelesen werden.
Bemerkungen:
Grundlagen und Workshops:
1) Quelltext
<form action="../php/formulare.php#k_form" method="post"> <p>"Formularbox" noch ohne Formularelemente</p> </form>
2) Stylesheet
form {
clear:left;
background:#CCEEFF;
border:thin solid #6666FF;
margin:0;
padding:0 1em 1em 1em;
}
3) Anzeige im Dokument
Prinzip:
Grundlagen und Workshops:
<p> und </p>
zu setzen.
<br> erzeugt.
<label>
Prinzip:
Grundlagen und Workshops:
Prinzip
float:left.
1) Quelltext:
<label for="..."> ... </label>
<label> und </label> sind Anfangs- und
End-Tag des Labels.
label for="..." In den Klammern wird der Name des Labels eingegeben.
Zugelassene Schriftzeichen: Kleinbuchstaben (als Empfehlung), keine Zahl am Anfang, keine Abstände, kein Bindestrich, keine Sonderzeichen mit Ausnahme des Unterstriches.
Wichtig: Dieser Eintrag muss identisch sein mit der Identifikation
id="..." des Formularelementes (zB. Formularfeldes),
das mit diesem Label beschriftet wird.
<label> und </label>
wird die Beschriftung des Formularelementes eingegeben.
Quelltext nur des Labels:
<label for="lab_beschriftung1">Beschriftung 1</label>
Quelltext des Labels im Formular zusammen mit dem Formularfeld:
<form action="..." method="post"> <p>Normale Beschriftung links vom Formualfeld:<br> (Die Beschriftung "floatet" links vom Formularfeld)</p> <label for="lab_beschriftung1">Beschriftung 1</label> <input type="text" name="lab_beschriftung1" id="lab_beschriftung1" size="30" maxlength="30"> </form>
2) Stylesheet
display:block; Diese Angabe erzwingt einen Block und damit eine
neue Zeile.
float:left; Die Labels "floaten" links vom nächsten Element,
das im vorliegenden Fall ein Formularfeld ist.
width:...; gibt die Breite des Beschriftungsfeldes,
d.h. den Abstand vom linken Rand bis zum Formularfeld. Dies kann auch
als Abstand bis zur "Mittellinie" bezeichnet werden.
text-aling:right; richtet die Beschriftung nach rechts aus.
padding-right:...; Abstand rechts (bis zum Formularfeld).
label {
/*Alle Labels ohne Radio-Buttons und Checkbox*/
display:block; float:left;
/*Die Beschriftung "floatet" links*/
margin-top:4px;
padding-right:1em;/*Abstand rechts d.Beschriftung*/
text-align:right;/*Beschr.nach rechts ausgerichtet*/
width:9em;/*Breite links der Mittellinie*/
}
3) Dokument
Prinzip
1) Quelltext
label class="nofloat" Mit dieser Formatierung wird "floaten"
des Labels ausgeschaltet.
<form action="..." method="post"> <p>Beschriftung oberhalb des Formularfeldes:<br> (Das "floaten" wurde ausgeschaltet)</p> <label class="nofloat" for="lab_beschriftung2"> Beschriftung 2</label> <input type="text" name="lab_beschriftung2" id="lab_beschriftung2" size="30" maxlength="30"> </form>
2) Stylesheet
.nofloat {...} Mit dieser Angabe wird das floaten
der damit formatierten Elemente ausgeschaltet.
text-align:left; richtet die Beschriftung links aus.
.nofloat { /*Für Elemente, die nicht "floaten" sollen*/
float:none;
text-align:left;
}
3) Dokument
Bemerkungen:
1) Quelltext:
<form action="..." method="post"> <fieldset> <legend>Formular</legend> <label for="lab_name">Name</label> <input type="text" name="lab_name" id="lab_name" size="30" maxlength="40" value="Ihr Vorname und Nachname"><br> <label for="lab_email">E-Mail</label> <input type="text" name="lab_email" id="lab_email" size="30" maxlength="40" value="Ihre E-Mail Adresse"><br> <label for="lab_text">Text</label> <textarea name="lab_text" id="lab_text" cols="30" rows="5"> Dies ist ein Eingabefeld für einen mehrzeiligen Text. </textarea><br> </fieldset> </form>
2) Website:
<input><textarea>
Prinzip - Man unterscheidet hauptsächlich:
<input>
<textarea> </textarea>
Grundlagen und Workshops:
<input>
Beschriftung des Formulafeldes mit einem Label:
<label for="...">...</label>
label for="..." Hier wird der Name des Labels eingegeben.
<label ...> und </label>
wird die Beschriftung des Labels geschrieben.
</label> ist der Endtag des Labels.
Einzeiliges Formularfeld:
<input type="text" name="..." size="..." id="..." size="..."
maxlength="..." value="...">
<input ...> Dieser Eintrag erzeugt ein einzeiliges
Formularfeld, in das der Benutzer hineinschreiben kann.
Das "Input"-Tag ist ein so genanntes Standalone-Tag und hat keinen Endtag.
name="..." Dies ist der Name der Variablen, in die der vom
Benutzer eingegebene Text gespeichert wird.
type="text" Diese Angabe gibt die Art des Feldes an.
Im vorliegenden Fall ist es ein Feld, in das Text eingegeben werden kann.
id="..." Dies ist die Identifikation des Feldes.
Es wird auch hier der Name des Feldes eingegeben.
Diese Angabe wird zum Beispiel vom Label zur Beschriftung dieses Feldes benötigt. (Dieser Eintrag fehlt auf den entsprechenden Internetseiten von SELFHTML, da SELFHTML diese Formulare ohne Labels macht)
size="..." gibt die Länge des Formularfeldes in Anzahl Zeichen.
maxlength="..." gibt die maximale Anzahl Zeichen des Eintrages.
value="..." Hier kann ein Text vorgegeben werden (siehe nächsten
Abschnitt).
<input ...> muss ein Zeilenumbruch
eingefügt werden.
1) Eintrag im Quelltext:
<form action="..." method="post"> <p>Einzeiliges Formularfeldt:</p> <label for="e_vorname">Vorname</label> <input type="text" name="e_vorname" id="e_vorname" size="30" maxlength="40" value=""><br> <label for="e_nachname">Nachname</label> <input type="text" name="e_nachname" id="e_nachname" size="30" maxlength="40" value=""><br> </form>
2) Stylesheet:
input und textarea haben
die gleiche Formatierung. Beide sind normalerweise rechts vom floatenden
Label, also rechts der "Mittellinie".
br {clear:left} Mit diesem Code muss das
"Floaten" nach jedem Element ausgeschaltet werden.
input, textarea {
margin-top:4px;
padding:0;
vertical-align:middle;
font-size:1em;
font-family:monospace;
width:auto;
}
br {
clear: left;
{
3) Anzeige im Dokument:
Workshop:
value="..."
Prinzip:
Code: <input value="...">
value="..." Hier muss der vorgegebene Text eingetragen werden.
1) Eintrag im Quelltext:
<form action="..." method="post"> <p>Einzeiliges Formularfeld mit einem vorgegebenen Text:</p> <label for="m_vorname">Vorname</label> <input type="text" name="m_vorname" id="m_vorname" size="30" maxlength="40"> value="Michaela"><br> <label for="m_nachname">Nachname</label> <input type="text" name="m_nachname" id="m_nachname" size="30" maxlength="40"> value="Mustermann"> </form>
2) Anzeige im Dokument:
Workshop:
<input type="text" style="background-color:#E0F0FF;color:#0055cc; border:1px solid #ff0000;">
<textarea>
Prinzip:
Codes:
<textarea>
und muss mit </textarea> abgeschlossen werden.
<textarea name="..." id="..." cols="..." rows="...">
name="..." ist der Name der Variablen, in der die Daten gespeichert werden.
id="..." Nochmalige Eingabe des Namens.
cols="..." gibt die Anzahl Zeichen in einer Zeile (cols = columns = Spalten).
rows="..." gibt die Anzahl Zeilen (row = Zeile).
<textarea>und </textarea> eingegeben.
(Siehe nächsten Abschnitt).
<input ...> muss ein Zeilenumbruch
eingefügt werden.
1) Eintrag im Quelltext
<form action="..." method="post"> <p>Hier kann ein mehrzeiliger Text eingegeben werden:</p> <label for="m_nachricht">Nachricht</label> <textarea name="m_nachricht" id="m_nachricht" cols="30" rows="7"></textarea><br> </form>
2) Stylesheet:
input und textarea haben
die gleiche Formatierung. Beide sind normalerweise rechts vom flotenden
Label rechhts der "Mittellinie".
br {clear:left} Mit diesem Code muss das
"Floaten" nach jedem Element ausgeschaltet werden.
input, textarea {
margin-top:4px;
padding:0;
vertical-align:middle;
font-size:1em;
font-family:monospace;
width:auto;
}
br {
clear: left;
{
3) Anzeige im Dokument
Workshop:
Prinzip:
Codes:
<textarea> und </textarea>value="...")
<form action="..." method="post"> <p>Hier der Anfang der Geschichte:</p> <label for="geschichte">Geschichte</label> <textarea name="geschichte" id="geschichte" cols="30" rows="7"> Es war dunkel, feucht und neblig ...</textarea> </form>
Workshop:
<textarea cols="40" rows="7" style="background-color:#E0F0FF;color:#0055cc;"> </textarea>
password
Prinzip:
Code: <input type="password">
Die anderen Attribute von "input" sind unverändert:
name="..." Der Name der Variablen kann wie immer selbst gewählt werden.
id="..." Nochmals der Name des Formularfeldes für die
Idebtifikation (identisch mit dem Namen der Variablen).
size="..." Grösse des Feldes in Anzahl Zeichen.
maxlength="..." Maximale Anzahl Zeichen, die eingegeben werden können.
1) Eintrag im Quelltext
<form action="..." method="post"> <p>Geben Sie bitte Ihr Passwort ein (max. 12 Zeichen):</p> <label for="kennwort">Passwort</label> <input type="password" name="kennwort" id="kennwort" size="12" maxlength="12"> </form>
2) Anzeige im Dokument
Workshop:
readonly
Prinzip:
readonly
Bei einzeiligen Feldern:
<input type="text" name="..." id="..."
size="..." value="..." readonly>
Bei mehrzeiligen Feldern:
<textarea name="..." id="..."
cols="..." rows="..." readonly>
<form action="..." method="post"> <p>Diese Felder können nicht verändert werden:</p> <label for="preis">Preis</label> <input type="text" name="preis" id="preis" size="8" value="€ 699.-" readonly><br> <label for="lizenz">Lizenz-<br>Vereinbarung</label> <textarea name="lizenz" id="lizenz" cols="35" rows="7" readonly> Mit dem Absenden ...</textarea> </form>
Workshop:
select/option
Prinzip:
select Dient zur Selektionierung.
option Mit diesem Code können verschiedene Optionen angeboten
werden.
Grundlagen und Workshop:
Select:
<select name="..." id="..." size="..."> ... </select>
<select ...> Mit diesem Code wird das Element Auswahlliste
eingeleitet. Dieser Tag hat den Endtag </select>
name="..." Name des Elementes.
id="..." Das ist das Attribut für die Identifikation
dieses Elementes.
size="..." Die Anzahl der angezeigten Optionen.Option:
<select ...> und </select>
eingegeben.
<option> und
</option> eingetragen.
<form action="..." method="post"> <p>Wahl eines der 5 Interpreten:</p> <label for="interpret1">Interpret</label> <select name="interpret1" id="interpret1" size="3"> <option>Heino</option> <option>Michael Jackson</option> <option>Tom Waits</option> <option>Nina Hagen</option> <option>Marianne Rosenberg</option> </select> </form>
Workshop:
multiple
Prinzip:
Code:
<select ... multiple>
<form action="..." method="post"> <p>Mit der "Shift"-Taste können mehrere gewählt werden:</p> <label for="interpret2">Interpret</label> <select name="interpret2" id="interpret2" size="3" multiple> <option>Heino</option> <option>Michael Jackson</option> <option>Tom Waits</option> <option>Nina Hagen</option> <option>Marianne Rosenberg</option> </select> </form>
Workshop:
option selected
Prinzip:
Code:
<option selected> Dies ist der entsprechende Eintrag bei
den Optionen.
<form action="..." method="post"> <p>Sie können auch einen anderen Favoriten wählen!</p> <label for="interpret3">Interpret</label> <select name="interpret3" id="interpret3" size="3"> <option>Heino</option> <option>Michael Jackson</option> <option selected>Tom Waits</option> <option>Nina Hagen</option> <option>Marianne Rosenberg</option> </select> </form>
Workshop:
value
Prinzip:
<option> und </option> notiert ist .
Code:
<option value="..."> Dies ist der entsprechende Eintrag
bei den Optionen.<option>
und </option> notiert ist weitergeleitet.
<form action="..." method="post"> <p>Pizza-Bestellung:</p> <label for="interpret4">Interpret</label> <select name="interpret4" id="interpret4" size="6" multiple> <option value="P101">Pizza Napoli</option> <option value="P102">Pizza Funghi</option> <option value="P103">Pizza Mare</option> <option value="P104">Pizza Tonno</option> <option value="P105">Pizza Mexicana</option> <option value="P106">Pizza Regina</option> <option value="P107">Pizza de la Casa</option> <option value="P108">Pizza Calzone</option> <option value="P109">Pizza con tutti</option> </select> </form>
Workshop:
<label for="eintrag">Farbige Einträge</label> <select id="eintrag" size="4" style="width:200; background-color:#A050A0; color:white;"> <option style="color:#ffff00;">Eintrag 1 <option style="color:#00ffff;">Eintrag 2 <option style="color:#00ff00;">Eintrag 3 <option style="color:#00ffff;">Eintrag 4 <option style="color:#ff0000;">Eintrag 5 <option style="color:#ff00ff;">Eintrag 6 <option style="color:#ffffff;">Eintrag 7 </select>
Grundlagen und Workshops:
Prinzip:
label class="clickbox"label.clickbox {...}
label class="clickbox"label.clickbox {...}
1) Stylesheet für das Label:
label.clickbox {...} Dies ist eine "Class"-Formatierung.
display:block; Diese Angabe erzwingt einen Block und damit eine
neue Zeile.
float:left; Die Labels "floaten" links vom nächsten Element,
das im vorliegenden Fall ein Formularfeld ist.
width:...; gibt die Breite des Beschriftungsfeldes,
d.h. den Abstand vom linken Rand bis zum Formularfeld. Dies kann auch
als Abstand bis zur "Mittellinie" bezeichnet werden.
text-aling:right; richtet die Beschriftung nach rechts aus.
padding-right:...; Abstand rechts (bis zum Formularfeld).
label.clickbox { /*Label für Radio-Buttons und Checkbox*/
display:block;
float:left; /*Die Beschriftung "floatet" links*/
clear:both;
margin-top:4px;
padding-right:1em; /*Abstand rechts der Beschriftung*/
text-align:right; /*Beschriftung nach rechts ausgerichtet*/
width:9em; /*Breite links der Mittellinie*/
}
2) Stylesheet für die Radio-Buttons und die Checkboxen:
input.clickbox {...} Dies ist eine "Class"-Formatierung.
(Hier ist eine "Class"-Formatierung nur notwendig, weil der Internet Explorer
die Stylesheet "Type"-Formatierung nicht erkennt.)
br {clear:left} Mit diesem Code muss das
"Floaten" nach jedem Element ausgeschaltet werden.
input.clickbox { /*Input für Radio-Buttons und Checkbox*/
padding-top:4px;
width:auto;
}
br {
clear: left;
{
⇒ Siehe Abschnitt "Druckknöpfe für Absenden und Verwerfen"
<input type="radio">
Prinzip:
Codes:
<input type="radio"> definiert.
name="...".
value="..." des ausgewählten Radio-Buttons
wird beim Absenden des Formulars mit übertragen.
Vorselektionierung:
<input ... checked> kann eine
Auswahlmöglichkeit vorselektioniet werden.checked="checked".
1) Quelltext der Labels:
label class="clickbox"label.clickbox {...}
2) Quelltext der "Inputs" für die Radio-Buttons:
input class="clickbox"input.clickbox {...}input[type=...] nicht
umsetzen kann.)
<form action="..." method="post"> <p>Geben Sie Ihre Zahlungsweise an:</p> <label class="clickbox" for="mastercard"> Kreditkarten</label> <input class="clickbox" type="radio" name="zahlungsweise" id="mastercard" value="mastercard"> Mastercard<br> <label class="clickbox" for="visa"></label> <input class="clickbox" type="radio" name="zahlungsweise" id="visa" value="visa" checked="checked"> Visa<br> <label class="clickbox" for="americanexpress" ></label> <input class="clickbox" type="radio" name="zahlungsweise" id="americanexpress" value="americanexpress"> American Express<br> <label for="rad_andere">Andere</label> <input type="text" name="rad_andere" id="rad_andere" size="30" maxlength="40" value=""><br> </form>
3) Dokument:
Bemerkungen zur Anzeige im Internet Explorer:
<input type="checkbox">
Prinzip:
Codes:
<input type="checkbox"> definiert.
name="...".
value="..." der gewählten Checkboxen werden beim
Absenden des Formulars mit übertragen.
Vorselektionierung:
<input ... checked> kann eine oder mehrere
Auswahlmöglichkeit vorselektioniert werdenchecked="checked".
1) Quelltext der Labels
label class="clickbox"label.clickbox {...}
2) Quelltext der "Inputs" für Checkboxen
input class="clickbox"input.clickbox {...}input[type=...] nicht
umsetzen kann.)
<form action="..." method="post"> <p>Kreuzen Sie die gewünschten Zutaten an:</p> <label class="clickbox" for="salami">Zutaten</label> <input class="clickbox" type="checkbox" name="zutat" id="salami" value="salami"> Salami<br> <label class="clickbox" for="pilze"></label> <input class="clickbox" type="checkbox" name="zutat" id="pilze" value="pilze"> Pilze<br> <label class="clickbox" for="sardellen"></label> <input class="clickbox" type="checkbox" name="zutat" id="sardellen" value="sardellen"> Sardellen<br> <label class="clickbox" for="oliven"></label> <input class="clickbox" type="checkbox" name="zutat" id="oliven" value="oliven"> Oliven<br> <label for="check_andere">Andere</label> <input type="text" name="check_andere" id="check_andere"size="30" maxlength="40" value=""><br> </form>
3) Dokument:
Bemerkungen zur Anzeige im Internet Explorer:
<input type="file">
Prinzip
Codes:
<form ...enctype="multipart/form-data"> Dies ist die Angabe im
einleitenden "Form"-Tag.
<input type="file"> wird die Art des Eingabefeldes
festgelegt.
maxlength="..." kann die maximale Grösse de Datei
limitiert werden.
<form action="..." enctype="multipart/form-data"> <p>Wählen Sie eine Textdatei (txt, html usw.) von Ihrem Rechner aus:<br> <input type="file" name="Datei" size="35" maxlength="10000" accept="text/*"> </p> </form>
Workshop:
Prinzip
action="..." festgelegt wurde.
Codes:
<input type="submit">
<input type="reset">
Moderne Browser: alle ohne Internet Explorer Version 6
Formatierung:
input [type=submit] und input [type=reset]
Dies sind die beiden "Type"-Formatierungen für diese Buttons.
1) Quelltext:
<input type="submit" value="Formular abschicken"> <input type="reset" value="Eingaben verwerfen">
2) Stylesheet
/*type= wird vom IE6 nicht verstanden*/
.input[type=submit], input[type=reset],
input[type=button] {
padding:1px 3px;
font-size:1em;
font-family:sans-serif;
}
3) Dokument
Workshop:
Bemerkung: Etwas besseres hat Microsoft bei der Erstellung dieser Anleitun noch nicht gehabt.
input [type=...]
nicht versteht müsste eigentlich eine Stylesheet "Class"-Formatierung
gemacht werden.input.button { ...}
1) Quelltext:
<input type="submit" value="Formular abschicken"> <input type="reset" value="Eingaben verwerfen">
2) Stylesheet
/*Nur wegen IE anstatt input type= */
.button {
padding:1px 3px;
font-size:1em;
font-family:sans-serif;
}
3) Dokument
Beispiel 1:
<input type="button" value="Klick mich" style="background-color:#ffe4b5;color:#000000; font-style:italic;font-weight:bold;">
Beispiel 2:
<input type="submit" name="button" style="background-color: #ff9900;" value="Abschicken">
Prinzip
<input type="submit"> verwenden.
<form action="http://de.selfhtml.org/cgi-bin/comments.pl"> <table border="0" cellpadding="5" cellspacing="0" bgcolor="#E0E0E0"> <tr> <td align="right">Ihre E-Mail-Adresse:</td> <td><input type="text" name="Mail" size="30" maxlength="30"></td> </tr> <tr> <td align="right">Formular:</td> <td><input type="image" src="absende.gif" alt="Absenden"></td> </tr> </table> </form>
Workshop:
Prinzip
type="submit" notieren.
Beachten Sie:
Workshop:
onclick="..."
Workshop:
<form action="..." method="post"> <p> <textarea cols="20" rows="4" name="textfeld"> </textarea> lt;input type="button" name="Text 1" value="Text 1 anzeigen" onclick="this.form.textfeld.value='Text 1 und rückwärts seltsam geschrieben ich bin.'"> <input type="button" name="Text 2" value="Text 2 anzeigen" onclick="this.form.textfeld. value='Ich bin Text 2 - ganz normal'"> </p> </form>
Workshop:
Codes
<input ...> Der Input-Tag ist ohne End-Tag
type="button" gibt an, dass es sich um einen Button handelt
value="Zurück" gibt die Beschriftung des Buttons
onClick="history.back()" sagt, was der Button für eine Funktion
ausführen soll
1) Quelltext:
<p> <input type="button" value="Zurück" onClick="history.back()"> </p>
<form action="..." method="post">
<div>
<button name="Klickmich" type="button"
value="Uuml;berraschung" onclick="alert
('Überraschung!');">
<p>
<img src="selfhtml.gif" width="106" height="109"
alt="SELFHTML Logo"><br>
<b>Was passiert wohl?</b>
</p>
</button>
</div>
</form>
Prinzip
<form name="Feedback" action="..." method="post">
<p>
<input type="hidden" name="UserBrowser" value="">
Ihr Kommentar:<br>
<textarea name="UserKommentar" rows="2"
cols="20"></textarea><br>
<input type="submit" value="senden"><br>
</p>
<script type="text/javascript">
document.Feedback.UserBrowser.value = navigator.appName;
</script>
</form>
Workshop:
<fieldset> <legend>
Prinzip:
Grundlagen und Workshops:
Codes:
<fieldset> Gruppe mit Titel und Rahmen
<legend> Bezeichnung der Felder
1) Quelltext:
<form action="..." method="post"> <fieldset> <legend>Absender</legend> <label for="fieldset_vorname">Ihr Vorname</label> <input type="text" name="fieldset_vorname" id="fieldset_vorname" size="40" maxlength="40"><br> <label for="fieldset_nachname">Ihr Nachname</label> <input type="text" name="fieldset_nachname" id="fieldset_nachname" size="40" maxlength="40" ><br> </fieldset> <fieldset> <legend>Wunsch</legend> <label for="fieldset_hauptwunsch">Ihr Hauptwunsch</label> <input type="text" name="fieldset_hauptwunsch" id="fieldset_hauptwunsch" size="40" maxlength="40"><br> <label for="fieldset_zusatzwunsch">Ihr Zusatzwunsch</label> <input type="text" name="fieldset_zusatzwunsch" id="fieldset_zusatzwunsch" size="40" maxlength="40" ><br> </fieldset> </form>
2) Stylesheet:
legend {
font-weight:bold;
}
3) Website:
tabindex="..."
Prinzip:
Grundlagen und Workshops:
Code:
tabindex="..." Zur Festlegung der Tabulatorposition.
<form action="..." method="post"> <p> Feld 1: <input type="text" size="40" maxlength="40" tabindex="101"><br> Feld 2: <input type="text" size="40" maxlength="40" tabindex="103"><br> Feld 3: <input type="text" size="40" maxlength="40" tabindex="102"><br> <input type="button" tabindex="104" value="Klick mich"> </p> </form>
Grundlagen und Workshop:
1) Quelltext:
<form action="..." method="post">
<p>Ein Feld mit [Alt]+f:</p>
<input type="text" size="40"
value="Feld" accesskey="f"></p>
<p>Ein Button mit [Alt]+b:</p>
<input type="button"
value="knopf" accesskey="b"></p>
<p>Ein Texteingabebereich mit [Alt]+t:</p>
<textarea cols="35" rows="5"
accesskey="t">Text</textarea></p>
</form>
2) Website:
1) Im Stylesheet von SELFHTML ist für das Beispiel folgender Eintrag:
<style type="text/css">
form { background-image:url(background.gif);
padding:20px; border:6px solid #ddd; }
td, input, select, textarea { font-size:13px;
font-family:Verdana,sans-serif; font-weight:bold; }
input, select, textarea { color:#00c; }
.Bereich, .Feld { background-color:#ffa;
width:300px; border:6px solid #ddd; }
.Auswahl { background-color:#dff; width:300px;
border:6px solid #ddd; }
.Check, .Radio { background-color:#ddff; border:1px
solid #ddd; }
.Button { background-color:#aaa; color:#fff;
width:200px; border:6px solid #ddd; }
</style>
2) Quelltext:
<form action="http://de.selfhtml.org/cgi-bin/comments.pl"> <table border="0" cellpadding="3" cellspacing="0"> <tr> <td align="right">Vorname:</td> <td><input type="text" name="cs_vorname" class="Feld" size="30" maxlength="30"></td> </tr> <tr> <td align="right">Nachname:</td> <td><input type="text" name="cs_nachname" class="Feld" size="30" maxlength="40"></td> </tr> <tr> <td align="right" valign="top">Geschlecht:</td> <td> <input type="radio" class="radio" name="Geschlecht" value="m"> männlich<br> <input type="radio" class="radio" name="Geschlecht" value="w"> weiblich </td> </tr> <tr> <td align="right" valign="top">Eigenschaften:</td> <td> <input type="checkbox" class="Check" name="Eigenschaft" value="Raucher"> Raucher<br> <input type="checkbox" class="Check" name="Eigenschaft" value="Autofahrer"> Autofahrer<br> <input type="checkbox" class="Check" name="Eigenschaft" value="HTMLFreak"> HTML-Freak </td> </tr> <tr> <td align="right" valign="top"> Nächste Grossstadt:</td> <td> <select name="Grossstadt" class="Auswahl" size="1"> <option value="Hamburg">Hamburg</option> <option value="Berlin">Berlin</option> <option value="Frankfurt">Frankfurt</option> <option value="Muenchen">München</option> </select> </td> </tr> <tr> <td align="right" valign="top">Kommentar:</td> <td><textarea name="Text" class="Bereich" rows="7" cols="30"></textarea></td> </tr> <tr> <td align="right">Formular:</td> <td> <input type="submit" value="Absenden"> <input type="reset" value="Abbrechen"> </td> </tr> </table> </form>
3) Ausgabe ohne die Verwendung des Stylesheets von SELFHTML:
Workshop: