Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 13): Formulare (1)

HTML & CSS für Einsteiger (Teil 13): Formulare (1)

Um es vorwegzunehmen: Gerade in HTML5 haben die Formulare einen Quantensprung hingelegt. Dank zahlreicher neuer Feldtypen lassen sich sehr interessante Formulare erstellen. Diese neuen Möglichkeiten werdet ihr natürlich noch kennenlernen. Los geht es in diesem Video-Training aber mit dem notwendigen Rüstzeug, das man zum Definieren von Formularen braucht. Am Anfang geht es um das Anlegen von einzeiligen Eingabefeldern. Ihr werdet sehen, wie sich diese definieren lassen, wie man sie mit Werten vorbelegen und auf nicht-beschreibbar setzen kann. Ebenso werdet ihr die Definition von Passwortfeldern kennenlernen. Das ist schließlich ein Feldtyp, den man immer mal wieder gebrauchen kann.

... übrigens findest du die komplette Serie hier: HTML & CSS für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Definiert werden Formulare über das form-Element. Alle Elemente, die innerhalb von form stehen, gehören dann zu dem betreffenden Formular.
<form>
…
</form>

Im einleitenden <form> wird das action-Attribut erwartet. Hierüber gibt man letztendlich an, was mit den Formulardaten geschehen soll. Üblicherweise handelt es sich hierbei um eine PHP-Anwendung.
<form method="post" action="form.php">
…
</form>

Achtet darauf, dass die angegebene Datei auch tatsächlich gefunden werden kann. Ihr müsst also den richtigen Pfad setzen.

Anstelle eines Skripts kann man übrigens auch eine E-Mail-Adresse angeben.
<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain">
…
</form>

In diesem Fall werden die Formulardaten per E-Mail verschickt. Elegant ist das aber freilich nicht, weswegen auch fast immer auf die Skriptvariante zurückgegriffen wird. Wer aber gerade kein Skript zur Hand hat, kann den Formularversand notfalls auch per E-Mail erledigen.

Ein weiteres wichtiges Attribut für das form-Element ist method. Hierüber legt man die HTTP-Übertragungsmethode für den Versand des Formularinhalts fest. Zwei verschiedene Varianten stehen dabei zur Verfügung.

post = Die Formulardaten werden hier in zwei Schritten an die angegebene Adresse übermittelt. Zunächst wird die angegebene Adresse vom Browser kontaktiert. Ist das erfolgreich gewesen, werden die Formulardaten an das Skript übergeben.
get = Bei dieser Methode werden die Formulardaten an das Ende der URL angehängt, die dem action-Attribut zugewiesen wurde. Die Formulardaten sind somit u.a. auch in der Adresszeile des Browsers zu sehen.

Stellt sich natürlich die Frage, welche dieser beiden Varianten man für den Versand der Formulardaten verwenden sollte. Prinzipiell könnt ihr beide einsetzen. Gerade aber wenn es um große Datenmengen und den Upload von Dateien auf den Server geht, solltet ihr allerdings zu post greifen.


Einfache Formularfelder

Bislang wurde lediglich das äußere Gerüst des Formulars definiert. Im Browser ist vom Formular selbst allerdings noch nichts zu sehen.
<form method="post" action="form.php">
 …
 </form>

Jetzt geht es also darum, das Formular mit Inhalt/Leben zu füllen.

Der wohl am häufigsten benötigte Feldtyp ist ein einzeiliges Eingabefeld. Diese verwendet man beispielsweise, um Namen, Vornamen und die E-Mail-Adresse abzufragen. Definiert werden einzeilige Eingabefelder folgendermaßen:
<input type="text" name="vorname" />

Dem input-Element wird die Attribut-Wert-Kombination type="text" zugewiesen. Außerdem solltet ihr jedem Eingabefeld einen internen Bezeichner geben. Dieser Bezeichner muss im Dokument eindeutig sein. Interessant ist er vor allem dann, wenn es um die Verarbeitung der Formulardaten mittels Skript geht. Verwendet im Bezeichner keine Leer- und Sonderzeichen.

Wenn ihr euch das Ergebnis im Browser anseht, ergibt sich folgendes Bild:

Bilder



 
Sonderlich spektakulär sieht das Ganze freilich noch nicht aus. Wenn ihr aber in das Textfeld klickt, werdet ihr feststellen, dass ihr dort bereits Eingaben machen könnt.

Bilder



 
Damit die Besucher wissen, was sie in das Feld eintragen sollen, fehlt natürlich noch eine Beschriftung.
Vorname: <input type="text" name="vorname" />

Auch hier liefert ein Blick in den Browser wieder das gewünschte Ergebnis.

Bilder



 
Über das Attribut size könnt ihr die Feldbreite bestimmen.
Vorname: <input type="text" name="vorname" size="30" />
<br />
Postleitzahl: <input type="text" name="plz" size="5" />

