HTMLForms

Forms

Forms dienen zur Eingabeaufforderung und zum Senden der eingegebenen Daten an ein Programm z.B. an ein CGI-Script.

<form [action="(mailto:<E-Mail Adresse> | <HTML-Page> )"] [method=("GET"|"POST")] [name=<Name>]
  [onSubmit="return <JavaScriptFunction>"] [target=<FrameName>] [style="border:1px solid #ddd"]> 
  
</form>

Mit action gibt man an, was mit den ausgefüllten Formulardaten passieren soll, wenn der Anwender das Formular abschickt, z.B.

 action="AddVocable.jsp"

Die Angabe sollte in Anführungszeichen stehen. Wenn ein mailto: verwendet wird, dann werden die ausgefüllten Formulardaten an diese E-Mail-Adresse geschickt. Wenn Sie sich Formulardaten per E-Mail zuschicken lassen, benutzen Sie immer method=post. Außerdem sollten Sie bei E-Mail-Empfang von Formulardaten immer die Angabe enctype="text/plain" mit angeben. Wird eine HTML-Page angeben wird diese mit dem entsprechenden querystring aufgerufen.

Wenn Sie method=get wählen, werden die Daten des ausgefüllten Formulars auf WWW-Servern mit installiertem HTTP-Protokoll in der CGI-Umgebungsvariablen QUERY_STRING gespeichert. Das CGI-Programm muß den Inhalt dieser Umgebungsvariablen auslesen und verarbeiten. Alle Values werden als durch & getrennte <Name>=<Value>-Pairs an die <HTML-Page> und mit ? an die in action angegebene URL angehängt übergeben. Diesen String nennt man auch querystring. Wenn der Value z.B. in einem Textfeld Leerzeichen enthalten würde, so wird jedes Leerzeichen durch das + Zeichen ersetzt. Sonderzeichen werden mit %<ASCII-Codierung> übertragen. Bei method=post wird die Zeichenkette <Name>=<Value> an den HTTP Anfrage Header und einer Leerzeile angehängt. Die Daten des augefüllten Formulars werden auf dem Server-Rechner von "stdin" zur Verfügung gestellt, und das CGI-Programm muß sie behandeln wie eine Benutzereingabe, die auf der Kommandozeile gemacht wurde. Da in diesem Fall kein EndOfFile-Signal (EOF) gesendet wird, muß das CGI-Programm die CGI-Umgebungsvariable CONTENT_LENGTH auslesen, um die Länge der übermittelten Daten und damit deren Ende zu ermitteln. If, however, you choose Post, the information will be sent to the server from within the HTTP header. You can still access the information, but your user won't be able to see the value. More important, the user won't be able to bookmark the page. Gibt die unter onSubmit= angegebene Funktion false zurück wird die Aktion nicht ausgeführt. Zwei Submit-Button erreicht man wie folgt:

• Buttons mit gleichem Namen, aber unterschiedlichen Werten:
• unterschiedlichen Zielen:

<form name="theform" action="oops.htm" method="get">
<input name="one" value="type something here...">
<input type="submit" name="submit" value="first"
 onClick="document.theform.action='first.htm';">
<input type="submit" name="submit" value="second"
 onClick="document.theform.action='second.htm';">
</form>

• mit grafischen Buttons (die beste Lösung):

When a pointing device is used to click on the image, the form is submitted and the click coordinates passed to the server. The x value is measured in pixels from the left of the image, and the y value in pixels from the top of the image. The submitted data includes name.x=x-value and name.y=y-value where "name" is the value of the name attribute, and x-value and y-value are the x and y coordinate values, respectively.

Eingabefelder

<input type=("Text" | "password" | "Submit" | "hidden" | "Checkbox" | "radio" | "file" | "reset" | "button" | "image") [name=<Name>] [value=<Value>] [size=<Number>] [title="<TooltipText>"]  [onClick="<Code>"] [maxlength=<Number>] [align=("Middle"|  )] [checked] [readonly] [tabindex=<Number>] [accept="<MimeType>"] [disabled]>

