Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 14): Formulare (2)

HTML & CSS für Einsteiger (Teil 14): Formulare (2)

In diesem Video lernt ihr weitere Feldtypen kennen, mit denen ihr eure Formulare ausstatten könnt. Konkret geht es dabei um Auswahlfelder, Radio-Buttons und Checkboxen. Das alles sind wichtige Elemente, die man in Formularen immer wieder braucht. Grund genug also, auf diese und andere Elemente einen genaueren Blick zu werfen.

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


Über Auswahllisten könnt ihr den Besuchern eine Liste von Einträgen anbieten, aus denen sie einen Eintrag auswählen können.
<select name="sprachen">
   <option>HTML</option>
   <option>JavaScript</option>
   <option>CSS</option>
   <option>XML</option>
   <option>Java</option>
</select>

Definiert werden Auswahllisten über das select-Element. Auch hier gilt wieder: Jede Auswahlliste sollte über einen Bezeichner (name) im Dokument eindeutig identifizierbar sein. Die einzelnen Einträge der Liste definiert man jeweils über ein option-Element. Zwischen öffnendem und schließendem <option> steht der Text des Listeneintrags.

Bilder



 
Standardmäßig wird beim Absenden des Formulars der Text des gewählten Listeneintrags übermittelt. Alternativ dazu könnt ihr den Absendewert aber auch anders gestalten. Das geschieht über das value-Attribut.
<select name="sprachen">
   <option value="s1">HTML</option>
   <option value="s2">JavaScript</option>
   <option value="s3">CSS</option>
   <option value="s4">XML</option>
   <option value="s5">Java</option>
</select>

Diesem value weist ihr einfach den gewünschten Absendewert zu.

Normalerweise ist von einer Auswahlliste jeweils nur ein Eintrag zu sehen. Ihr könnt auf Wunsch aber auch gleich mehrere Einträge anzeigen lassen.

Bilder



 
Weist dazu dem select-Element das Attribut size zu. Dieses size legt die Anzeigengröße der Auswahlliste fest.
<select name="sprachen" size="3">
   <option>HTML</option>
   <option>JavaScript</option>
   <option>CSS</option>
   <option>XML</option>
   <option>Java</option>
</select>

Enthält die Liste mehr Einträge, als angezeigt werden können, lässt sich die Liste scrollen.

Von Hause aus kann aus einer Auswahlliste nur jeweils ein Eintrag ausgewählt werden. Bei Bedarf lässt sich aber auch eine Mehrfachauswahl umsetzen.
<select name="sprachen" size="3" multiple>
   <option>HTML</option>
   <option>JavaScript</option>
   <option>CSS</option>
   <option>XML</option>
   <option>Java</option>
</select>

 
Möglich wird die Mehrfachauswahl durch Zuweisen des multiple-Attributs im select-Element.

Bilder



 
In Auswahllisten ist zunächst einmal kein Eintrag vorselektiert. Auch das lässt sich aber durch den Einsatz eines entsprechenden Attributs ändern.
<select name="sprachen" size="3" multiple>
   <option>HTML</option>
   <option>JavaScript</option>
   <option selected>CSS</option>
   <option>XML</option>
   <option>Java</option>
</select>

Um eine Eintrag vorzuselektieren, weist man dem betreffenden option-Element das selected-Attribut zu.

Bilder



Ihr könnt übrigens auch mehrere Einträge vorselektieren. Verwendet dazu das selected-Attribut einfach mehrmals.


 

Radio-Buttons

Über die sogenannten Radio-Buttons könnt ihr Gruppen von Knöpfen definieren.

Bilder



Aus einer solchen Gruppe können die Anwender dann jeweils eine der angebotenen Optionen auswählen.

Definiert werden Radio-Buttons über input-Elemente, denen die Attribut-Wert-Kombination type="radio" zugewiesen wird.
<form action="form.php" method="post">
   <p>Willst Du den Newsletter abonnieren?:</p>
   <p>
    <input type="radio" name="newsletter" value="ja" /> Ja<br />
    <input type="radio" name="newsletter" value="nein" /> Nein
   </p>
</form>

Verwendet auch hier wieder das name-Attribut, um den Radio-Buttons einen Bezeichner zuzuweisen. Alle Buttons, die den gleichen Namen besitzen, gehören dabei zu einer Gruppe. Von diesen Schaltflächen lässt sich dann exakt einer markieren.

Über das value-Attribut bestimmt man den Absendewert der einzelnen Buttons.

Um einen Button vorzuselektieren, weist man ihm das Attribut checked zu.
<form action="form.php" method="post">
   <p>Willst Du den Newsletter abonnieren?:</p>
   <p>
    <input type="radio" name="newsletter" value="ja" /> Ja<br />
    <input type="radio" name="newsletter" value="nein" checked /> Nein
   </p>
</form>

Beachtet dabei, dass eine Vorauswahl nur bei einem Button einer Gruppe gemacht werden kann.


Checkboxen

Auch Checkboxen kennt ihr von unzähligen Formularen.

Bilder



Dabei handelt es sich um eine Gruppe von ankreuzbaren Rechtecken, von denen die Anwender eines, keins oder mehrere auswählen können.
<p>Welche Themen interessieren dich noch?:</p>
  <p>
    <input type="checkbox" name="thema" value="html" /> HTML<br />
    <input type="checkbox" name="thema" value="css" /> CSS<br />
    <input type="checkbox" name="thema" value="javascript" /> JavaScript
</p>

