Erstellen eines Formulars mit erweiterten Formularfeldern im HTML
Verschiedene Formularfelder gestalten
In Ihrer letzten Übung für dieses Kapitel werden Sie die Formularfelder in ein großes Formular in einer Webseite integrieren.
Sie beginnen mit einem großen Formular. Öffnen Sie Ihr HTML-Schablonen-Dokument und erstellen Sie ein Formular im Rumpf des Dokuments.
Auf dieser Seite werden Sie zwei Teile erstellen: einen Teil, in dem Fragen über den Besucher gestellt werden, und ein Teil, in dem Fragen über den Grund seines Besuchs auf Ihrer Webseite gestellt werden. Das ist eine Aufgabe für <fieldset>-Tags.
Erstellen Sie jetzt das erste <fieldset>-Tag. Beginnen Sie mit dem <form>-Element und fügen Sie ein <fieldset>-Tag und <legend> wie im folgenden Beispiel hinzu:
<form action="https://www.html-lernen.info/cgi-bin/match.cgi" method="post">
<fieldset>
<legend>Tell us about yourself.</legend>
Fügen Sie eine Beschriftung für das <select>-Element und anschließend das <select>-Element hinzu, und geben Sie schließlich alle Optionen ein. Wenn Sie schon dabei sind, definieren Sie die tabindex- und accesskey-Attribute.
<label for="control1">I have a funny bone that...</label>
<select name="humor" id="control1" tabindex="1" accesskey="h">
<option value="-1">Please pick one</option>
<option value="-1">---------------</option>
<option value="0">has been removed.</option>
<option value="1">is my skull.</option>
<option value="2">is ticklish.</option>
</select>
Das war doch nicht allzu schwierig. Geben Sie nun das zweite <label> und <select>-Element wie im folgenden Beispiel ein:
<label for="control2">I like to take long walks...</label>
<select name="walks" id="control2" tabindex="2" accesskey="w">
<option value="-1">Please pick one</option>
<option value="-1">--------------</option>
<option value="fields">in the corn fields at our farm.</option>
<option value="streets">on the streets of my city.</option>
<option value="beach">down the hall in my dorm.</option>
<option value="apartment">to the refrigerator.</option>
</select>
Vervollständigen Sie das <fieldset>, indem Sie ein letztes <label> und <textarea>-Formularfeld hinzufügen. Vergessen Sie nicht das abschließende <fieldset>-Tag.
<fieldset>
<label for="control3">Why should we care?</label>
<textarea name="mycomments" id="control3" rows="5" cols="30" tabindex="3">
</textarea>
</fieldset>
Sie haben schon fast die Hälfte geschafft. Verwenden Sie folgenden Code, um ein zweites <fieldset> zu erstellen, das Fragen zum Grund des Besuchs auf Ihrer Webseite enthält.
<fieldset>
<legend>What are you looking for?</legend>
<label for="control4">I want...</label>
<select name="romance" id="control4" size="4" tabindex="4" accesskey="r">
<option>somebody to watch movies with.</option>
<option>a serious relationship.</option>
<option>a Hot-N-Steamy romance.</option>
<option>someone to clean the catbox.</option>
</select>
<label for="control5">Describe your perfect partner.</label>
<textarea name="lookingfor" id="control5" rows="5" cols="30" tabindex="5">
</textarea>
</fieldset>
Nachdem die beiden <fieldsets> nun vervollständigt sind, fügen Sie ein deaktiviertes und ein Nur-Lese-Formularfeld hinzu, um sicher zu gehen, dass Sie alle Grundlagen erstellt haben.
Check if you want to join our club.
<input type="checkbox" name="single" checked disabled />
Do you agree to pay us for this service?
<input type="text" name="pay" value="yes" readonly />
Fügen Sie nun die Submit und Reset-Schaltflächen hinzu, und schließen Sie das <form>-Element. Beachten Sie, dass ich mit Hilfe des <button>-Tag spezielle Grafiken für die Schaltflächen einfüge.
<button name="submit" type="submit" tabindex="6">
<img src="submit.gif" width="60" height="30" />
</button>
<button name="reset" type="reset" tabindex="7">
<img src="reset.gif" width="60" height="30" />
</button>
</form>
Da Ihr Formular nun fertig ist, können Sie am Seitenanfang eine Titelgrafik hinzufügen und die meisten Ihrer Formularfelder in eine Tabelle einbinden. Das vollständige Listing zeigt das Endergebnis:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/transitional.dtd">
<html>
<head>
<title>Matchmaker Matchmaker</title>
</head>
<body>
<div align="center">
<img src="title.gif" width="300" height="35" />
</div>
<form action="https://www.html-lernen.info/cgi-bin/match.cgi" method="post">
<table border="0" width="100%">
<tr valign="top">
<td width="50%">
<table border="0">
<tr>
<td align="center">
<fieldset>
<legend>Tell us about yourself.</legend>
<label for="control1">I have a funny bone that...</label>
<br />
<select name="humor" id="control1" tabindex="1" accesskey="h">
<option value="-1">Please pick one</option>
<option value="-1">--------------</option>
<option value="0">has been removed.</option>
<option value="1">is my skull.</option>
<option value="2">is ticklish.</option>
</select>
<br />
<label for="control2">I like to take long walks...</label>
<select name="walks" id="control2" tabindex="2" accesskey="w">
<option value="-1">Please pick one</option>
<option value="-1">--------------</option>
<option value="fields">in the corn fields at our farm.</option>
<option value="streets">on the streets of my city.</option>
<option value="beach">down the hall in my dorm.</option>
<option value="apartment">to the refrigerator.</option>
</select>
<br />
<label for="control3">Why should we care?</label>
<br />
<textarea name="mycomments" id="control3" rows="5" cols="30" tabindex="3">
</textarea>
</fieldset>
</td>
</tr>
</table>
</td>
<td width="50%">
<table border="0">
<tr>
<td align="center">
<fieldset>
<legend>What are you looking for?</legend>
<label for="control4">I want...</label>
<br />
<select name="romance" id="control4" size="4" tabindex="4" accesskey="r">
<option>somebody to watch movies with.</option>
<option>a serious relationship.</option>
<option>a Hot-N-Steamy romance.</option>
<option>someone to clean the catbox.</option>
</select>
<br />
<label for="control5">Describe your perfect partner.</label>
<textarea name="lookingfor" id="control5" rows="5" cols="30" tabindex="5">
</textarea>
</fieldset>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">Check if you want to join our club.
<input type="checkbox" name="single" checked disabled />
</td>
<td></td>
</tr>
<tr>
<td colspan="2">Do you agree to pay us for this service?
<input type="text" name="pay" value="yes" readonly />
</td>
<td></td>
</tr>
</table>
<div align="center">
<table border="0">
<tr>
<td><button name="submit" type="submit" tabindex="6"><img src="submit.gif" width="60" height="30" /></button></td>
<td><button name="reset" type="reset" tabindex="7"><img src="reset.gif" width="60" height="30" /></button></td>
</tr>
</table>
</div>
</form>
</body>
</html>
In Abbildung sehen Sie das Endergebnis dieser Übung.
