HTML lernen - Formulare - Auswallisten
Sie möchten in HTML eine Auswahlliste erstellen? Dafür gibt es gleich mehrere Codes und Varianten, je nachdem, wie viele Element Ihre Liste haben soll...
Zur Erstellung einer Checkbox benötigen Sie wieder den input-Tag. Allerdings erhält das Attribut type nun den Wert checkbox. Außerdem müssen Sie das Attribut das Attribut value mit einem Wert versehen, den die Checkbox senden soll, wenn Sie angeklickt wird. Ist der Haken nicht gesetzt, wird kein Wert übertragen.
Hinweis: Wie bereits im vorherigen Kapitel erwähnt, können Sie mit den gesendeten Daten noch nichts anfangen. Sie können sich lediglich Mails mit diesen zusenden lassen.
Neben diesen Attributen sollten Sie, wie bereits im vorherigen Kapitel gelernt, dem input-Tag noch das name-Attribut zuweisen und.
Möchten Sie, dass ein Wert beim Laden der Seite bereits, dass ein Haken in die Checkbox gesetzt wird, müssen dieser das Attribut checked zuweisen.
Hinweis: Das Attribut checked kann ohne Attributwert verwendet werden oder Sie schreiben es so: checked="checked"
Beispiel:
Hierfür gibt es den Attributwert radio für das input-Attribut type. Auch Radiobuttons muss mit dem Attribut value ein Wert zugewiesen werden, da sonst keine Werte gesendet werden können.
Wie bei jedem Eingabefeld, ist auch hier das name-Attribut nötig. Dieser hat bei den Radio-Buttons sogar noch eine zweite Bedeutung: Radio-Buttons mit demselben Namen gehören zu einer Gruppe. Innerhalb einer Gruppe kann immer nur ein Element ausgewählt werden.
Möchten Sie, dass ein Wert beim Laden der Seite bereits ein Wert der Liste ausgewählt ist, müssen diesem das Attribut checked zuweisen.
Hinweis: Das Attribut checked kann ohne Attributwert verwendet werden oder Sie schreiben es so: checked="checked"
Achtung: Verwenden Sie das checked-Attribut mehr als einmal innerhalb einer Gruppe, wird automatisch der letzte Radio-Button ausgewählt.
Beispiel:
Zur Generierung einer Drop-Down-Liste benötigen Sie mindestens zwei HTML-Codes: den select-Tag zur Einleitung der Drop-Down-Liste und den Option-Tag für die einzelnen Werte der Liste.
Das Attribut name wird in den select-Tag geschrieben.
Verwendenden Sie außerdem das size-Attribut im select-Tag, wird aus einer herunterklappbaren Liste eine eckige Liste, in der mit Hilfe der Strg-Taste eine oder mehrere Elemente ausgewählt werden können, wenn Sie auch noch das multiple-Attribut (ohne Attributwert) setzen. size gibt dabei die Menge der angezeigten Elemente der Liste an, die zu sehen sein sollen, ohne dass man darin scrollen muss.
Zwischen den Anfangs- und den Endtag von select werden so viele option-Codes geschrieben, wie die Liste Elemente enthalten soll. Zwischen den Anfangs- und den Endtag eines option-Codes wird dann der Text geschrieben, der in der Drop-Down-Liste angezeigt werden soll.
Möchten Sie, dass die Drop-Down-Liste genau den Text sendet, der ausgewählt wurde, müssen Sie kein value-Attribut verwenden. Andernfalls müssen Sie dieses in den jeweiligen option-Anfangstag schreiben und ihm einen Wert zuweisen.
Möchten Sie, dass ein Wert beim Laden der Seite bereits ein Wert der Liste ausgewählt ist, müssen dem dazugehörigen options-Tag das Attribut selected zuweisen.
Hinweis: Das Attribut selected kann ohne Attributwert verwendet werden oder Sie schreiben es so: selected="selected"
Beispiel:
Zwischen den Anfangs- und Endtag dieses Codes werden alle option-Codes geschrieben, die zur jeweiligen Gruppe gehören sollen.
Um den einzelnen Gruppen Namen geben zu können, müssen Sie optgroup das Attribut label zuweisen. Der Wert dieses Attributs wird der Gruppentitel.
Beispiel:
Die Checkbox
Sicher kennen Sie die kleinen quadratischen Felder auch, auf die man klickt und so einen Haken in das Kästchen setzen kann. Diese Methode kommt besonders häufig bei der Akzeptierung von AGB oder Nutzungsbedingungen zum Einsatz.Zur Erstellung einer Checkbox benötigen Sie wieder den input-Tag. Allerdings erhält das Attribut type nun den Wert checkbox. Außerdem müssen Sie das Attribut das Attribut value mit einem Wert versehen, den die Checkbox senden soll, wenn Sie angeklickt wird. Ist der Haken nicht gesetzt, wird kein Wert übertragen.
Hinweis: Wie bereits im vorherigen Kapitel erwähnt, können Sie mit den gesendeten Daten noch nichts anfangen. Sie können sich lediglich Mails mit diesen zusenden lassen.
Neben diesen Attributen sollten Sie, wie bereits im vorherigen Kapitel gelernt, dem input-Tag noch das name-Attribut zuweisen und.
Möchten Sie, dass ein Wert beim Laden der Seite bereits, dass ein Haken in die Checkbox gesetzt wird, müssen dieser das Attribut checked zuweisen.
Hinweis: Das Attribut checked kann ohne Attributwert verwendet werden oder Sie schreiben es so: checked="checked"
Beispiel:
<input type="checkbox" name="agb_akzeptiert" value="ja" checked="checked"> Ich akzeptiere die AGB!
Radio-Buttons
Manchmal benötigt man jedoch eine Liste aus mehreren Optionen, von denen nur eine ausgewählt werden kann.Hierfür gibt es den Attributwert radio für das input-Attribut type. Auch Radiobuttons muss mit dem Attribut value ein Wert zugewiesen werden, da sonst keine Werte gesendet werden können.
Wie bei jedem Eingabefeld, ist auch hier das name-Attribut nötig. Dieser hat bei den Radio-Buttons sogar noch eine zweite Bedeutung: Radio-Buttons mit demselben Namen gehören zu einer Gruppe. Innerhalb einer Gruppe kann immer nur ein Element ausgewählt werden.
Möchten Sie, dass ein Wert beim Laden der Seite bereits ein Wert der Liste ausgewählt ist, müssen diesem das Attribut checked zuweisen.
Hinweis: Das Attribut checked kann ohne Attributwert verwendet werden oder Sie schreiben es so: checked="checked"
Achtung: Verwenden Sie das checked-Attribut mehr als einmal innerhalb einer Gruppe, wird automatisch der letzte Radio-Button ausgewählt.
Beispiel:
Wollen Sie etwas kaufen?<br> <input type="radio" name="kaufen" value="ja" checked> ja!<br> <input type="radio" name="kaufen" value="nein"> nein!<br><br> Welches Produkt möchten Sie kaufen?<br> <input type="radio" name="produkt" value="produkt1"> Produkt 1 <input type="radio" name="produkt" value="pordukt2" checked="checked"> Produkt 2 <input type="radio" name="produkt" value="produkt3"> Produkt 3
Drop-Down-Listen
Hat man eine große Liste an Elementen aus denen der Surfer eines oder mehrere auswählen soll, ist es nicht ratsam Radio-Buttons oder Checkboxen zu verwenden. Für diese Listen gibt es die platzsparenden Drop-Down-Listen.Zur Generierung einer Drop-Down-Liste benötigen Sie mindestens zwei HTML-Codes: den select-Tag zur Einleitung der Drop-Down-Liste und den Option-Tag für die einzelnen Werte der Liste.
Das Attribut name wird in den select-Tag geschrieben.
Verwendenden Sie außerdem das size-Attribut im select-Tag, wird aus einer herunterklappbaren Liste eine eckige Liste, in der mit Hilfe der Strg-Taste eine oder mehrere Elemente ausgewählt werden können, wenn Sie auch noch das multiple-Attribut (ohne Attributwert) setzen. size gibt dabei die Menge der angezeigten Elemente der Liste an, die zu sehen sein sollen, ohne dass man darin scrollen muss.
Zwischen den Anfangs- und den Endtag von select werden so viele option-Codes geschrieben, wie die Liste Elemente enthalten soll. Zwischen den Anfangs- und den Endtag eines option-Codes wird dann der Text geschrieben, der in der Drop-Down-Liste angezeigt werden soll.
Möchten Sie, dass die Drop-Down-Liste genau den Text sendet, der ausgewählt wurde, müssen Sie kein value-Attribut verwenden. Andernfalls müssen Sie dieses in den jeweiligen option-Anfangstag schreiben und ihm einen Wert zuweisen.
Möchten Sie, dass ein Wert beim Laden der Seite bereits ein Wert der Liste ausgewählt ist, müssen dem dazugehörigen options-Tag das Attribut selected zuweisen.
Hinweis: Das Attribut selected kann ohne Attributwert verwendet werden oder Sie schreiben es so: selected="selected"
Beispiel:
<select name="aufklappbareListe"> <option value="1" selected>Listenwert 1</option> <option>Listenwert2</option> </select> <br><br> <select name="normaleListe" size="5"> <option selected="selected" value="1">Listenwert 1</option> <option>Listenwert2</option> </select> <br><br> <select name="mehrfachListe" size="5" multiple> <option selected="selected" value="1">Listenwert 1</option> <option>Listenwert2</option> <option>Listenwert3</option> <option>Listenwert4</option> </select>Möchten Sie, dass die Werte innerhalb einer Drop-Down-Liste in Gruppen angezeigt werden, müssen Sie den optgroup-Code dazu verwenden.
Zwischen den Anfangs- und Endtag dieses Codes werden alle option-Codes geschrieben, die zur jeweiligen Gruppe gehören sollen.
Um den einzelnen Gruppen Namen geben zu können, müssen Sie optgroup das Attribut label zuweisen. Der Wert dieses Attributs wird der Gruppentitel.
Beispiel:
<select name="aufklappbareListe"> <optgroup label="Gruppe1"> <option value="1" selected>Listenwert 1</option> <option>Listenwert2</option> </optgroup> <optgroup label="Gruppe2"> <option>Listenwert5</option> <option>Listenwert6</option> <option>Listenwert7</option> </optgroup> </select>