input definiert ein einzeiliges Eingabefeld. Der Vollständigkeit halber können Sie die Angabe type=text dazusetzen. size gibt die Anzeigelänge an. maxlength gibt die maximale Anzahl von eingebaren Zeichen an. value gibt bei Eingabefeldern die Vorbelegung an.

Mit type=submit definieren Sie einen Absende-Button. Beim Anklicken dieses Buttons werden die Formulardaten abgeschickt. Der value Eintrag entspricht dem Buttontext. Der name Eintrag wird als Name im Querystring verwendet.

Mit type=reset definieren Sie einen Abbrechen-Button. Eingegebene Daten werden verworfen und nicht abgeschickt.

Mit type=hidden kann man versteckte Informationen übergeben. Dies ist am besten im Zusammenspiel mit der POST-Methode.

Mit type=file können Dateien geladen werden. maxlength sollte dabei als maximale Dateilänge interpretiert werden. accept kann den MIME-Type vorauswählen, scheint aber den IE4 nicht zu interessieren.

Mit type=checkbox wird eine Checkbox realisiert. Sie muß immer einen Namen besitzen. Falls eine Checkbox angekreuzt ist wird der QueryString name=<Value> übertragen. Fehlt der value-Eintrag wird als Wert on übergeben. Eine Checkbox wird durch checked vorselektiert. Es spricht nichts dagegen mehrere Checkboxen mit dem gleichen Namen zu verwenden.

Mit type=button wird ein Button definiert (s. auch button Element). onClick funktioniert hier auf jeden Fall. value ist in diesem Fall der Button-Text. Um beispielsweise auf ein andere URL zu gehen wird folgende Event-Handler hinterlegt: onClick="self.location.href='/uweheuer/knowledgebase/DisplayTerms.jsp’”.

Mit type=image wird eine serverseitige Imagemap erzeugt. Dieses Element zeigt ein Bild, das beim Anklicken das Formular an das Servlet oder das andere serverseitige Programm, das in der Action Sektion des umgebenen Formulars spezifiert wurde, übermittelt.

Mit type=radio wird ein Radio-Button definiert. Radio-Buttons mit dem gleichen Namen werden als Gruppe aufgefasst. Durch Angabe von tabindex= kann innerhalb einer Form die Tabulatorreihenfolge festgelegt werden. Startindex ist 1. Der title realisiert Tooltips. Im Gegensatz zu disabled kann man bei readonly noch den Text selektieren.

<textarea [name=<Name>] [cols=<Number>] rows=<Number> [readonly="yes"]> <Vorbelegung> </textarea> 

Eine Textarea stellt ein mehrzeiliges Eingabefeld dar. cols gibt die Anzahl der Zeichen pro Zeile an. Um den Fokus zu setzen muss man JavaScript verwenden.

Buttons

Ab HTML 4.0 dürfen anklickbare (Klick-)Buttons endlich so heißen wie sie heißen. Solche Buttons sind flexibler als herkömmliche Buttons, denn sie dürfen auch einen definierten Inhalt haben, etwa eine Grafik. Leider versteht der Navigator mindestens bis zur Version 4.08 diesen Tag nicht. Außerdem sind sie ohne JavaScript funktionslos.

<button 
  [name="<Text>"] 
  [onClick="return <JavaScriptFunction>"]>
    [<ButtonText>] [<img src="<File>">)]
</button>

Mit dem Attibut name= legt man den Namen des Buttons fest, wenn man den Button z.B. aus JavaScript ansprechen will.

Auswahllisten

<select name="<Name>[[]]" [size=<Number>] [multiple] tabindex=<Number> [onChange="<JavaScriptEventHandler>"> <option [value=<Value>] [selected]> <OptionText> </option> </select> Wenn der Wert für size größer als 1 ist wird eine Liste und keine Drop-Down Liste dargestellt. Wird multiple angegeben ist eine Mehrfachauswahl möglich. value= gibt bei einer Option den Wert für den querystring an. selected bei einer Option legt fest, daß der Eintrag vorselektiert ist. Wenn man einen Leerstring als Wert angeben will setzt man value="".