<label>
<input>
<textarea>
</textarea>
readonly
Technik Formulare: Beschriftung mit Labels |
Anwendung Formulare: Formularbox |
Man unterscheidet hauptsächlich
<input>
<textarea>
...</textarea>
<label>
Formulare: Beschriftung mit Labels
<input>
value="..."
Code <input>
<input name="..." type="text" size="..." id="..." size="..."
maxlength="..." value="...">
Das Element <input...>
<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.
Attribute von <input ....="...">
<input name="..." type="text" size="..." id="..." size="..."
maxlength="..." value="...">
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).
Wichtig
Nach jedem <input ...>
muss ein Zeilenumbruch
<br>
eingefügt werden.
Beispiel
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:
Die Elemente input
und textarea
haben
die gleiche Formatierung. Beide sind normalerweise rechts vom floatenden
Label, also rechts der "Mittellinie".
Die Schrift der Formularfelder kann hier angegeben werden.
Wichtig: 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
In den Feldern kann ein Eintrag vorgegeben werden.
Der Eintrag kann vom Benutzer verändert werden.
Code mit Attribut <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
SELFHTML de Textvorbelegung bei einzeiligen Eingabefeldern
SELFHTML de Beispiel
1) Eintrag im Quelltext:
<input type="text" style="background-color:#E0F0FF;color:#0055cc; border:1px solid #ff0000;">
2) Anzeige im Dokument:
Prinzip
Code
<textarea name="..." id="..." cols="..." rows="...">
...
</textarea>
Element-Code <textarea
...</textarea>
Der Code für das Element mehrzeiliger Felder heisst <textarea>
Dieser Code muss mit dem End-Tag </textarea>
abgeschlossen werden.
Attribute: <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).
Eingabe des vorgegebenen Textes
Der vorgegebene Text für mehrzeilige Formularfelder wird zwischen
<textarea>
und </textarea>
eingegeben.
(Siehe nächsten Abschnitt).
Wichtig
Nach jedem <textarea>
und </textarea>
muss ein Zeilenumbruch <br>
eingefügt werden.
Beispiel
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:
Wie bei einzeiligen Feldern, kann auch bei mehrzeiligen Feldern ein Text vorgegeben werden.
Der vorgegebene Text kann vom Benutzer überschrieben werden.
Codes:
Die Eingabe des vorgegebenen Textes erfolgt zwischen den Codes:
<textarea>
und </textarea>
(und nicht wie bei einzeiligen Feldern mit dem Code
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>
readonly
Prinzip:
Der vorgegebene Text kann nicht verändert werden.
Code für "nur lesen": 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