20: HTML forms - the basics

Zusammengefasst nach dem Artikel von Jenifer Hanen
Quelle: http://dev.opera.com/articles/view/20-html-forms-the-basics/
20: HTML forms - the basics


Mit einem Formular im Internet ist ein Feld gemeint, in der man Informationen auf einer Webseite hineinschreiben kann. Entweder gibt man in ein Textfeld einen Text oder Nummern ein, markiert eine Checkbox, füllt einen Radio Button oder wählt etwas von einem Drop - Down Menü aus. Das ausgefüllte Formular wird dann mithilfe des Absenden - Buttons an die Webseite verschickt.


Der elementare Code

Das Formular fängt immer mit dem <form> Tag an, hört mit dem </form> Tag auf und dazwischen sind die restlichen Formularfelder. Die grundlegendsten Felder eines Formulars sind welche, in dem der User sein Feedback geben kann. Dazu braucht man einfach nur zwei <input> felder für die Daten des Users (Name, E-Mail) und eine <textarea> für das Kommentar.

Beispiel:
<form>
Name: <input type=“text“ name=“name“ id=“name“ value=““ />
Email: <input type=“text“ name=“email“ id=“email“ value=““ />
Comments: <textarea name=“comments“ id=“comments“ cols=“25“ rows=“3“></textarea>
<input type=“submit“ value=“submit“ />
</form>

Mit <input> definiert man einfach das Feld, in dem die Informationen hineingeschrieben werden können. Jeder <input> Tag muss eine „type“ Eigenschaft besitzen, um festzulegen, was hier erhalten wird: text, button,  checkbox, file, hidden, image, password, radio, reset or submit. Des weiteren muss braucht jeder <input> Tag einen Namen, der vom Programmierer entschieden wird. Am besten sollte es immer nach der Funktion des Feldes benannt werden, bsp.: name=“name“ or name=“email“. Des weiteren braucht jedes <input> Tag ein „value“ Eigenschaft. Wenn value auf blank gestellt wird - value=“„ - wird dem bearbeiteten Script gesagr, alles einzufügen, was der Besucher in das Feld hineinschreibt. Bei den anderen „type“ Eigenschaften kann beim value das eingegeben werden, was beim Formular als erstes angekreuzt, ausgewählt ect. sein soll.

Es gibt auch noch eine spezielle Art von <input> Elementen, nämlich die mit dem value=“submit“ Eigenschaft. Anstelle eines einzeiligen Textfeldes wird hier ein Button generiert. Beim value wird das eingegeben, was den Button definiert, Beispiel: value=“yes“ für yes, value=“submit“ für einen Senden Button, value=“reset“ für einen Rückgängig Button ect.

Nach den zwei <input> Elementen kommt ein <textarea> Element. Dieses Feld ist nicht mehr wie beim <input> Element nur eine Zeile sondern es stellt eine größere Box aus mehreren Zeilen zu verfügen, in der dann der Text hineingeschrieben werden kann. Um zu definieren, wieviele Zeilen bzw. Spalten eine textarea sein soll, braucht man die „cols“ und „rows“ Eigenschaft.


Struktur und Verhalten hinzufügen
 
Wenn jetzt auf den submit Button gedrückt werden würde, würde nichts passieren. Es fehlt nämlich noch die „action“ oder „method“ Eigenschaft. Die „method“ Eigenschaft definiert, wie die Daten an das Script gesendet wird, welche diese verarbeitet. Dafür gibt es zwei Möglichkeiten beim „method“: GET & POST. Die GET method sendet die Daten in die URL der Webseite. Es ist jedoch besser diese Variante nicht zu benützen, da es kein sicherer Weg ist, da jeder die Informationen sehen kann. Bei POST werden die Daten mithilfe des vom Formular benützten Script an eine E-Mail Adresse des Verwalters gesendet oder in einer Datenbank für die spätere Verwendung gespeichert.
Um wirkliche 100% Sicherheit der versendeten Daten zu gewährleisten, wie zum Beispiel bei einer Kreditkartennummer, sollte ein https Protokoll verwendet werden. Das bedeutet die Daten werden über ein https Protokoll und nicht über ein http Protokoll versendet, wo die Übertragen zwar etwas langsamer ist aber diese dafür verschlüsselt werden.
Die „action“ Eigenschaft definiert, zu welchem script file die Formular Daten zur Weiterverarbeitung gesendet werden sollen.

Nach dem absenden eines Formulars ist es auch immer von Vorteil, den User automatisch auf eine neue Seite weiterzusenden, zum Beispiel zu einer „Dankeschön“ Seite oder zurück zur Startseite.

Beispiel:
<input type=“hidden“ name=“redirect“ value=“http://www.opera.com“ />
Diese Zeile definiert im speziellen, dass der User nach dem absenden des Formulars auf die Startseite von Opera zurückgeschickt wird.

Um die Struktur eines Formulars zu verbessern, ist es möglich, diese in eine ungeordnete Liste zu setzen. Damit kann dem Formular übersichtlicher Aufbau gegeben werden und mithilfe des CSS das ganze noch gestylt werden. Natürlich kann die Struktur und das Aussehen auch mithilfe von einer Definition Liste oder gleich mithilfe des CSS die <input> <label> Tags bearbeitet werden. Das bleibt jedem selbst überlassen.
Als letztes sollte einem jedem Formularfeld ein label zugewiesen werden. Diese labels sind mit den  jeweiligen Formular Elementen dadurch verbunden, dass jedem input oder textarea Element eine id zugefügt wurde, mit demselben Wert wie die „for“ Eigenschaft des labels. Das ist besonders hilfreich, da es auch ganz offensichtlich darstellt, worum es bei diesem Formularfeld geht.
Beispiel:
<ul>
        <li>
            <label for=“name“>Name:</label>
            <input type=“text“ name=“name“ id=“name“ value=““ />
        </li>
</ul>


Hinzufügen von Semantik, style und mehr Struktur
 
Das <fieldset> Elements ermöglicht es, das Formular semantisch korrekt aufzubereiten. Es kann zum Beispiel für jeden größeren Abschnitt in einem Formular ein <fieldset> gesetzt werden, wei zum Beispiel für Informationen über die Adresse, Zahlungsarten, Kundenpreferenzen ect.
Das <legend> Element ermöglicht es dem <fieldset> einen Namen zuzuweisen.

<form id=“contact-form“ action=“script.php“ method=“post“>
  <fieldset>
    <legend>Contact Us:</legend>
    <ul>
      <li>
        <label for=“name“>Name:</label>
        <input type=“text“ name=“name“ id=“name“ value=““ />
      </li>
    </ul>
  </fieldset>
</form>