Definiert werden Checkboxen über input-Elemente, denen die Attribut-Wert-Kombination type="checkbox" zugewiesen wird. Jeder Checkbox wird dabei über das name-Attribut ein Bezeichner gegeben. Alle Checkboxen, die den gleichen Namen haben, gehören dabei zu einer Gruppe. Über das value-Attribut bestimmt man den Absendewert der einzelnen Checkboxen.


Versteckte Eingabefelder

Ihr könnt innerhalb von Formularen Felder definieren, die für die Besucher unsichtbar sind. Beim Absenden des Formulars werden die in den versteckten Feldern enthaltenen Werte mit übertragen. Interessant ist das beispielsweise, wenn man mittels PHP Werte ermittelt und diese mitschicken will, ohne dass die Anwender davon etwas mitbekommen.

Definieren lassen sich versteckte Eingabefelder über input-Elemente, denen man die Attribut-Wert-Kombination type="hidden" zuweist.
<input type="hidden" name="id" value="">

Dem Element gibt man über das name-Attribut einen eindeutigen Bezeichner. Der Wert des Feldes wird über value angegeben. Dabei kann es sich um einen statischen Wert handeln. Ebenso kann man diesen aber beispielsweise auch dynamisch mittels PHP oder JavaScript zuweisen.


 

Upload-Felder

Wenn ihr den Besuchern das Hochladen von Dateien erlauben wollt, könnt ihr ebenfalls ein entsprechendes Feld anbieten. Hier ein Beispiel dafür, wie eine entsprechende Anwendung aussehen kann:
<form action="form.php" method="post" enctype="multipart/form-data">
   <p>Deine Wahl:<br> <input name="Datei" type="file" /></p>
</form>

Im Browser sieht das so aus:

Bilder



Definieren lassen sich Upload-Felder über input-Elemente mit der Attribut-Wert-Kombination type="file". Verwendet bei diesem Feldtyp im einleitenden <form> die Angabe method="post". Außerdem sollte dort auch die Attribut-Wert-Kombination enctype="multipart/form-data" stehen. Nur dann werden nämlich tatsächlich die Dateien übertragen. Verzichtet man auf diese Angabe, wird ausschließlich der Dateiname übermittelt.


 

Schaltflächen zum Senden und Abbrechen

Damit die Formulardaten überhaupt verschickt werden können, braucht es natürlich eine entsprechende Schaltfläche.

Bilder



Zum Absenden von Formularen verwendet man die folgende Syntax:
<input type="submit" value="Absenden" />

Dabei bestimmt der Wert des value-Attributs das, was auf der Schaltfläche steht.

 
Das Gegenstück zu diesen Submit- sind Abbrechen-Schaltflächen.

Bilder



 
Klickt man einen solchen Button an, werden sämtliche Formularinhalte gelöscht. Die Syntax für diese Schaltflächen sieht so aus:
<input type="reset" value="Abbrechen" />

Auch hierbei gilt: Die Beschriftung wird über den Wert des value-Attributs festgelegt.

Ihr könnt übrigens auch über das button-Element Schaltflächen definieren.

Bilder



Vorteil dieser Variante: Ihr seid damit sehr flexibel. Tatsächlich könnt ihr nämlich Aussehen und Funktionalität dieser Schaltflächen selbst bestimmen.
<button name="klick" type="button" value="Überraschung" onclick="alert('Bist Du sicher?');">Klick mich an</button>

Im aktuellen Beispiel wird mittels onclick-Event-Handler erreicht, dass sich beim Anklicken der Schaltfläche ein JavaScript-Meldungsfenster öffnet. Das Aussehen der Schaltfläche bestimmt man durch den Inhalt zwischen einleitendem und schließendem <button>-Tag. Dabei kann es sich übrigens um jeden beliebigen Inhalt handeln. Es ist also nicht nur Text erlaubt. Ebenso könnt ihr hier ein img-Element angeben, um einen grafischen Button zu generieren.

Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.10.2016 - 16:10

Herzlichen Dank für das weitere Video.

Portrait von Monti7
  • 03.03.2015 - 18:04

Wiedermal perfekt! Vielen Dank!

Portrait von Kiddo
  • 17.12.2014 - 12:34

Danke für den 2. Teil der Formular-Tutorials.

Portrait von Kundentest
  • 16.12.2014 - 20:45

Herzlichen Dank für das Tutorial.

Portrait von Caesarion2004
  • 16.12.2014 - 19:16

Vielen Dank für den weiteren sehr interessanten Teil der Reihe.

Portrait von swinxx
  • 16.12.2014 - 17:43

Danke für das Tutorial, die Ausführung fand ich sehr gut und leicht verständlich!

LG, Swinxx

Portrait von MARIA52
  • 16.12.2014 - 15:35

Vielen Dank für das Tutorial.

Portrait von pallasathena
  • 16.12.2014 - 12:40

vielen Dank für die Verschriftlichung

Portrait von BOPsWelt
  • 16.12.2014 - 12:05

Vielen Dank für den 14. Teil des Tutorials.

Portrait von pemis
  • 22.11.2014 - 18:37

Für Einsteiger sehr gut und fundiert erläutert. Danke

Portrait von Steve007
  • 15.11.2014 - 15:08

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von rocking_sid
  • 15.11.2014 - 14:45

Vielen Dank für das sehr informative Video - Training!

Portrait von kalleblomquist
Portrait von pallasathena
Portrait von Kundentest
  • 15.11.2014 - 11:07

Herzlichen Dank für das weitere Video.

Portrait von MARIA52
  • 15.11.2014 - 11:05

Vielen Dank für das interessante Video.

Portrait von Caesarion2004
  • 15.11.2014 - 11:04

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

Portrait von Domingo
  • 15.11.2014 - 11:01

Gut gemachtes Video. Vielen Dank

x
×
×
teststefan