Formulare in HTML.

Präsentation zum Thema: "Formulare in HTML."—  Präsentation transkript:

1 Formulare in HTML

2 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

3 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

4 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

5 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 method=„post“> Inhalt

6 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

7 Ein Einzeiliges Eingabefeld
<form 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

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

9 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

10 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

11 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

12 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

13 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

14 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

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

16 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

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

18 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

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

20 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

21 <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

22 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

23 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

24 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

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

26 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

27 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"> -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

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

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

30 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