Webseitenbau
Home
Site/Index
 
Web Webseitenbau
Google English français  
⬆4. 8. 5 Eingabefelder definieren

4.8.5 Eingabefelder definieren

Technik

Pfeil nach rechts (Icon)
      120 x 120 Pixel Formulare: Beschriftung mit Labels

    

Anwendung

Pfeil nach rechts (Icon)
      120 x 120 Pixel Formulare: Formularbox

-

1 Allgemein

Man unterscheidet hauptsächlich

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

-

2 Beschriftung der Felder mit <label>

Pfeil nach rechts (Icon)
      120 x 120 Pixel Formulare: Beschriftung mit Labels

-

3 Einzeilige Eingabefelder <input>

-

a) Erzeugung eines einzeiligen Formularfeldes

Code <input>

<input name="..." type="text" size="..." id="..." size="..." maxlength="..." value="...">

Das Element <input...>

Attribute von <input ....="...">

<input name="..." type="text" size="..." id="..." size="..." maxlength="..." value="...">

Wichtig

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:

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:



Workshop

-

b) Textvorbelegung bei einzeiligen Eingabefeldern value="..."

Prinzip

Code mit Attribut <input value="...">

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:


Workshop

-

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

-

a) Mehrzeilige Eingabefelder

Prinzip

Code

<textarea name="..." id="..." cols="..." rows="..."> ... </textarea>

Element-Code <textarea...</textarea>

Attribute: <textarea name="..." id="..." cols="..." rows="...">

Eingabe des vorgegebenen Textes

Wichtig

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, 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:


Workshop:

-

b) Textvorbelegung bei mehrzeiligen Eingabebereichen

Prinzip:

Codes:

<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:

Workshop:

-

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:

Bei einzeiligen Feldern:

Bei mehrzeiligen Feldern:

<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:


Workshop

-

6 Grundlagen-Websites & Workshops