HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum |
 

 
 

Anzeige 
 
               Forum
 
 
HTMLWorld » HTML » Formulare - Felder

HTML: Formulare - Felder

von Jan Winkler

Felder dienen zu Eingabe von Daten, Texten und sonstigem. Im Vergleich zum Papier-Formular stellen sie z.B. ein Feld für den Namen, ein Feld für einen Text oder Felder für ander Dinge dar.

Anzeige

Einzeiliges Textfeld  nach oben

Ein einzeiliges Textfeld wird mit dem input-Element notiert. Da mit dem input-Element verschiedene Arten von Textfeldern darstellen werden können wird zusätzlich die Angabe des Attributes type erwartet. Als Wert wird hier Text eingegeben, damit handelt es sich um ein Textfeld. Beispiel:

<form action="mailto:name@name.de">
<input name="Eingabefeld" type="text">
</form> 

Bitte beachten Sie, dass jedes Feld einen Namen enthalten muss. Der Name des Feldes wird im Wert des name-Attributs notiert. Ebenfalls zu beachten ist, dass das input-Element keinen beendenden Tag erhalten muss. Er kan weggelassen werden.

Vorbeschriftung

Eine Vorbeschriftung, also die vorherige Angabe des Inhalts eines Textfeldes, können sie mit dem value-Attribut vornehmen. Im diesem Attribut wird gespeichert, was im jeweiligen Textfeld steht. Beispiel:

<form action="mailto:name@name.de">
 <input value="Geben sie hier ihren Namen ein" name="Namenfeld"
        type="text">
</form> 

Feldlänge

Die Länge des jeweiligen Textfeldes bestimmt man mit dem size-Attribut. Als Wert kann hier jede (ganze) Zahl notiert werden. Beispiel:

<form action="mailto:name@name.de">
 <input size="20" name="Feld1" type="text">
 <input size="3" name="Feld2" type="text">
</form> 

Maximale Länge

Die maximale (Zeichen-)Länge für den Inhalt von Textfeldern können Sie mit dem maxlength-Attribut festlegen. Als Wert kann hier jede (ganze) Zahl notiert werden. Beispiel:

<form action="mailto:name@name.de">
 <input maxlength="10" value="Sie koennen 10 Buchstaben eingeben"
        name="Namenfeld1" type="text">
 <input maxlength="34" value="Sie koennen 34 Buchstaben eingeben" 
        name="Namenfeld2" type="text">
</form> 

Passwortfeld  nach oben

Felder für die Eingabe von Passwörtern notierenn sie ebenfalls mit dem input-Element, allerdings benutzt man hierzu nicht den Wert Text des type-Attributs sondern den Wert Password. Bei Passwortfeldern werden bei der Eingabe keine Buchstaben oder Zahlen angeziegt sondern nur jeweils ein Sternchen (*) pro eingegebener Buchstabe/Zahl. Beispiel:

<form action="mailto:name@name.de">
 <input name="passwort" type="password" size="15">
</form> 

Ebenso wie bei Textfeldern ist auch bei Passwortfeldern die Angabe der Feldlänge, maximalen Zeichenlänge und des Namens möglich.

Mehrzeilige Textfelder  nach oben

Textfelder die mehrere Zeilen groß sind notiert man mit dem textarea-Element. Beispiel:

<form action="mailto:nam@name.de">
 <textarea name="mehrzeiligesTextfeld" cols="30" rows="3">
  ... Text ...
 </textarea>
</form> 

Die Vorbeschriftung von mehrzeiligen Textfeldern erfolgt durch die Eingabe von Text innerhalb des textarea-Elements.

Um die Größe eines mehrzeiligen Textfeldes anzugeben benutzt man die Attribute rows und cols. rows gibt die Höhe in Zeilen an - cols die Breite in Zeichen.

Automatischer Zeilenumbruch

