Editing HTMLForms (section)

==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="'''<nowiki><Code></nowiki>'''"'''] ['''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 [[HTMLForms#Buttons|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.
 &lt;button 
   [name="<Text>"] 
   [onClick="return <JavaScriptFunction>"]>
     [<ButtonText>] [<img src="<File>">)]
 &lt;/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=""'''.