4.8.5 Eingabefelder definieren

• 1 Allgemein
• 2 Beschriftung der Felder mit <label>
• 3 Einzeilige Eingabefelder <input>
  • a) Erzeugung eines einzeiligen Formularfeldes
  • b) Textvorbelegung bei einzeiligen Eingabefeldern value="..."
  • c) Eingabefeld mit farbigem Hinter- und Vordergrund und Rahmen
• 4 Mehrzeilige Eingabefelder <textarea> </textarea>
  • a) Mehrzeilige Eingabefelder
  • b) Textvorbelegung bei mehrzeiligen Eingabebereichen
  • c) Mehrzeiliges Eingabefeld mit farbigem Hinter- und Vordergrund
• 5 Eingabefelder auf "nur lesen" setzen readonly
• 6 Grundlagen-Websites & Workshops

Technik Formulare: Beschriftung mit Labels

Anwendung Formulare: Formularbox

-

⇧ 1 Allgemein

Man unterscheidet hauptsächlich

1. Einzeilige Eingabefelder <input>
2. Mehrzeilige Eingabefelder <textarea>...</textarea>

-

⇧ 2 Beschriftung der Felder mit <label>

Formulare: Beschriftung mit Labels

-

⇧ 3 Einzeilige Eingabefelder <input>

• a) Erzeugung eines einzeiligen Formularfeldes
• b) Textvorbelegung bei einzeiligen Eingabefeldern value="..."
• c) Eingabefeld mit farbigem Hinter- und Vordergrund und Rahmen

-

↑ a) Erzeugung eines einzeiligen Formularfeldes

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

Einzeiliges Formularfeld:

Vorname
Nachname

Workshop

• SELFHTML de Einzeilige Eingabefelder
• SELFHTML de Beispiel

-

↑ b) Textvorbelegung bei einzeiligen Eingabefeldern 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:

Einzeiliges Formularfeld mit einem vorgegebenen Text:

Vorname
Nachname

Workshop

• SELFHTML de Textvorbelegung bei einzeiligen Eingabefeldern

• SELFHTML de Beispiel

-

↑ c) Eingabefeld mit farbigem Hinter- und Vordergrund und Rahmen

1) Eintrag im Quelltext:

<input type="text" style="background-color:#E0F0FF;color:#0055cc; border:1px solid #ff0000;">

2) Anzeige im Dokument:

-

⇧ 4 Mehrzeilige Eingabefelder

• b) Mehrzeilige Eingabefelder
• c) Textvorbelegung bei mehrzeiligen Eingabebereichen
• d) Mehrzeiliges Eingabefeld mit farbigem Hinter- und Vordergrund

-

↑ a) Mehrzeilige Eingabefelder

Prinzip

• Es können Felder für mehrere Zeilen vorgegeben werden.

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:

• Die Elemente input und textarea haben die gleiche Formatierung. Beide sind normalerweise rechts vom flotenden Label rechhts der "Mittellinie".
• Die Schrift der Felderinhalte 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

Hier kann ein mehrzeiliger Text eingegeben werden:

Nachricht

Workshop:

• SELFHTML: Mehrzeilige Eingabebereiche
• SELFHTML: Beispiel

-

↑ b) Textvorbelegung bei mehrzeiligen Eingabebereichen

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>

Hier der Anfang der Geschichte:

Geschichte Es war dunkel, feucht und neblig ...

Workshop:

• SELFHTML de Textvorbelegung bei mehrzeiligen Eingabebereichen
• SELFHTML de Beispiel

-

↑ c) Mehrzeiliges Eingabefeld mit farbigem Hinter- und Vordergrund

<textarea cols="40" rows="7" 
style="background-color:#E0F0FF;color:#0055cc;">
</textarea>

-

⇧ 5 Eingabefelder auf "nur lesen" setzen 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>

Diese Felder können nicht verändert werden:

Preis
Lizenz-
Vereinbarung Mit dem Absenden ...

Workshop

• SELFHTML de Eingabefelder und Eingabebereiche auf "nur lesen" setzen
• SELFHTML de Beispiel

-

⇧ 6 Grundlagen-Websites & Workshops

• W3C Recommendation -
  HTML 4.01 Specification:
  Deutsche Übersetzung de Das Element INPUT

• W3C Recommendation -
  HTML 4.01 Specification:
  Deutsche Übersetzung de Das Element TEXTAREA

• SELFHTML-Wiki de HTML/Formulare/Eingabefelder und Eingabebereiche
• SELFHTML-Wiki de HTML/Formulare/Eingabefelder/Input Beispiel
• SELFHTML-Wiki de HTML/Formulare/Eingabefelder/Textarea Beispiel

• CSS 4 You de Farbige Formularelemente

↑