HTML-Formular das Name und Passwort akzeptiert
Das <form>-Element und das <input>-Element
O.K., gehen wir es an und erstellen ein einfaches Formular, das die eben erklärten Konzepte illustriert.
Ich habe eine Webseite erstellt, die den Benutzer zwingt, einen Namen und ein Passwort einzugeben, um mit der Anwendung fortzufahren. Werfen Sie einen Blick auf Abbildung und sehen Sie sich die Webseite an.
Beginnen Sie mit dem Öffnen Ihres bevorzugten HTML-Editors (ich bevorzuge BBEdit) und erstellen Sie eine Webseiten-Schablone. Geben Sie als Erstes die Standard-HTML Kopfzeileninformation ein, fügen Sie das <body>-Tag hinzu, und setzen Sie die <body>- und HTML-Elemente in abschließende Tags, um eine Schablone zu erhalten, die als Grundlage zur folgenden Arbeit dient. Wenn Sie bereits eine ähnliche Schablone besitzen, laden Sie sie einfach in Ihren HTML-Editor herunter.
Ich tendiere dazu, Transitional HTML zu benutzen und dies in <!doctype> zu vermerken. Das gibt mir die Flexibilität, verworfene HTML-Elemente hinzuzufügen, ohne dass ich mir Sorgen um Validierungsfehler machen müsste.
<!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>
</body>
</html>
Fügen Sie als Nächstes Ihren Titel hinzu, um den Inhalt Ihrer Webseite anzukündigen.
<title>HTML Lernen - Grundlagen und Tutorials</title>
Fügen Sie innerhalb des Bodys der Webseite ein <form>-Element hinzu. Ich habe sowohl das einleitende als auch das abschließende Tag eingefügt, und dazwischen eine Freizeile gelassen, damit ich nicht vergesse, <form> am Ende zu schließen.
<form action="https://www.html-lernen-copy.html-lernen.info/cgi-bin/entrance.cgi" method="post">
</form>
Bevor wir fortfahren, müssen Sie mehr über das <form>-Element und die Attribute, die Sie im einleitenden Tag sehen können, wissen. <form> ist hier also der Anfang des Elements und gibt an, dass Sie ein HTML-Formular erstellen. Das obligatorische action-Attribut spezifiziert die URL zum Server-Script (Sie fügt den Dateinamen hinzu), das das Formular nach seiner Übertragung bearbeiten wird. Es ist sehr wichtig, dass das mit dem Namen eingegebene Script auf dem Web-Server an der von der URL definierten Stelle auch vorhanden ist.
Bevor Sie Ihr Formular ins Web bringen, sollten Sie Ihren ISP kontaktieren und sich erkundigen, ob Sie dessen Scripts verwenden können oder Ihre eigenen Scripts hinzufügen können.
Sie müssen auch die URL festlegen, die auf die Verzeichnisse verweisen, in denen die Scripts auf dem Server vorhanden sind. Einige ISPs führen aus Sicherheitsgründen sehr strenge Kontrollen durch und werden Ihnen das Erstellen oder Hinzufügen von Scripts auf Ihrem Server nicht gestatten. Wenn dies der Fall ist, Sie aber unbedingt Formulare auf Ihrer Webseite benötigen, rate ich Ihnen, sich an einen anderen ISP zu wenden.
Das nächste Attribut ist method, das eines von zwei möglichen Werten akzeptiert: post oder get. Diese Werte bestimmen, wie Formulardaten zu Ihrem Web-Server übertragen werden. Wenn Sie post wählen, werden die Formulardaten im Rumpf des Formulars eingefügt und zum Web-Server gesendet. Wenn Sie get verwenden, dann werden die Daten zur im action-Attribut spezifizierten URL als URL-Parameter gesendet. get wird oft bei Suchformulare verwendet.
Fügen Sie nun Formularfelder und Informationen hinzu, um Ihrem Besucher das Ausfüllen der Formulare zu erleichtern. Beginnen Sie mit dem Hinzufügen – innerhalb des <form>-Elements – einer informativen Beschreibung der vom Besucher erwarteten Daten, und fügen Sie anschließend ein text-Formularelement hinzu. Der Benutzer muss dann nämlich seinen Namen im Texteingabefeld eintippen. Machen Sie sich jetzt über das Positionieren noch keine Gedanken, denn später werden Sie alle Formularelemente in eine Tabelle eingeben.
<form action="https://www.html-lernen-copy.html-lernen.info/cgi-bin/entrance.cgi" method="post">
Your name:
<input type="text" name="username" />
</form>
Fügen Sie einen Informationstext und ein Passwort-Element hinzu.
<form action="https://www.html-lernen-copy.html-lernen.info/cgi-bin/entrance.cgi" method="post">
Your name:
<input type="text" name="username" />
Your password:
<input type="password" name="userpassword" />
</form>
Beachten Sie, dass beide Formular-Elemente Input-Elemente sind. Das type-Attribut definiert, welcher Elementtyp erstellt wird. In diesem Fall haben Sie ein Passwort- und ein Text-Element. Jedes Formularfeld sieht unterschiedlich aus, wenn es im Web-Browser angezeigt wird (wie zum Beispiel ein Texteingabefeld, Schaltfläche oder Checkbox), akzeptiert unterschiedliche Benutzereingaben (wie Texteingabe oder Mausklicken) und stellt gleichzeitig mehrere Optionen zur Verfügung. Jedes Formularfeld erhält außerdem einen Namen, der das Formularfeld und seine Daten von anderen Formularfeldern unterscheidet. Sie können den Namen frei wählen, solange dieser Name nur einmal vorkommt (Normalerweise müssen Formularfeld-Namen alle unterschiedlich sein; es gibt jedoch Ausnahmen, die etwas später erklärt werden).
Fügen Sie schließlich eine submit-Schaltfläche hinzu, damit der Benutzer die im Formular eingegebene Information senden kann. Fügen Sie eine reset-Schaltfläche ein, um dem Benutzer die Möglichkeit zu geben, die Eingaben zu löschen, falls er einen Fehler gemacht hat oder neu anfangen will.
<form action="https://www.html-lernen-copy.html-lernen.info/cgi-bin/entrance.cgi" method="post">
Your name:
<input type="text" name="username" />
Your password:
<input type="password" name="userpassword" />
<input type="submit" value="enter" />
<input type="reset" value="oops!" />
</form>
Die Submit-und Reset-Schaltflächen sind ein anderer Type des <input>-Elements. Beachten Sie, dass ich mit jedem der beiden ein value-Attribut verbunden habe. In diesem Fall ändert das value-Attribut den in der Schaltfläche und im Web-Browser angezeigten Text. Sie müssen das value-Attribut nicht unbedingt mit diesen Schaltflächen verwenden. Wenn dies der Fall ist, so zeigt der Web-Browser einen Standardtext für diese beiden Schaltflächen an.
Wenn Sie Formularfeldern einen Namen geben und Schaltflächen beschriften, sollten Sie vor allem auf Klarheit und Sinn achten.
Wenn die Arbeit mit einem Formular frustrierend und schwierig ist, wird derjenige, von dem sie ja eine Information erwarten, schnell die Flucht ergreifen und Ihre Web-Site für immer und ewig verlassen!
Sie haben jetzt also das Erstellen eines Formulars gelernt. Es könnte also losgehen! Wenn Sie das Formular jetzt in Ihren Web-Browser laden, werden Sie merken, dass es alles andere als repräsentativ ist. Es ist an der Zeit, ein paar Grafik-Elemente hinzuzufügen um Ihrer Seite ein flotteres Aussehen zu verleihen, und die Elemente des Formulars in eine schöne, saubere Tabelle zu ordnen.
Ich habe drei Grafiken für den Seitenkopf erstellt und eine Tabelle verwendet, um diese zu ordnen.
<table border="0">
<tr>
<td><img src="user_female_64.png" width="64" height="64" /></td>
<td align="center"><img src="user_male_64.png" width="64" height="64" /></td>
</tr>
</table>
Erstellen Sie als Nächstes eine weitere Tabelle, die aus vier Querspalten und zwei Längsspalten besteht. Geben Sie nun <form> in die Tabelle ein, um alle Elemente zu platzieren.
<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>
Fügen Sie nun die Formularelemente hinzu: Geben Sie das einleitende <form>-Element nach dem einleitenden <table>-Tag ein. Fügen Sie die Formularfelder in die Zeilen und Spalten Ihrer Tabelle, wie ich es bereits gezeigt habe, ein, und vergessen Sie nicht das abschließende <form>-Tag.
Beachten Sie, dass ich die dritte Querspalte der Tabelle freigelassen habe – Sie sehen, ich schummele ein bisschen! Nachdem ich den Quellcode für dieses Beispiel fertiggestellt hatte, wollte ich etwas Platz zwischen dem Password-Feld und den Schaltflächen schaffen. Nach einigen Versuchen richtete ich die Texteingabenaufforderungen ebenfalls nach rechts aus, erstellte Tabellenspalten, die 50% der Gesamtbreite der Tabelle einnahmen und zentrierte die Schaltflächen in den entsprechenden Spalten.
<table border="0">
<form action="https://www.html-lernen-copy.html-lernen.info/cgi-bin/entrance.cgi" method="post">
<tr>
<td align="right" width="50%">Your name:</td>
<td width="50%">
<input type="text" name="username" />
</td>
</tr>
<tr>
<td align="right">Your password:</td>
<td>
<input type="password" name="userpassword" />
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td align="center">
<input type="submit" value="enter" />
</td>
<td align="center">
<input type="reset" value="oops!" />
</td>
</tr>
</form>
</table>
Dies sieht so aus, als könnte es funktionieren; Stellen Sie nun die einzelnen Code-Teile zusammen. Hierzu noch einige wichtige abschließende Anmerkungen: Um die Tabelle auf der Seite zu zentrieren, schloss ich diese in ein <div>-Tag ein und wies dem align-Attribut den Wert center zu. Achten Sie darauf, wo die einleitenden und abschließenden <div>-Tags auf der Seite platziert sind. Um zusätzlichen Freiraum zwischen den Grafiken und dem Formular zu schaffen, fügte ich mit dem <br />-Tag einen Zeilenumbruch ein.
<!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">
<table border="0">
<tr>
<td><img src="user_female_64.png" width="64" height="64" /></td>
<td align="center"><img src="user_male_64.png" width="64" height="64" /></td>
</tr>
</table>
<br />
<table border="0">
<form action="https://www.html-lernen-copy.html-lernen.info/cgi-bin/entrance.cgi" method="post">
<tr>
<td align="right" width="50%">Your name:</td>
<td width="50%">
<input type="text" name="username" />
</td>
</tr>
<tr>
<td align="right">Your password:</td>
<td>
<input type="password" name="userpassword" />
</td>
</tr>
<tr>
<td></td>
<!-- comment: left blank to add space -->
<td></td>
<!-- comment: left blank to add space -->
</tr>
<tr>
<td align="center">
<input type="submit" value="enter" />
</td>
<td align="center">
<input type="reset" value="oops!" />
</td>
</tr>
</form>
</table>
</div>
</body>
</html>
Dies bedeutet zwar einen größeren Arbeitsaufwand, aber ich denke, das Ergebnis, das in Abbildung gezeigt wird, lässt sich sehen.
Um die Übung zu vervollständigen, habe ich das Formular daraufhin getestet, ob es die von mir verlangten Daten wieder zurückgibt. Die übertragenen Daten sehen folgendermaßen aus:
username=Elmer&userpassword=hunter
Es ist zwar etwas mickrig, aber Sie können erkennen, dass jedes Formularelement die Daten aufweist, die ich im Formular eingegeben hatte. Mit Hilfe von Scripts können Sie diese Daten auf einfache Weise sowohl vor dem Versenden als auch danach prüfen und weiterverarbeiten.
Die wichtigsten Elemente eines Formulars
Nach dieser ersten Übung sollten Sie schon einige wichtige Dinge mit auf den Weg nehmen: wie das <form>-Element verwendet wird, wie einfache Formularfelder hinzugefügt werden, und wie die Submit – und Reset-Schaltflächen verwendet werden. In diesem Teil der Lektion wird auf diesen Kenntnissen aufgebaut, um sie dann zu vertiefen. Wir werden über zwei Hauptbereiche sprechen: das <form>-Element und die Formularfelder, die über das <input>-Element erstellt werden. Danach werden Sie eine etwas kompliziertere Übung meistern.