Formulare in HTML

Inhalt Teil 1 Seite 1 Titelseite Seite 2 Inhaltsverzeichnis Teil 1 Formulare definieren Seite 6 Eingabefelder Seite 7 Ein einzeiliges Eingabefeld Seite 8 Dateien mit einem Formular verschicken Seite 9 Radiobuttons Seite 10

Inhalt Teil 2 Seite 11 Checkbuttons Seite 12 Seite 13 Ausführungsbuttons Seite 14 Manuelle Beschriftung der Buttons Seite 15 Grafische Absendebuttons Seite 16 Anklickbare Buttons Seite 17 Seite 18 Mehrzeilige Eingabefelder Seite 19 Auswahllisten Seite 20 Auswahlliste

Inhalt Teil 3 Seite 21 Auswahllisten Seite 22 Seite 23 Menüstrukturen Label von Formularelementen Seite 25 Seite 26 Elementgruppen Seite 27 Seite 28 Übertragung von Formularen Seite 29 Seite 30 CSS für Formulare

Formulare definieren Ein Formular wird mit dem <form>-Tag eingeleitet und durch </form> wieder Geschlossen. Zu den Attributen welche in diesen Tags verwendet werden gehören action=„“ und method=„“. Mit „action“ verweist man auf ein Programm oder Script welche die eingetragenen Daten verarbeiten soll. z.B.: <form action=„mailto:will-olt@web.de“ method=„post“> Inhalt

Eingabefelder z.B: <input type=„password“> Es gibt verschiedene Eingabefelder die alle mit dem <input>-Tag erstellt werden. Die einzelnen Typen werden mit dem Attribut type=„“ genauer bestimmt. Es gibt insgesamt 10 verschiedene Typen. text, password, checkbox, radio, submit, reset, file, hidden, image und button z.B: <input type=„password“> Inhalt

Ein Einzeiliges Eingabefeld <form action=„mailto:x@y.de“ method=„post“> Benutzername: <input name=„nickname“ size=„15“ maxlength=„60“ value=„LeChuck“> <br> Passwort: <input name=„pw“ type=„password“ size=„15“ maxlength=„60“> </form> Inhalt

Dateien mit einem Formular verschicken <form enctype=„multipart/form-data“> <input type=„file“> <input type=„file“ size=„30“ name=„Datei“> </form> datei.html Inhalt

Radiobuttons Definition: <input type=„radio“ > Bei einem Radiobutten Button ist es besonders wichtig ihm einen Namen zuzuweisen, da alle Radiobuttons mit dem selben Namen einer Gruppe angehören von der nur ein einziger ausgewählt werden kann. Inhalt

Radiobuttons <form action=„“ method=„“> Wählen Sie ihr Urlaubsziel: <br> <input type=„radio“ name=„ziel“ value=„Malle“> Mallorca <input type=„radio“ name=„ziel“ value=„Ibiza“> Ibiza <input type=„radio“ name=„ziel“ value=„Paris“> Paris </form> radio.html Inhalt

Checkbuttons Definition: <input type=„checkbox“> Auch bei einer Checkbox sollte ein einheitlicher Name für die Gruppe definiert werden. <form action="" method=""> Wählen Sie ihre Urlaubsziele: <br> <input type="checkbox" name="ziel" value="Malle"> Mallorca <input type="checkbox" name="ziel" value="Ibiza"> Ibiza <input type="checkbox" name="ziel" value="Paris"> Paris </form> checkbox.html Inhalt

Checkbuttons Schon im Quelltext können einzelne Checkbuttons Im Voraus aktiviert werden: <form action="" method=""> Wählen Sie ihre Urlaubsziele: <br> <input type="checkbox" name="ziel" value="Malle" checked> Mallorca <input type="checkbox" name="ziel" value="Ibiza" checked> Ibiza <input type="checkbox" name="ziel" value="Paris"> Paris </form> checkbox2.html Inhalt

Ausführungsbuttons Es gibt 2 verschiedene ausführungsbuttons: <input type=„submit“> <input type=„restet“> submit_reset.html Die Buttons können auch manuel beschriftet Werden. Dazu muss das Attribut value=„Beschriftung“ hinzugefügt Inhalt

Manuelle Beschriftung der Buttons <form action="" method=""> <input type="text" size="20"> <br><br> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </form> submit_reset_man.html Inhalt

Grafische Absendebuttons Definition: <input type=„image“> <form action=„“ method=„“> <input type=„image“ src=„send.png“> </form> image.html Inhalt

Anklickbare Buttons Definition: <input type=„button“> klick.html Mit dem Attribut value=„…“ lässt sich der Button beschriften. z.B: <input type=„button“ value=„Klick“> Wenn ein Button mit Namen (name=„“) gekennzeichnet worden ist, kann er über JavaScript angesprochen werden. klick.html Inhalt

