9.7 Weitere Formularelemente
Im nachfolgenden Programm werden einige weitere, typische Formularelemente vorgestellt: eine Auswahlliste, eine CheckBox und zwei RadioButtons. Der Benutzer wählt Einträge aus bzw. markiert diese und sendet das Formular zum Webserver. Dort werden die Inhalte des Formulars empfangen und verarbeitet.
Zunächst erscheint das Eingabeformular. Nach dem Absenden erscheint das Ergebnis wie in Abbildung 9.8.
Abbildung 9.8 Formular mit verschiedenen Elementen
Es folgt der Code der Seite default.aspx in der Web-Anwendung mit dem Namen WebFormularElemente:
<html>
<head>
<title>WebFormularElemente</title>
<%@ page language="VB" %>
<script runat="server">
Sub Page_Load()
If (IsPostBack) Then
ausgabe.Text =
"Wir bieten ein Hotel in " +
ziel.Value
End If
If (allinc.Checked) Then
ausgabe.Text += "<br />All Inclusive"
End If
If (bett2.Checked) Then
ausgabe.Text += "<br />Mit 2 Betten"
Else
ausgabe.Text += "<br />Mit 3 Betten"
End If
End Sub
</script>
</head>
<body>
<p>Ihr Reiseziel:</p>
<form id="Form1" runat="server">
<p><select id="ziel" runat="server">
<option value="Barcelona">Spanien</option>
<option value="Grenoble" selected="selected">
Frankreich</option>
<option value="Genf">Schweiz</option>
<option value="Graz">Österreich</option>
</select></p>
<p><input id="allinc" runat="server"
type="checkbox" />All Inclusive</p>
<p><input type="radio" name="bett" id="bett2"
runat="server" checked="True" />2-Bett<br />
<input type="radio" name="bett" id="bett3"
runat="server" />3-Bett</p>
<p><input id="Submit1" runat="server"
type="submit" value="Senden" /></p>
<p><asp:Label id="ausgabe" runat="server" /></p>
</form>
</body>
</html>
Listing 9.8 Projekt »WebFormularElemente«, Datei »default.aspx«
Zur Erläuterung des Visual-Basic-Blocks:
- Das Element ziel repräsentiert die Auswahlliste. Die Eigenschaftsmethode Value liefert den Wert der ausgewählten Option.
- Das Element allinc steht für die CheckBox. Die Eigenschaftsmethode Checked liefert True bzw. False je nachdem, ob die CheckBox markiert wurde oder nicht.
- Die beiden RadioButtons haben die IDs bett2 und bett3. Da sie im HTML-Code miteinander gekoppelt sind (siehe dort), kann nur eine der beiden Möglichkeiten gewählt werden.
- ausgabe ist ein Label, in dem die Auswahl angezeigt wird.
Zur Erläuterung des HTML-Containers:
- Innerhalb des Containers <form> ... </form> werden die Formularelemente notiert.
- Der Container <select> ... </select> kennzeichnet eine Auswahlliste. Die einzelnen Optionen für den Benutzer stehen jeweils im Container <option> ... </option>. Die zweite Option wird mithilfe von selected="selected" zum Standard, falls der Benutzer keine Option auswählt.
- Bei den Optionen müssen Sie zwischen angezeigtem Text und Wert (=Value) der Option unterscheiden. Nur der Wert wird gesendet.
- Das HTML-Element <input type="checkbox" ... /> steht für die CheckBox.
- Die beiden RadioButtons werden mithilfe von <input type="radio" ... /> erzeugt. Da im Attribut name der gleiche Wert steht (bett), sind die beiden RadioButtons miteinander gekoppelt. Der erste RadioButton wird mithilfe von checked="True" zum Standard, falls der Benutzer keinen Radio-Button auswählt.
- Hinweis: In HTML müsste es eigentlich heißen: checked="checked", dies wird aber von der Entwicklungsumgebung als Fehler gemeldet.
Ihre Meinung
Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.
