6x bewertet

Formular erstellen

von Delite  |  17.02.2007 um 20:39 h
Html Grundlagen
Typ: Html Grundlagen
Stufe:Mittel
Kenn ihr das hier ?
Leider wisst ihr nicht genau wie sowas geht. Das wird sich nun ändern :) Das hier ist der Quelltext für das Formular:

<form action="seite2.html" method="post" enctype="multipart/form-data">
Name: <input type="text" name="name" value="Dein Name"><br />
Geschlecht: <select size=1 name="geschlecht">
<option>weiblich</option>
<option>männlich</option>
</select><br />
Deine Interessen: Shoppen <input type="checkbox" name="interessen" value="Shoppen">
Schlafen <input type="checkbox" name="interessen" value="Schlafen"><br />
Interessen anzeigen?: ja <input type="radio" name="anzeigen" value="ja" checked>
nein <input type="radio" name="anzeigen" value="nein"><br />
Datei: <input type="file" name="datei"><br />
Text: <textarea cols=20 rows=3 name="text">Mein text</textarea>
<br /><br />
<input type="submit" value="Abschicken"><br />
</form>


O.O Ja sicher seid ihr erstmal etwas überfordert.

Zu ersteinmal benötigt jedes Formular den anfang mit <form> der geht so:

<form action="meineseite.html" method="post" enctype="multipart/form-data">

action ist für die url wo das Formular ausgeführt werden soll. Formulare könnt ihr mit PHP verarbeiten.

method ist für die Methode zum einen gibt es post und zum andere get. Genauere Informationen erhaltet ihr bei den verschiedenen Variablen-Typen bei PHP. Hier nennen wir es erstmal POST.

enctype steht dafür, ob wir dateien hochladen wollen. Ansonsten kann man auch darauf verzichten!

und wir schließen alles mit:

</form>

Jetzt steht dort leider aber noch nichts drin. Also machen wir mal ein ganz normales Text-Feld :

<input type="text" name="textfeld" value="Hier ist Text">

Nun sehen wir ein Textfeld, in dem steht "Hier ist Text" der type ist hier text, weil wir ein textfeld haben. name können wir selber bestimmen ich habe es mal textfeld genannt. value ist der Wert, der im Textfeld steht, kann man auch leer lassen.

Jetzt kommt das Dropdown-Feld . Der Quellcode geht so:
<select size=1 name="geschlecht">
<option>weiblich</option>
<option>männlich</option>
</select>


mit <select> und </select> Wird der tag geöffnet bzw. geschlossen. size steht für die anzahl der werte, die sichtbar sein sollen. Meistens nimmt man 1. name ist wie beim textfeld ein name, den du ausgesucht hast. Hier: geschlecht.
Zwischen dem select-tag schreibt man jetzt die möglichen optionen mit <option>Name der Option</option>. Man schreibt einfach mehrere untereinander.

Dann gibt es noch Checkboxen , die kleinen Dinger wo Häkchen dran sind :)

<input type="checkbox" name="interessen" value="Shoppen" checked>

type ist hier halt checkbox. name ist unser freigewählter name. value ist der wert den wir zuordnen möchten, falls ein Häkchen gemacht worden ist. checked macht man nur hin, wenn schon ein Haken dran sein soll. Sonst weglassen Smilie

Dann gibt es noch Radio-Button:

<input type="radio" name="anzeigen" value="ja" checked>

Sie funktionieren eigentlich genau wie die Checkboxen, nur wenn man mehrere vom gleichen Namen macht, kann man nur eine auswählen, sehr praktisch.

Dann gibt es noch den File-Upload:

<input type="file" name="datei">

der type ist file, weil es ein Datei-Feld ist. Name ist der individuelle Name, den wir dem File zugeordnet haben *hm*

Dann gibt es noch die Textarea, ein großes Text-Feld:

<textarea cols=20 rows=3 name="text">Mein text</textarea>

name ist halt der name. cols steht für die Breite und rows für die Höhe. Zwischen dem Textarea-Tag kann man Text schreiben, der dann in der Textbox angezeigt wird, kann man aber auch weglassen.

Jetzt wollen wir das Formular noch abschicken. Dazu brauchen wir einen Submit-Button:

<input type="submit" value="Abschicken">

der type ist hier submit. Mit der value können wir bestimmen, was auf dem Button stehen soll. Hier: Abschicken.

Hui das wars auch schon, wie ihr das Formular verarbeitet, könnt ihr später bei PHP nachschlagen!

Bild



7 Kommentare




L0VE

ich hab mal ne frage: wohin werden die daten denn dann geschickt bzw. wo 'stellt' man das ein? Smilie
am 16.09.2007 um 16:10 Uhr


Wohin geht das denn au

zu welche e-mail???
am 27.11.2007 um 20:53 Uhr


LoveSound

jaaa. also ersten wohin wird das ganze geschickt, und zweitens ..

bei mir erscheint auf der seite dann immer so komisches zeug..: /par und das überall! hää? :P
am 27.03.2008 um 17:44 Uhr


Nekoji

Das ist doch nur ein Tutorial in dem euch der Aufbau eines Formulars erklärt wird. Das wird nirgends hingeschickt! ;p

Wenn ihr in der Suche "Formular" eingebt, findet ihr einige Tutorials, die euch zeigen wie man so ein Formular verarbeitet usw.
am 10.04.2008 um 17:32 Uhr


Yaka

also geschafft habe ich es und nun will cih wissen wo es die mail hinschickt ich habe unter suchen "Formulare" gesucht doch da finde ich kein tut dazu Smilie kannst du mal den link sagen?? Smilie Smilie Smilie
am 31.07.2008 um 20:49 Uhr


Yaka

könntest du da bitte ganz unten den insgesammten code hinmachen? damit ich es kontrolieren kann? xD

bittteeee Smilie Smilie Smilie Smilie Smilie Smilie
am 31.07.2008 um 21:01 Uhr


normalerweise wird das formular an eine datei gesendet, es gibt dann noch die unsicherere variante nähmlich das senden an eine mailaddy,dazu einfach dies eingeben:
<form action:mailto:"deineaddy@mailhoster.de"
am 19.01.2009 um 00:42 Uhr