Anklickbare Buttons Es gibt auch eine neuere Variante von Buttons, die allerdings nicht von älteren Browsern erkannt wird: <button>Beschriftung</button> button.html Inhalt

Mehrzeilige Eingabefelder Definition: <textarea></textarea> Bei einer „textarea“ können Breite und Höhe angegeben werden: <textarea rows=„5“ cols=„20“> Ihre Meinung… </textarea> mehrzeiler.html Inhalt

Auswahllisten Definition: <seltect> … </select> Zwischen diesen beiden Tags werden die einzelnen Optionen mit <option> „…Option…“</option> definiert. Beispiel: auswahlliste.html Inhalt

Quelltext vum Beispiel: Auswahllisten Quelltext vum Beispiel: <form action="" method=""> <select> <option>Auswahl Nr. 1</option> <option>Auswahl Nr. 2</option> <option>Auswahl Nr. 3</option> </select> </form> Inhalt

<select name=„…Name…“> Auswahllisten Mit dem Attribut size=„2“ lässt sich die Höhe des angezeigten Bereiches verändern. <select size=„2“> … </select> auswahlliste_size.html Jede Option in einer Auswahlliste braucht einen Wert, der beim senden des Formulares übermittelt wird. <option value=„Listeneintrag_01“> … </select> Auch der Tag <select> muss benannt werden um den Wert von <option> einer Liste zuweisen zu können <select name=„…Name…“> Inhalt

Auswahllisten Wenn man das Attribut multiple in den <select>-Tag einbindet können auch mehrere Optionen ausgewählt werden indem man die „Strg“-Taste gedrückt hält. Möchte man eine Option im Voraus auswählen, so fügt man im entsprechenden <option>-Tag das Attribut selected hinzu. Inhalt

Menüstrukturen Es ist möglich in einer Auswahlliste die einzelnen Optionen zu gliedern. Hierzu verwendet man <optgroup> <select> <optgroup label="1. Gliederrung"> <option>Auswahl Nr. 1</option> <option>Auswahl Nr. 2</option> <option>Auswahl Nr. 3</option> </optgroup> <optgroup label="2. Gliederrung"> <option>Auswahl Nr. 4</option> <option>Auswahl Nr. 5</option> <option>Auswahl Nr. 6</option> </select> optgroup.html Inhalt

Label von Formularelementen Mit <label>…</label> lassen sich beschreibende Texte und Formularelemente miteinander verbinden, so dass beide beim Senden des Formulars übermittelt werden. Dazu wird zunächst im einleitenden <label> das Attribut for=„“ gesetzt. In den Anführungszeichen muss der selbe Wert stehen, der im zu verknüfenden Formularelement als id=„“ gespeichert wird. Inhalt

Label von Formularelementen Beispiel: <label for„ihr_name">Ihr Name:</label> <input id=„ihr_name" size="20"> Inhalt

Elementgruppen Ein Formular kann auch in einzelne Elementgruppen unterteilt werden. elementgruppen.html Hierzu muss jede Gruppe von <fieldset> und </fieldset> eingeschlossen werden. Zwischen <legend> und </legend> kann man eine Überschrift für diese Gruppe schreiben. Inhalt

Elementgruppen Inhalt <form action="" method=""> <fieldset> <legend><font color="FFFFFF">Wer bin ich?</font></legend> <table> <tr> <td width="200">Vorname, Name:</td> <td><input size="30" maxlength="50"></td> </tr> <td width="200">E-Mail-Adresse:</td> </table> </fieldset> <br> <legend><font color="FFFFFF">Was will ich</font></legend> <input type="checkbox" name="Bestellung" value="Pizza">Pizza <input type="checkbox" name="Bestellung" value="Gyros">Gyros <input type="checkbox" name="Bestellung" value="Chop">Chop Suey <input type="checkbox" name="Bestellung" value="Eisbein">Eisbein <legend><font color="FFFFFF">Bestellung</font></legend> <input type="submit" value="Absenden"> <input type="reset" value="Abbrechen"> </fieldset> </form> Inhalt

Übertragung von Formularen Formulare werden meistens per e-Mail übermittelt. Dazu muss man im <form>-Tag beim Attribut action=„“ zwischen den Anführungszeichen den Befehl mailto:xxx@web.de schreiben. Ich habe ein Beispieldokument angefertigt um gleich zu zeigen wie die übermittelten Eingaben angezeigt werden. form2.html Inhalt

Übertragung von Formularen Die übermittelten Daten des gerade gesehenen Formulars würden in etwa so aussehen: Interessent_Name=Wilfried Olthoff Interessent_Telefon=05941-8486 Interessent_Straße=Eschweg 23 Interessent_Ort=Hardingen Interesse_An=Eule Inhalt

CSS für Formulare Auch Formularelemente lassen sich durch Style Sheets verändern. Beispiel: <input size=„15“ value=„Vorname“ style=„color:white;backgroung-color:darkblue“> css.html Inhalt