brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]


verwandte Artikel und Seiten

Formulare in HTML-2

von Thomas Salvador.

zurueck Teil 1

Dieses Tutorial erläutert ausgiebig Formulare in HTML. Sie werden hier alles Wesentliche dazu lernen.

Mehrzeilige Eingabefelder

Bislang waren alle Eingabefelder einzeilig. Es besteht aber auch die Möglichkeit, ein mehrzeiliges Feld zur Verfügung zu stellen, praktisch einen kleinen Editor:

<textarea name="einname" cols="XX" rows="XX">
Voreingestellter Text
</textarea>

cols legt die Breite des Feldes in Zeichen und rows entsprechend die Höhe in Zeilen an. Üblicherweise stellt der Browser das Feld mit Scrollbars dar, die die Eingabe und das Scrollen durch längere Ausführungen erlauben. Der durch textarea gekapselte Text, sofern vorhanden, wird als voreingestellter Text in das Feld aufgenommen.

Hinweis: Üblicherweise wird der Text in einem (einzeiligen) Feld in Proportionalschrift, in einem mehrzeiligen Feld in Schreibmaschinenschrift dargestellt. Daher meinen gleiche size und cols Werte oft verschiedene Breiten.

Obiges Beispiel (Ausschnitt) können wir also nun etwas eleganter darstellen:

Beispiel:

<form method=post action="irgendwas"> <pre>
  Name         : <input name="name" size="40" maxlength="80" type="text" />
  Anschrift    :
                 <textarea name="an" cols="40" rows="2"></textarea>
</pre> </form>

liefert

Ausgabe auf Ihrem Browser
    Name         : 
    Anschrift    :
                     

Hier ist es nun für den Benutzer möglich, umfangreichere Angaben zu machen, etwa neben Straße und Ort noch Postfach oder Land oder sonstwas anzugeben.

Das Gestalten von Formularen ist manchmal gar nicht so einfach, wenn es gut aussehen soll. Da muss man halt solange probieren, bis es so erscheint, wie es soll. Setzt man bspw. den textarea-Block in dieselbe Zeile wie Anschrift, so wird häufig der Label (Anschrift) an der unteren Begrenzung des Feldes ausgerichtet, was genauso ungünstig aussieht.

Nützlich sind hier oft Tabellen, die darüber hinaus auch noch das Problem der bündigen Ausrichtung ohne Vorformatierung lösen können:

Beispiel:

<form method="post" action="irgendwas">
<table>
<tr><td>Name</td>
<td><input name="name" size="40" maxlength="80"
    type="text" /></td></tr>
<tr><td valign="top">Anschrift</td>
<td><textarea name="an" cols="40" rows="2"></textarea></td></tr>
</table> </form>

liefert (wenn der Browser des Benutzers den valign unterstützt)

Ausgabe auf Ihrem Browser
Name
Anschrift

Wenn valign nicht ausgewertet wird, so wäre Anschrift normalerweise zentriert neben dem Zelle, auch nicht so schlecht. Man kann hier seiner Phantasie (fast) freien Lauf lassen.

An den gebrachten Beispielen kann man erkennen, dass die Feldnamen tatsächlich lokal zum Formular gültig sind, also gleichbenannte Felder in anderen Formularen nicht beeinflussen. (Wir hatten z.B. beidesmal an benutzt. Auch wenn Sie in einem der beiden etwas eingeben, bleibt das andere unverändert.)

zurueck Teil 1
Teil 3 weiter

Verwandte Artikel und Seiten



brauchbar web
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.

Copyright © 1999-2015 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei all-inkl.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.

zurück zum Inhaltsverzeichnis der 12. Ausgabe.

Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/57.html .