Dem size-Attribut weist man die gewünschte Feldbreite zu.

Bilder



 
Dabei entspricht 5 exakt fünf Zeichen. In diesem Zusammenhang ist auch das Attribut maxlength interessant. Denn darüber wird die maximal zulässige Anzahl an Zeichen angegeben, die in das Feld eingetragen werden dürfen. Auch hierzu wieder ein Beispiel:
Vorname: <input type="text" name="vorname" size="30" maxlength="40" />

Ist der bei maxlength angegebene Wert größer als der bei size, dann wird bei längeren Eingaben automatisch im Feld gescrollt.

Über das Attribut value könnt ihr eine Feldvorbelegung erreichen.
Vorname: <input type="text" name="vorname" value="Dein Name" />

Der value zugewiesene Wert ist dabei als Feldvorbelegung zu sehen.

Bilder



Anwender können diesen vorbelegten Wert löschen.

 
Ihr könnt übrigens verhindern, dass Werte aus Feldern gelöscht werden. Dabei definiert man ein Eingabefeld, was im eigentlichen Sinn gar kein Eingabefeld mehr ist. Tatsächlich werden solche Felder oftmals für Ausgaben genutzt. Interessant könnte das also beispielsweise sein, um per Skript ermittelte Werte anzuzeigen. Denkt hier beispielsweise an einen Taschenrechner. Ebenso kann man aber auch ein Feld manuell mit einem Text vorbelegen, der von den Besuchern nicht mehr verändert werden kann. (Hinweis: Das Euro-Zeichen wird in der PDF-Ansicht leider nicht korrekt wiedergegeben).
<input name="preis" type="text" value="&euro; 699.-" readonly />

Um ein Feld auf nur-lesen zu setzen, weist man ihm das Attribut readonly zu. Auch hier wieder ein Blick auf das Ergebnis:

Bilder



Der vordefinierte Text ist direkt zu sehen. Löschen lässt sich dieser allerdings nicht.


 

Passwortfelder definieren

Ihr kennt natürlich Passwortfelder. Überall dort, wo ihr euch registriert, müsst ihr ein Passwort angeben. (Üblicherweise muss man es sogar zwei Mal eintragen).

Bilder



 
Die in das Eingabefeld eingetragenen Daten sind dabei nicht sichtbar, sondern werden vom Browser automatisch durch Sterne/Punkte ersetzt. Vorteil dieser Variante: Personen, die euch vielleicht bei der Passworteingabe über die Schulter sehen, können das Passwort nicht entschlüsseln. Es ist allerdings ein Trugschluss, dass Passwortfelder automatisch sicher sind. Tatsächlich werden die Passwörter beim normalen HTTP im Klartext beim Absenden des Formulars übertragen.

Definiert werden Passwortfelder folgendermaßen:
<input type="password" name="passwort" />

Dem type-Attribut wird als Wert password zugewiesen. Auch hier wieder ein Blick auf das Ergebnis.

Bilder



Wenn ihr dort etwas eintippt, wird das von den Browsern direkt während der Eingabe unkenntlich gemacht.

Weitere Teile


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von blaster M.
  • 12.10.2016 - 16:09

Herzlichen Dank für das Video.

Portrait von ZainaPhoto
  • 28.03.2015 - 20:37

Großen Dank für das Video.

LG Zaina

Portrait von Monti7
  • 01.03.2015 - 10:56

Das hat mir sehr weitergeholfen! Dankeschön!!

Portrait von fe_web
  • 27.02.2015 - 15:07

Vielen Dank für diesen Teil des Tutorials

Portrait von Caesarion2004
  • 13.12.2014 - 22:45

Vielen Dank für den weiteren interessanten Teil.

Portrait von Domingo
  • 13.12.2014 - 14:09

Vielen Dank für den neuen Teil.

Portrait von MARIA52
  • 13.12.2014 - 12:31

Vielen Dank für den nächsten Teil.

Portrait von Kundentest
  • 13.12.2014 - 12:11

Herzlichen Dank für das Tutorial.

Portrait von BOPsWelt
  • 13.12.2014 - 12:03

Vielen Dank für einen weiteren Teil, klasse. :)

Portrait von pemis
  • 22.11.2014 - 18:39

Mit jeder Folge dringe ich tiefer in die Materie ein. Danke

Portrait von hierkarl
  • 15.11.2014 - 11:06

vielen dank für diese Video tutuorial, hat mir weitergeholfen :)

Portrait von Caesarion2004
  • 15.11.2014 - 11:02

Vielen Dank für das interessante Tutorial und die Datei.

Portrait von Kundentest
  • 15.11.2014 - 10:57

Herzlichen Dank für das Video.

Portrait von pallasathena
Portrait von rocking_sid
  • 15.11.2014 - 08:52

Vielen Dank für das interessante Video -Training!

x
×
×