 |
|||||||||||||||||||||
| www.my-mode.com > tutorial > formulare | |||||||||||||||||||||
|
das internet ist laengst keine einseitige sache mehr. auch der nutzer kann bzw. moechte dem anbieter seiner besuchten webseiten etwas mitteilen - und wenn es benutzerkennung und passwort sind, um an seine emails zu kommen.
jeder kennt die formulare, denen wir im netz taeglich begegnen, mit denen wir an abstimmungen teilnehmen, uns in foren zu wort melden, unsere bankkonten verwalten und bei eBay allen moeglichen kram kaufen und verkaufen. solche formulare sind auch mit cHTML machbar, so das zum beispiel einer kleinen onlineumfrage zumindest von dieser seite her nichts mehr im wege steht. alles, was zu einem formular gehoert, bringen wir wie gewohnt zwischen zwei tags unter <form>...</form>so weiss der browser, dass es sich hier um ein formular handelt. wichtig sind dabei fuer ihn noch die zwei attribute action="xxx" method="get | post"das "action"-attribut ist dabei zustaendig fuer die weiterverarbeitung der im formular erfassten daten. "xxx" steht dabei fuer die webadresse, unter der das betreffende weiterverarbeitende programm (z.b. ein perlscript) zu finden ist. "method" entscheidet, wie die daten zum server bzw. zum programm gelangen, im falle von "post" werden sie gleich mit uebermittelt, bei "get" ruft sie das programm selbst ab. man muss also auch in seinem perlscript angeben, wie das programm an seine daten kommt (scripte schreiben sei nicht teil dieses tutorials, da gibt es ohnehin eine menge im netz. viel bedauerlicher ist, dass viele grosse provider selbst geschriebene scripte gar nicht hosten - und so der experimentierfreude des ambitionierten hobby-internettlers einen herben daempfer verpassen). gut wir wissen nun, wie wir ein formular definieren, fehlen uns noch die dinge, die ein formular ausmachen - eingabefelder und buttons. das wird mit dem tag <input>(kein end-tag!) und seinen attributen erledigt. das wichtigste attribut ist dabei sicherlich type="text | password | checkbox | radio | hidden | submit | reset"alle anderen attribute richten sich naemlich nach dem hier ausgewaehlten input-typ. also arbeiten wir die einzelnen moeglichkeiten einfach nacheinander ab. type="text"ist der standardfall, ein simples textfeld, in das, wie der name schon vermuten laesst, text eingegeben werden kann. mit den attributen name="xxx" size="m" maxlength="n" accesskey="y" value="zzz"laesst sich dieses textfeld naeher beschreiben. "name" gibt dem textfeld (wie auch jedem anderen inputelement im formular) einen eindeutigen namen, das "xxx" ist also gegen einen solchen namen zu ersetzen. das ist sehr wichtig, damit das script, das unser formular auswerten soll, die einzelnen input-elemente auch auseinanderhalten kann. "size" bestimmt die groesse des feldes im display - in zeichenbreiten. wer da noch in pixeln denkt, koennte von seinen ergebnissen ueberrascht sein. "maxlength" ist fuer die maximal moegliche anzahl einzugebener zeichen verantwortlich, wer z.b. postleitzahlen abfragen moechte, koennte so die maximale zeichenzahl in dem feld auf fuenf begrenzen. "accesskey" kennen wir ja schon von den links her - man kann somit einem feld eine handytaste zuordnen und so schnell in das feld springen. doch vorsicht, ich hatte schon modelle, die nicht zwischen texteingabe und accesskey unterscheiden konnten. und so sprang ich wie wild zwischen den feldern hin und her, statt meine eingaben machen zu koennen. neuere modelle fangen dieses problem aber ab - entweder kann man die accesskeys abschalten, oder sie sind wirkungslos, sobald ein textfeld oder aehnliches den fokus besitzt. "value" ist superpraktisch, damit kann man einen wert im textfeld vorgeben. der benutzer kann ihn, wenn er ihm gefaellt, uebernehmen - oder aber bei nichtgefallen abaendern. weiterhin gibt es noch ein ominoeses attribut namens "istyle", von dem ich aber nicht weiss, wozu es gut ist und was es tut. hinweise diesbezueglich sind jederzeit willkommen. type="password"ist im endeffekt das gleiche wie ein textfeld, und es hat auch die gleichen attribute (ausser "istyle", das bleibt aussen vor). der einzige unterschied ist, dass man statt der eingegebenen zeichen nur sternchen sieht - wie sich dass fuer ein passwortfeld gehoert. type="checkbox"ist das typische haken- bzw. kreuzchenkaestchen, in dem man irgendwas ankreuzen bzw. abhaken kann. als attribute gibt es dann name="xxx" checked accesskey="y" value="zzz"neu ist dabei das "checked"-attribut. es hat keinen wert! wenn man es setzt (also dazuschreibt), dann ist das haekchen oder kreuzchen bereits gesetzt. das "value"-attribut ist mir in dem zusammenhang ein wenig unklar, welchen anderen wert als 0 = nein oder 1 = ja sollte eine checkbox annehmen? wer moechte, sollte hier ruhig mal ein wenig experimentieren. wenn es in einem formular mehrere checkboxen gibt, dann koennen sie unabhaengig voneinander an- oder abgewaehlt werden. das ist auch der entscheidende unterschied zu type="radio"radiobuttons haben zwar genau die gleichen attribute wie die checkboxen, es kann aber immer nur ein (!) button im formular angewaehlt sein - so wie man bei einem radio eben auch nur ukw ODER mittelwelle hoeren kann. type="hidden"ist was fuer geheimniskraemer. der benutzer unseres formulars bekommt davon gar nichts mit, diese <input>s bleiben fuer ihn unsichtbar. als attribute bleiben somit auch nur "name" und "value". wozu braucht man sowas? nun, man koennte zum beispiel mit nur einem script viele verschiedene formulare auswerten. mit hilfe eines solchen versteckten wertes kann man dann eine art formularkennung an das script uebergeben, damit das script dann dem formular entsprechend reagieren kann. was uns noch bleibt im bereich <input> sind die beiden typen "submit" und "reset". beide erzeugen eine schaltflaeche. type="submit"schickt die daten weg. als attribute gibt's hier wie ueblich "name", "accesskey" und "value", wobei letzteres die beschriftung des buttons festlegt. gleiches gilt fuer type="reset"nur dass dieser button die eingaben schlichtweg alle loescht. hm, irgendwie fehlt noch was, oder?! was ist mit den schoenen listen, wo man sich aus vielen eintraegen einen aussuchen kann? auch die gibt es in cHTML. mit hilfe der tags <select>...</select>und <option>...</option>laesst sich so etwas (immer innerhalb des <form>-tags) leicht realisieren: <select name="taetigkeit" size="2" multiple> <option value="1">schueler</option> <option value="2" selected >student</option> <option value="3">arbeiter</option> <option value="4">angestellter</option> <option value="5">beamter</option> <option value="6">rentner</option> <option value="7">anderes</option> </select>auch attribute, die moeglich sind, habe ich hier in das beispiel schon alle eingebaut. das "size"-attribut bestimmt dabei, wie viele zeilen gleichzeitig von der auswahlliste zu sehen sind, "multiple" laesst eine mehrfachauswahl zu - auch wenn das hier wenig sinn macht. wichtig bei solchen listen: an das skript werden nicht die eintraege in der optionsliste weitergegeben, sondern die zahlenwerte der "value"-attribute (natuerlich kann man weitergeben, was man moechte - ich hab hier halt zahlen eingesetzt). besonders hinweisen moechte ich noch auf das "selected"-attribut des <option>-tags, es markiert sozusagen die voreinstellung der auswahl - hier "student". nicht vergessen moechte ich zum schluss noch das tag <textarea>...</textarea>mit seinen attributen name="xxx" accesskey="x" rows="m" cols="n" istylees ist im endeffekt ein vergroessertes input-textfeld zur eingabe laengerer texte, wobei die attribute "rows" und "cols" die zeilen- und spaltenanzahl in zeichen angeben. in wie fern man das nun sinnvoll auf dem handydisplay einsetzt sei jedem selbst ueberlassen. |
||||||||||||||||||||