Bei mehrzeiligen Textfeldern können sie einstellen, ob Text automatisch auf die nächste Zeile umgebrochen werden soll oder erst durch einfügen es Umbruchs (Enter-/Return-Taste oder im Quelltext mit \n). Notieren Sie dies mit dem wrap-Attribut. Als Werte sind hier virtual (automatisch umgebrochen aber beim Absenden werden diese Umbrüche nicht mitgesendet), physical (automatisch umgebrochen und beim Absenden werden diese Umbrüche mitgesendet) und off (kein Umbruch - Zeile wird verlängert) möglich. Beispiel:

<form action="mailto:nam@name.de">
 <textarea wrap="off" name="mehrzeiligesTextfeld" cols="50"
           rows="5"> </textarea>

 <textarea wrap="virtual" name="mehrzeiligesTextfeld" cols="50" 
           rows="5"> </textarea>

 <textarea wrap="physical" name="mehrzeiligesTextfeld" cols="50" 
           rows="5"> </textarea>
</form> 

Selectfelder  nach oben

Selectfelder sind Felder, bei denen man aus mehreren festen Möglichkeiten wählen kann. Diese sind besonders dann nützlich, wenn der Besucher nicht einfach eirgendwas eintragen soll, sonder aus den Vorgaben wählen soll.

Selectfelder werden mit dem select-Element definiert. Zusätzlich müssen sie option-Elemente enthalten, welche die Auswahlmöglichkeiten darstellen. Beispiel:

<select>
 <option>Auswahl 1</option>
 <option>Auswahl 2</option>
 <option>Auswahl 3</option>
</select> 

Der Text der dabei im option-Element steht wird als Auswahltext angezeigt. Das beendene option-Tag kann eigentlich weggelassen werden, wird hier aber zum besseren Verständniss noch mit dargestellt.

Werte

Beim option-Element ist es möglich, mit Hilfe des value-Attributes, den Wert der Option zu bestimmen. Der Wert des ausgewählten Eintrags wird dann beim Absenden des Formulars als Wert dieses Elements verschickt - alle anderen Werte nicht. Beispiel:

<select>
 <option value="Auswahl_Menge_100">100</option>
 <option value="Auswahl_Menge_200">200</option>
 <option value="Auswahl_Menge_300">300</option>
</select>

Höhe

Die Höhe eines Selectfeldes können Sie mit dem size-Attribut des select-Elements bestimmen. Geben Sie hierbei die Anzahl der Zeilen an, über die sich das Feld erstrecken soll. Beispiel:

<select size="3">
 <option>Anna</option>
 <option>Berta</option>
 <option>Carolin</option>
</select> 

Vordefinierte Auswahl

Bei Selectfeldern ist es, ebenso wie Beispielsweise bei Checkboxen, möglich eine Auswahl im Vorraus zu treffen. Hierzu bedient man sich des selected-Attributes. Es erhält keinen Wert und wird in die jeweilige Option eingefügt. Beispiel:

<select size="1">
 <option selected>10</option>
 <option>20</option>
 <option>30</option>
</select> 

Mehrere Auswählen

Ebenso wie die Auswahl nur eines Punktes/einer Optin möglich sein kann, kann auch die Möglichkeit bestehen, dass mehrere Optionen gewählt werden können. Hierzu benutzt man das multiple-Attribut des select-Elements. Beispiel:

<select multiple size="3">
 <option selected>Milch</option>
 <option>Eier</option>
 <option>Butter</option>
</select> 

Gruppen  nach oben

Optionen können zu Gruppen zusammengefasst werden. Hierzu verwendet man das optgroup-Element. Beispiel:

<select>
 <optgroup label="Kueche">
  <option>Kuehlschrank</option>
  <option>Tisch</option>
  <option>Toepfe</option>
 </optgroup>
 <optgroup label="Wohnzimmer">
  <option>Fernseher</option>
  <option>Schrankwand</option>
  <option>Kronleuchter</option>
 </optgroup>
</select> 

Bitte beachten Sie dabei, dass das label-Attribut anzugeben ist. Es sagt aus, um was es sich handelt. Leider stellt noch kein Browser diese Gruppen korrekt dar. Sollte es irgendwann doch dargestellt werden können, dann könnte dies in etwa so aussehen:

Mögliche Darstellung des optgroup-Elements
Darstellung: Mögliche Darstellung des optgroup-Elements

