Erstellen eines Formulars mit verschiedenen Eingabefeldern
Webseite mit verschiedenen Formularen und Formularfeldern
Es ist Zeit für eine neue Übung. In dieser Übung werden Sie mit allen Formularfeldern arbeiten, die in dieser Lektion vorgestellt wurden.
Zu Beginn, öffnen Sie die HTML-Schablone, die Sie in HTML-Formular das Name und Passwort akzeptiert erstellt haben. Fügen Sie drei Formularrümpfe ein. Das erste Formular wird als Umfrage dienen, das zweite wird Ihnen Zutritt zu einem Mitgliedsbereich einer virtuellen Mime-Akademie verschaffen und das dritte Formular dient der Site-Suche. Benutzen Sie folgenden Code:
<form action="https://www.html-lernen-copy.html-lernen.info/cgi-bin/survey.cgi method=" post">
</form>
<form action="https://www.html-lernen-copy.html-lernen.info/cgi-bin/members.cgi method=" post">
</form>
<form action="https://www.html-lernen-copy.html-lernen.info/cgi-bin/search.cgi method=" get">
</form>
Vergessen Sie nicht, dass Sie für jedes Formular zur Verarbeitung der Daten verschiedene Scripts verwenden, und dass das dritte Formular die
get-Methode zur Datenübertragung verwendet.
Nun ist es an der Zeit, jedem Formular Formularfelder hinzuzufügen. Für die Umfrage werden Sie einige einfache Multiple-Choice-Fragen stellen. Für die erste Frage benutzen Sie Checkboxen und geben Sie diesen Checkboxen allen den gleichen Namen. Platzieren Sie die Text-Eingabeaufforderung vor das <input>-Element, sodass der Text im Browser-Fenster links von der Checkbox erscheint. Im folgenden Code sehen Sie wie es gemacht wird:
<form action="https://www.html-lernen-copy.html-lernen.info/cgi-bin/survey.cgi method="post">
Take today es survey I like miming because: (check all that apply) It es fun
<input type="checkbox" name="whyilikeit" value="fun" />
I meet interesting people
<input type="checkbox" name="whyilikeit" value="people" />
It es who I am
<input type="checkbox" name="whyilikeit" value="personality" />
The money
<input type="checkbox" name="whyilikeit" value="money" />
Die zweite Frage in diesem Formular ist eine weitere Multiple-Choice-Frage. Diesmal jedoch werden Sie nur eine Antwort akzeptieren. Benutzen Sie hierfür Optionsfelder, die alle den gleichen Namen haben. Anstatt die Text-Eingabeaufforderungen vor die Schaltfläche zu platzieren, stellen Sie diese lieber hinter die Optionsfelder, sodass sie rechts von den Optionsfeldern erscheinen. So gehen Sie sicher, dass die Schaltflächen in einer Reihe angeordnet sind.
The most difficult thing about being a mime is:
<input type="radio" name="difficult" value="makeup" />
Putting on the makeup
<input type="radio" name="difficult" value="unitard" />
Wearing a spandex unitard
<input type="radio" name="difficult" value="nottalking" />
Not talking
Fügen Sie als Nächstes einen Dateiauswahldialog ein, sodass den Benutzern das Auswählen und Uploaden einer Datei möglich ist. Fügen Sie Submit und Reset-Schaltflächen hinzu. Um die Umfrage schließlich zu tracken, fügen Sie ein verstecktes Formularfeld hinzu, das festkodiert ist und den Wert 061300 hat. Wenn Sie das versteckte Formularfeld verwenden, können Sie alle Überblick-Antworten überwachen, wann immer Sie möchten, und die Kontrollfläche jeden Tag ändern. Nachdem Sie das versteckte Formularfeld hinzugefügt haben, geben Sie das abschließende <form>-Element ein.
Upload a picture of yourself miming!
<input type="file" name="picture" />
<input type="submit" value="submit" />
<input type="reset" value="reset" />
<input type="hidden" name="surveynumber" value="091899" />
</form>
Das zweite und dritte Formular ist viel einfacher. Im zweiten Formular müssen Text- und Passwort-Formularfelder für Benutzernamen und Passwort hinzugefügt werden. Integrieren Sie zum Schluss noch eine Submit-Schaltfläche in Ihr Formular. Beschränken Sie die Maximalzahl der Zeichen (normalerweise können 20 oder 10 Zeichen eingegeben werden). Begrenzen Sie dann das Passwort-Feld, wie im folgenden Beispiel, auf 10 Zeichen:
<form action="https://www.html-lernen-copy.html-lernen.info/cgi-bin/members.cgi method=" post">
Enter our Member es Only area! Username:
<input type="text" name="username" maxlength="20" />
Password:
<input type="password" name="userpassword" size="10" maxlength="10" />
<input type="submit" value="submit" />
</form>
Das fertige Formular besteht letztendlich nur aus einem Textfeld und einer Image-Schaltfläche. Die Image-Schaltfläche dient hier als Submit-Schaltfläche. Auf dieser Schaltfläche ist eine Grafik zu sehen, die hier eine gewöhnliche Schaltflächenoberfläche ersetzt.
<form action="https://www.html-lernen-copy.html-lernen.info/cgi-bin/search.cgi method=" get">
Search our database
<input type="text" name="searchstring" />
<input type="image" src="searchbtn.gif" name="searchbtn" />
</form>
Die Formulare, Formularfelder und andere Informationen sind nun fertig; Damit diese in einem HTML-Dokument gut aussehen, müssen sie jedoch noch formatiert werden.
Ich habe festgestellt, dass mir das Formatieren meiner Formulare nach ihrer Erstellung die Möglichkeit gibt, jeden Aspekt einzeln zu betrachten. So erhalte ich noch viel bessere Ergebnisse.
Wenn man die Seite so betrachtet, kann man erkennen, dass sie schön in fünf Elemente unterteilt ist: drei Formulare, eine Titelgrafik, die ganz oben auf der Webseite erscheinen wird und eine andere Grafik, die das Interesse der Besucher weckt.
Um die Elemente auf Ihrer Seite zu organisieren, zentrieren Sie als Erstes die Titelgrafik ganz oben auf der Seite, indem Sie folgenden Code verwenden:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/transitional.dtd">
<html>
<head>
<title>HTML Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<div align="center">
<img src="welcome.gif" height="35" width="300" />
</div>
Es geht weiter: Bitte beachten Sie, dass zwei Formulare eher kurz, und eines lang ist. Denken sie an den Rest der Seite: Es sind zwei Spalten vorhanden, in die Sie die zwei kleineren Formulare eingeben können. Auf der einen Seite der Spalte ist die Interesse-Grafik integriert, auf der anderen das längere Formular. Wie sollen Sie das nur machen? Ganz einfach: mit Tabellen.
Beginnen Sie mit dem Erstellen einer Haupttabelle, die aus zwei Spalten und drei Zeilen besteht. Im folgenden Code habe ich die Rolle einer jeden Zeile der Tabelle aufgezeigt:
<table border="0">
<tr>
<td></td> <!-- Zeile 1, Spalte 1: Die Grafik, um Interesse zu wecken -->
<td></td> <!-- Zeile 1, Spalte 2: Fügen Sie hier die verschachtelte Tabelle für das erste Formular ein -->
</tr>
<tr>
<td></td> <!-- Zeile 2, Spalte 1: Hier fügen Sie eine weitere verschachtelte Tabelle für das zweite Formular ein -->
<td></td> <!-- Zeile 2, Spalte 2: Fortsetzung des ersten Formulars. -->
</tr>
<tr>
<td></td> <!-- Zeile 3, Spalte 1: Auch hier eine verschachtelte Tabelle. Diese für das dritte Formular. -->
<td></td> <!-- Zeile 3, Spalte 2: Fortsetzung des ersten Formulars. -->
</tr>
</table>
Verwenden Sie nun folgenden Code, um die verschachtelten Tabellen hinzuzufügen:
<table border="0">
<tr>
<td></td> <!-- Zeile 1, Spalte 1: Die Grafik, um Interesse zu wecken -->
<td> <!-- Zeile 1, Spalte 2: Fügen Sie hier die verschachtelte Tabelle für das erste Formular ein -->
<table border="0">
<tr>
<td></td>
<td></td>
</tr>
<!-- Bitte fügen Sie hier 12 weitere Tabellenzeilen ein wie die vorherige -->
</table>
</td>
</tr>
<tr>
<td> <!-- Zeile 2, Spalte 1: Hier fügen Sie eine weitere verschachtelte Tabelle für das zweite Formular ein -->
<table border="0">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
<td></td> <!-- Zeile 2, Spalte 2: Fortsetzung des ersten Formulars. -->
</tr>
<tr>
<td> <!-- Zeile 3, Spalte 1: Auch hier eine verschachtelte Tabelle. Diese für das dritte Formular. -->
<table border="0">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</form>
</table>
</tr>
</table>
Fügen Sie die Grafik-und Formular-Tags an ihre entsprechenden Stellen in den Tabellen hinzu und fügen Sie nun alles zusammen.
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/transitional.dtd">
<html>
<head>
<title>HTML Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<div align="center">
<img src="welcome.gif" height="35" width="300" />
</div>
<table border="0">
<tr>
<td align="center"><img src="anne.gif" height="146" width="200" /></td>
<td rowspan="3">
<table border="0" bgcolor="#ffcc33">
<form action="https://www.html-lernen-copy.html-lernen.info/cgi-bin/survey.cgi" method="post">
<tr>
<td align="center" colspan="2">Take today es survey</td>
<td></td>
</tr>
<tr>
<td colspan="2">I like miming because: (check all that apply)</td>
<td></td>
</tr>
<tr>
<td> </td>
<td>It es fun
<input type="checkbox" name="whyilikeit" value="fun" />
</td>
</tr>
<tr>
<td> </td>
<td>I meet interesting people
<input type="checkbox" name="whyilikeit" value="people" />
</td>
</tr>
<tr>
<td> </td>
<td>It es who I am
<input type="checkbox" name="whyilikeit" value="personality" />
</td>
</tr>
<tr>
<td> </td>
<td>The money
<input type="checkbox" name="whyilikeit" value="money" />
</td>
</tr>
<tr>
<td colspan="2">The most difficult thing about being a mime is:</td>
<td></td>
</tr>
<tr>
<td> </td>
<td>
<input type="radio" name="difficult" value="makeup" />
Putting on the makeup</td>
</tr>
<tr>
<td> </td>
<td>
<input type="radio" name="difficult" value="unitard" />
Wearing a spandex unitard</td>
</tr>
<tr>
<td> </td>
<td>
<input type="radio" name="difficult" value="nottalking" />
Not talking</ td>
</tr>
<tr>
<td colspan="2">Upload a picture of yourself miming!</td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<input type="file" name="picture" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="submit" />
<input type="reset" value="reset" />
</td>
<td></td>
</tr>
<input type="hidden" name="surveynumber" value="091899" />
</form>
</table>
</td>
</tr>
<tr>
<td valign="top">
<table border="0" bgcolor="#ffff99" width="100%">
<form action="https://www.html-lernen-copy.html-lernen.info/cgi-bin/members.cgi" method="post">
<tr>
<td align="center" colspan="2">Enter our Member es Only area!</td>
<td></td>
</tr>
<tr>
<td>Username:</td>
<td>
<input type="text" name="username" maxlength="20" />
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" name="userpassword" size="10" maxlength="10" />
</ td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="submit" />
</td>
<td></td>
</tr>
</form>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" width="100%" bgcolor="#ffcccc">
<form action="https://www.html-lernen-copy.html-lernen.info/cgi-bin/search.cgi" method="get">
<tr>
<td>Search our database</td>
<td>
<input type="text" name="searchstring" />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="image" src="searchbtn.gif" name="searchbtn" />
</td>
<td></td>
</tr>
</form>
</table>
</td>
</tr>
</table>
</body>
</html>
In Abbildung sehen Sie die fertig erstellte Webseite mit verschiedenen Formularen und Formularfeldern ergänzt.
