11. Formulare
Willkommen zum 11. Part der HTML Tutorial Reihe,
nach einer aus Zeitgründen kleiner Pause wollen wir uns nun mal mit Formulare beschäftigen.
Dies wird auch das erste HTML Tutorial sein, wo ich ein paar Bilder als Beispiel mit einbaue, sowie Beispielseiten angeben werde, dazu will ich direkt sagen,
das sie auf einem Server von mir liegen und auch nicht hier im Thread verschwinden werden. Sollte dies doch mal der Fall sein, das Bilder oder Beispielseiten z.B. durch einen Serverumzug oder ähnliches nicht mehr erreichbar sind, bitte ich mich darüber zum Beispiel via pn zu benachrichtigen.
Parallel zu diesem Tutorial werde ich noch ein php Tutorial zu Formulare und die Übergabe von Daten der Formulare machen, das ich dann hier verlinken werde.
Das php Tutorial wird aber ein paar tage verzögert zu diesem hier rauskommen, da es zeitilch nicht anders möglich ist.
Gleich zu Anfang will ich schon mal sagen, dass wir uns hier nur mit dem Erstellen des Formulares beschäftigen, nicht aber mit der Funktion, dies ab zu schicken oder gar zu speichern,
dafür wird das php Tutorial sein.
Was sind Formulare?
Formulare sind quasi Eingabefelder mit der Möglichkeit diese abzusenden.
Mit Formularen kann man vieles machen, z.B. in Foren die Texteingaben sind Formulare, Gästebucheinträge oder auch Kontaktformulare so wie Bestellformulare im Internet.
Ein ganz einfaches Formular
Wir fangen mal mit dem denkbar einfachsten Formular an.
Ein Formular, wo man seinen Namen eingeben soll und dies dann absenden kann.
zuerst müssen wir eine Form erstellen, in der wir das Formular einbauen werden.
Diese besteht aus den HTML-Tags
<form> und
</form>.
hier müssen wir 2 Attribut einsetzen,
die erste sagt an, welche Methode wir zum absenden des Formulars verwenden wollen.
hierzu benutzen wir die Methode "POST", warum und wofür wird im php Tutorial erklärt.
als 2. Attritut verwenden wir action, dies gibt an, wohin wir das Formular absenden wollen.
Wir können das Formular z.B. an sich selbst senden, oder aber an eine andere PHP Datei, wobei dann die Eingaben übergeben werden.
genau wird auch dies im php Tutorial erklärt.
Setzen wir die beiden Attribut nun in den Start-Tag ein, sieht dies so aus:
|
HTML
|
1
2
|
<form method="post" action="eintrag.php">
</form>
|
Der Dateiname bei action="" gibt an, wohin das Formular gesendet werden soll.
In diesem fall wird dies zu der php Datei "eintrag.php" gesendet, diese Datei würde die Eingabe nun weiter verarbeiten und ggf. ausgeben.
Wir haben nun ein leeres Formular, wo wir nun ein Eingabefeld so wie ein Absende Button rein machen wollen.
Für ein Eingabefeld (Inputfeld) benutzt man <input>.
Auch hier brauchen wir im grunde erstmal zwei Attribut, einmal die Attribut, die angibt was für eine Eingabe in den Input erwartet wird
type=""
und einmal die Attribut, die dem Inputfeld einen Namen gibt, der später für die php Verarbeitung wichtig sein wird.
Da wir erstmal einfach ein Inputfeld haben wollen, wo wir unseren Namen eintragen können und dieser ein Text (String) ist, geben wir ihm den Typ "Text" (type="Text").
Es gibt noch andere typen, wie z.B. email (Checkt, ob eingabe ein @ enthält) oder password, was die Eingabe mit Punkten anzeigt.
Als name geben wir dem Inputfeld einen Namen, mit dem wir ihm identifizieren können, da wir unseren Namen eintragen sollen, geben wir ihm auch einfach den Namen "name" (name="name"). Dies zusammen sieht nun so aus:
<input type="Text" name="name" />
fügen wir dies nun in unser Formular ein,
haben wir schonmal ein Inputfeld:
|
|
HTML
|
1
2
3
|
<form method="post" action="eintrag.php">
<input type="Text" name="name" />
</form>
|
Nun wollen wir noch ein absende Button,
damit wir die Eingabe an die Datei eintrag.php senden können.
Dies ist ebenfalls ein <input>, nur diesmal mit dem Typ "Submit" und einer Attribute namens value="", in der wir das eingeben,
was nachher auf dem Absende Button stehen soll.
Somit sieht dies dann so aus:
<input type="Submit" value="Absenden" />
Wir haben hier als Aufschrift des Buttons "Absenden".
Nun wollen wir das alles in die Form packen.
Da wir alles untereinander und nicht nebeneinander haben wollen,
machen wir noch einen Zeilenumbruch (
<br />) hinter jeden Input.
Damit jeder weiß, was man in das Inputfeld eintragen soll,
schreiben wir darüber einfach hin, was rein soll ("Gib deinen Namen ein:<br />")
Dies sieht dann komplett so aus:
|
|
HTML
|
1
2
3
4
5
|
<form method="post" action="eintrag.php">
Gib deinen Namen ein:<br />
<input type="Text" name="name" /><br />
<input type="Submit" value="Absenden" />
</form>
|
und im Browser wird dies so angezeigt:
Nun haben wir unser erstes kleines Formular fertig.
Doch dabei soll es natürlich nicht bleiben,
wir wollen als nächstes ein Formular für ein Gästebucheintrag machen.
Zuerst müssen wir uns überlegen,
was für Felder wir alles brauchen.
Standardmäßig:
- Name
- Gästebuchnachricht
- Email Adresse
- und vielleicht auch noch Homepage (da das wieder ein input type="text" wäre, lassen wir dies hier mal aus)
- Und natürlich den Absendebutton
Nun müssen wir uns überlegen,
was wir für welches Feld benutzen.
Name
Hier würde sich ein einfaches input type="text" anbieten, welches wir bereits kennen gelernt haben.
<input type="Text" name="name" />
Gästebuchnachricht
Da man ein Gästebucheintrag über mehrere Zeilen schreibt, bietet sich ein Inputfeld nicht so gut an.
Statt dessen verwenden wir lieber ein Feld, wo man einen Text über mehrere Zeilen schreiben kann und welches auch über eine Scrollbar verfügen kann.
Hier bieten sich neue HTML-Tags an, ein sogenanntes Textfeld.
Die HTML-Tags hierfür sind relativ einfach:
<textare></textare>.
Als Attribut brauchen wir erstmal lediglich name="", damit wird dies später verarbeiten können.
Als Name geben wir dem Textfeld nun mal "eintrag" (name="eintrag").
Nun sieht unser Textfeld so aus:
<textarea name='eintrag'></textarea>
EMail
Ob man nu ein Gästebuch mit oder ohne EMaileintrag macht, ist jedem selber überlassen,
wir werden dieses Feld nun benutzen, um ein weiteren Typ fpür Input zu zeigen.
Wir benutzen also einfach ein Inputfeld vom Typ "email" (type="email") mit dem Namen email (name="email").
<input type="email" name="email" />
Der Absendebutton
Ist uns ja mitlerweile auch bekannt:
<input type="Submit" value="Absenden" />
Wir können diese nun wie oben einfach mit einem Zeilenumbruch (<br />) untereinander schreiben,
und über jedem Feld ein Text schreiben, was dann so aussehen würde:
|
|
HTML
|
1
2
3
4
5
6
7
8
9
|
<form action="eintrag.php" method="post">
Dein Name:<br />
<input type="Text" name="name" /><br />
Gästebucheintrag:<br />
<textarea name="eintrag"></textarea><br />
Deine EMail:<br />
<input type="Text" name="email" /><br />
<input type="Submit" value="Gästebucheintrag absenden" />
</form>
|
Im Browser wird dies dann so ausgegeben:
Wir wollen dies nun aber mal etwas schöner gestalten,
und zwar sollen die Texte zu den Feldern links neben den Feldern sein und das alles gleichmäßig und in einer Reihe.
Damit sowohl Texte als auch Inputs in einer Reihe passend untereinander sind kann man diese nun in einer Tabelle formatieren.
Wie man eine Tabelle aufbaut könnt ihr hier nochmals nachlesen: </tr>
|
|
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<form action="eintrag.php" method="post">
<table border="0" cellpadding="10">
<tr>
<td>Name:</td>
<td><input type="Text" name="name" /></td>
</tr>
<tr>
<td>Eintrag:</td>
<td><textarea name="eintrag"></textarea></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" name="email" /></td>
</tr>
<tr>
<td colspan="2"><input type="Submit" value="Gästebucheintrag absenden" /></td>
</tr>
</table>
</form>
|
Man baut quasi in der Form eine Tabelle,
wo man dann alles formatiert. die Zeile mit dem Buttom ist zusammen genommen, da er länger ist und dort nur eine Spalte sein muss.
Im Browser sieht dies dann so aus:
Größen im Formular
Als letztes wollen wir noch sehen, wie man die größe der Inputfelder sowie des Textfeldes ändert.
hieruz gibt es 2 Unterschiede:
Im Textfeld können wir sowohl Höhe als auch Breite ändern und im Inputfeld nur die Länge.
Im Inputfeld
Für das Inputfeld verwendet man einfach die Attribut size="" um die länge zu ändern.
Als Beispiel:
<input type="text" name="name" size="30" />
als weiteres können wir nun die maximale Anzahl an Zeichen angeben, mit der Attribut maxlength=""
Als Beispiel:
<input type="text" name="name" size="30" maxlength="20" />
Im letztem Beispiel kann man nun also maximal 20 Zeichen eingeben.
Im Textfeld
In einem Textfeld kann man nun die Höhe und breite angeben.
Hierzu verwenden wir die Attribut cols="" und rows="".
Als Beispiel:
<textarea name="eintrag" cols="55" rows="15"></textarea>
Das war es mit dem 11. Part des HTML Grundkurses,
was nun als 12. dran kommt weiß ich noch nicht, bei Ideen könnt ihr euch gerne mal im Sammelthread zu diesem Tutorial melden:
[Sammelthread] Fragen/Ideen zu: HTML Grundkurs/ Tutorial
easy-scripting.net »
Programmier- und Scriptbereich »
Auszeichnungssprachen-Hilfeforum »
Zitat
Dies ist ein Text, der, der keine weiteren HTML Formatierungen besitzt.Er dient der Veranschaulichung, was ein Browser macht, wenn man einen Text in einer HTML Seite mit Zeilenumbrüchen schreibt.
[HTML/JQUERY] Beschriftung von Eingabefeldern
(11.12.2011, 21:58)