Nur Lesen und Ausgeschaltet  nach oben

Alle drei Formen von Textfeldern können auf einen 'Nur-Lesen' Status gesetzt werden. Dadurch ist es einem Besucher nicht möglich etwas in ein Textfeld zu schreiben. Dieser Status wird erreicht, indem das readonly-Attribut notiert wird. Beispiel:

<form action="mailto:name@name.de"
 <input name="Feld1" type="text" readonly value="Nur Lesen">

 <textarea name="Feld2" cols="30" rows="3" readonly>
 ... Text ...
 </textarea>

 <select>
  <optgroup disabled label="Obst">
   <option>Banane</option>
   <option>Apfel</option>
   <option>Weintrauben</option>
  </optgroup>
  <optgroup label="Gemüse">
   <option>Erbsen</option>
   <option>Krotten</option>
   <option disabled>Apfel</option>
  </optgroup>
 </select> 

</form> 

Bitte beachten Sie, dass auch Passwortfelder einen 'Nur-Lesen' Status erhalten können. Da dies jedoch unnötig ist, ist dies hier nicht als Beispiel aufgeführt. Bitte beachten Sie auch, dass das readonly-Attribut keinen Wert erhält.

Ebenso wie Sie diese Felder auf 'Nur-Lesen' setzten können können Sie sie auch 'ausschalten'. Dies geschieht mit dem disabled-Attribut. Es hat wie das readonly-Attribut keine Werte und kann bei allen drei Formen angewandt werden.

Formularfeld  nach oben

Mit dem fieldset-Element lassen sich Formulare mit einem Rahmen umschließen. Diese dienen der optischen Unterstützung, quasi als Vermerk, dass es sich um ein Formular handelt. Sie können aber auch ohne Formular jederzeit eingesetzt werden. Beispiel:

<fieldset>
 <legend>Formular</legend>
 ...
 <input type="text">
 <input type="submit">
 ... usw. ...
</fieldset> 

In diesem Zusammenhang kann auch das legend-Element verwendet werden. In diesem wird notiert, was als Überschrift in das Formularfeld eingefügt werden soll. Zusätzlich sind auch Textformatierungen möglich. Beispiel:

<fieldset>
 <legend><b>Bitte ausfüllen</b></legend>
 ...
</fieldset> 

Bezeichnung  nach oben

Mit dem label-Element, können Sie den Formularelementen Bezeichnungen zuweisen. Dies kann auf zwei Arten geschehen:

Mit Hilfe des for-Attributes.

Es wird Beschreibungstext in das label-Element eingeschlossen und mit dem for-Attribut verweist man auf das entsprechende andere Formularelement welches die jeweilige ID zugewiesen bekommen hat. Beispiel:

<label for="vorname">Ihr Vorname</label>
<input type="text" id="vorname">

<label for="text">Ihr Text</label>
<textarea cols="30" rows="3" id="text">
</textarea> 

Durch Umschließen des Gesamten.

Es werden Beschreibungstext und das Element, welches beschrieben wird vom label-Element umschlossen. Beispiel:

<label>
 Ihr Vorname
 <input type="text">
</label>

<label>
 Ihr Text
 <textarea cols="30" rows="3">
 </textarea>
</label> 

Unsichtbare Elemente  nach oben

Manchmal ist es notwendig unsichtbare Formularelemente zu verwenden, um nicht die Gestaltung und das aussehen der Seite zu 'gefährden'. In unsichtbaren Feldern können, ebenso wie in normalen Feldern, Buchstaben und Zeichen gespeichert werden. Diese Elemente werden mit dem input-Element definiert und bekommen zusätzlich das Attribut type mit dem Wert hidden zugewiesen. Beispiel:

<form>
 <input type="hidden" value="Browsername">
 <input type="hidden" value="Text">
 ...
</form> 



« zurück weiter »
Bewerten

 

HTML

.Autor:Jan Winkler.
. Bewertung:
HTML: Formulare - Felder HTMLWorld
(5/5 bei 1 Votes)
.
. Community: 1393 Beiträge im HTML Forum .

Navigation


 
     
 

Anzeige