Formulare in HTML. Inhalt Teil 1 Seite 1 Seite 1 Titelseite Seite 2 Seite 2 Inhaltsverzeichnis Teil...

Formulare in HTMLFormulare in HTML

Inhalt Teil 1Inhalt Teil 1

Seite 1Seite 1 TitelseiteTitelseite

Seite 2Seite 2 Inhaltsverzeichnis Teil 1Inhaltsverzeichnis Teil 1



Seite 5Seite 5 Formulare definierenFormulare definieren

Seite 6Seite 6 EingabefelderEingabefelder

Seite 7Seite 7 Ein einzeiliges EingabefeldEin einzeiliges Eingabefeld

Seite 8Seite 8 Dateien mit einem Formular Dateien mit einem Formular verschickenverschicken

Seite 9Seite 9 RadiobuttonsRadiobuttons

Seite 10Seite 10 RadiobuttonsRadiobuttons


Seite 11Seite 11 CheckbuttonsCheckbuttons

Seite 12Seite 12 CheckbuttonsCheckbuttons

Seite 13Seite 13 AusführungsbuttonsAusführungsbuttons

Seite 14Seite 14 Manuelle Beschriftung der ButtonsManuelle Beschriftung der Buttons

Seite 15Seite 15 Grafische AbsendebuttonsGrafische Absendebuttons

Seite 16Seite 16 Anklickbare ButtonsAnklickbare Buttons

Seite 17Seite 17 Anklickbare ButtonsAnklickbare Buttons

Seite 18Seite 18 Mehrzeilige EingabefelderMehrzeilige Eingabefelder

Seite 19Seite 19 AuswahllistenAuswahllisten

Seite 20Seite 20 AuswahllisteAuswahlliste




Seite 23Seite 23 MenüstrukturenMenüstrukturen

Seite 24Seite 24 Label von FormularelementenLabel von Formularelementen

Seite 25Seite 25 Label von FormularelementenLabel von Formularelementen

Seite 26Seite 26 ElementgruppenElementgruppen

Seite 27Seite 27 ElementgruppenElementgruppen

Seite 28Seite 28 Übertragung von FormularenÜbertragung von Formularen

Seite 29Seite 29 Übertragung von FormularenÜbertragung von Formularen

Seite 30Seite 30 CSS für FormulareCSS für Formulare

Formulare definierenFormulare definieren

Ein Formular wird mit dem Ein Formular wird mit dem <form><form>-Tag-Tag

eingeleitet und durch eingeleitet und durch </form></form> wieder wieder

Geschlossen. Zu den Attributen welche inGeschlossen. Zu den Attributen welche in

diesen Tags verwendet werden gehörendiesen Tags verwendet werden gehören

action=„“action=„“ und und method=„“method=„“. Mit „. Mit „actionaction“ “ verweistverweist

man auf ein Programm oder Script welcheman auf ein Programm oder Script welche

die eingetragenen Daten verarbeiten soll.die eingetragenen Daten verarbeiten soll.

z.B.: z.B.: <form action=„mailto:[email protected]“ <form action=„mailto:[email protected]“

method=„post“>method=„post“>Inhalt

EingabefelderEingabefelder

Es gibt verschiedene Eingabefelder die alleEs gibt verschiedene Eingabefelder die alle

mit dem mit dem <input><input>-Tag erstellt werden. Die-Tag erstellt werden. Die

einzelnen Typen werden mit dem Attributeinzelnen Typen werden mit dem Attribut

type=„“ type=„“ genauer bestimmt. Es gibtgenauer bestimmt. Es gibt

insgesamt 10 verschiedene Typen.insgesamt 10 verschiedene Typen.

text, password, checkbox, radio, submit,text, password, checkbox, radio, submit,

reset, file, hidden, image und button reset, file, hidden, image und button

z.B: z.B: <input <input type=„password“> type=„password“>

Inhalt

Ein Einzeiliges Ein Einzeiliges EingabefeldEingabefeld

<form action=„mailto:[email protected]“ <form action=„mailto:[email protected]“ method=„post“>method=„post“>

Benutzername:Benutzername: <input name=„nickname“ <input name=„nickname“ size=„15“ maxlength=„60“ size=„15“ maxlength=„60“ value=„LeChuck“>value=„LeChuck“>

<br><br>

Passwort: <input name=„pw“ Passwort: <input name=„pw“ type=„password“ size=„15“ type=„password“ size=„15“ maxlength=„60“>maxlength=„60“>

</form></form>Inhalt

Dateien mit einem Dateien mit einem Formular verschickenFormular verschicken

<form enctype=„multipart/form-data“><form enctype=„multipart/form-data“>

<input type=„file“><input type=„file“>

<input type=„file“ size=„30“ <input type=„file“ size=„30“ name=„Datei“>name=„Datei“>

</form></form>

datei.htmldatei.html

Inhalt

RadiobuttonsRadiobuttons

Definition: Definition: <input <input type=„radio“ type=„radio“ >>

Bei einem Radiobutten Button ist es Bei einem Radiobutten Button ist es besondersbesonders

wichtig ihm einen Namen zuzuweisen, da wichtig ihm einen Namen zuzuweisen, da allealle

Radiobuttons mit dem selben Namen einerRadiobuttons mit dem selben Namen einer

Gruppe angehören von der nur ein einzigerGruppe angehören von der nur ein einziger

ausgewählt werden kann.ausgewählt werden kann.

Inhalt

RadiobuttonsRadiobuttons

<form action=„“ method=„“><form action=„“ method=„“>Wählen Sie ihr Urlaubsziel: <br>Wählen Sie ihr Urlaubsziel: <br><input type=„radio“ <input type=„radio“ name=„ziel“name=„ziel“

value=„Malle“> Mallorcavalue=„Malle“> Mallorca<input type=„radio“ <input type=„radio“ name=„ziel“name=„ziel“

value=„Ibiza“> Ibizavalue=„Ibiza“> Ibiza<input type=„radio“ <input type=„radio“ name=„ziel“name=„ziel“

value=„Paris“> Parisvalue=„Paris“> Paris</form></form>

radio.htmlradio.htmlInhalt

CheckbuttonsCheckbuttons

Definition: Definition: <input <input type=„checkbox“type=„checkbox“>>

Auch bei einer Checkbox sollte ein einheitlicherAuch bei einer Checkbox sollte ein einheitlicherName für die Gruppe definiert werden.Name für die Gruppe definiert werden.

<form action="" method=""><form action="" method="">Wählen Sie ihre Urlaubsziele: <br>Wählen Sie ihre Urlaubsziele: <br><input type="checkbox" name="ziel" value="Malle"> <input type="checkbox" name="ziel" value="Malle">

MallorcaMallorca<input type="checkbox" name="ziel" value="Ibiza"> Ibiza<input type="checkbox" name="ziel" value="Ibiza"> Ibiza<input type="checkbox" name="ziel" value="Paris"> <input type="checkbox" name="ziel" value="Paris">

ParisParis</form></form>

checkbox.htmlcheckbox.htmlInhalt

CheckbuttonsCheckbuttons

Schon im Quelltext können einzelne Schon im Quelltext können einzelne CheckbuttonsCheckbuttons

Im Voraus aktiviert werden:Im Voraus aktiviert werden:

<form action="" method=""><form action="" method="">Wählen Sie ihre Urlaubsziele: <br>Wählen Sie ihre Urlaubsziele: <br><input type="checkbox" name="ziel" value="Malle" <input type="checkbox" name="ziel" value="Malle"

checked> Mallorcachecked> Mallorca<input type="checkbox" name="ziel" value="Ibiza" <input type="checkbox" name="ziel" value="Ibiza"

checked> Ibizachecked> Ibiza<input type="checkbox" name="ziel" value="Paris"> <input type="checkbox" name="ziel" value="Paris">

ParisParis</form></form>

checkbox2.htmlcheckbox2.htmlInhalt

AusführungsbuttonsAusführungsbuttons

Es gibt 2 verschiedene ausführungsbuttons:Es gibt 2 verschiedene ausführungsbuttons:

<input <input type=„submit“type=„submit“>>

<input <input type=„restet“type=„restet“>>

submit_reset.htmlsubmit_reset.html

Die Buttons können auch manuel beschriftetDie Buttons können auch manuel beschriftet

Werden. Dazu muss das AttributWerden. Dazu muss das Attribut

value=„Beschriftung“ value=„Beschriftung“ hinzugefügt hinzugefügt

Inhalt

Manuelle Beschriftung der Manuelle Beschriftung der ButtonsButtons

<form action="" method=""><form action="" method="">

<input type="text" size="20"><input type="text" size="20"><br><br><br><br>

<input type="submit" value="Submit"><input type="submit" value="Submit">

<input type="reset" value="Reset"><input type="reset" value="Reset">

</form></form>

submit_reset_man.htmlsubmit_reset_man.html

Inhalt

Grafische Grafische AbsendebuttonsAbsendebuttons

Definition: Definition: <input <input type=„image“type=„image“>>

<form action=„“ method=„“><form action=„“ method=„“>

<input type=„image“ src=„send.png“><input type=„image“ src=„send.png“>

</form></form>

image.htmlimage.html

Inhalt

Anklickbare ButtonsAnklickbare Buttons

Definition: Definition: <input <input type=„button“type=„button“>>

Mit dem Attribut Mit dem Attribut value=„…“value=„…“ lässt sich der Button lässt sich der Button beschriften. beschriften.

z.B: z.B: <input type=„button“ value=„<input type=„button“ value=„KlickKlick“>“>

Wenn ein Button mit Namen (name=„“) gekennzeichnetWenn ein Button mit Namen (name=„“) gekennzeichnet

worden ist, kann er über JavaScript angesprochen werden.worden ist, kann er über JavaScript angesprochen werden.

klick.htmlklick.html

Inhalt

Anklickbare ButtonsAnklickbare Buttons

Es gibt auch eine neuere Variante von Es gibt auch eine neuere Variante von Buttons,Buttons,

die allerdings nicht von älteren Browsern die allerdings nicht von älteren Browsern erkannterkannt

wird:wird:

<button><button>BeschriftungBeschriftung</button></button>

button.htmlbutton.html

Inhalt

Mehrzeilige Mehrzeilige EingabefelderEingabefelder

Definition: Definition: <textarea></textarea><textarea></textarea>

Bei einer „textarea“ können Breite und Bei einer „textarea“ können Breite und HöheHöhe

angegeben werden:angegeben werden:

<textarea <textarea rows=„5“rows=„5“ cols=„20“cols=„20“>>

Ihre Meinung…Ihre Meinung…

</textarea></textarea>

mehrzeiler.htmlmehrzeiler.html

Inhalt

AuswahllistenAuswahllisten

Definition:Definition: <seltect> <seltect> …… </select> </select>

Zwischen diesen beiden Tags werden dieZwischen diesen beiden Tags werden die

einzelnen Optionen mit einzelnen Optionen mit

<option> <option> „…Option…“„…Option…“</option> </option> definiert.definiert.

Beispiel:Beispiel:

auswahlliste.htmlauswahlliste.html

Inhalt


Quelltext vum Beispiel:Quelltext vum Beispiel:

<form action="" method=""><form action="" method="">

<select><select>

<option>Auswahl Nr. 1</option><option>Auswahl Nr. 1</option>



</select></select>

</form></form>

Inhalt


Mit dem Attribut Mit dem Attribut size=„2“size=„2“ lässt sich die Höhe des lässt sich die Höhe des

angezeigten Bereiches verändern.angezeigten Bereiches verändern.

<select <select size=„2“>size=„2“> … </select> … </select>

auswahlliste_size.htmlauswahlliste_size.html

Jede Option in einer Auswahlliste braucht einenJede Option in einer Auswahlliste braucht einen

Wert, der beim senden des FormularesWert, der beim senden des Formulares

übermittelt wird.übermittelt wird.

<option value=„Listeneintrag_01“> … </select><option value=„Listeneintrag_01“> … </select>

Auch der Tag Auch der Tag <select><select> muss benannt werden um muss benannt werden um denden

Wert von Wert von <option><option> einer Liste zuweisen zu können einer Liste zuweisen zu können

<select name=„…Name…“><select name=„…Name…“>Inhalt


Wenn man das Attribut Wenn man das Attribut multiple multiple in den in den

<select><select>-Tag einbindet können auch mehrere-Tag einbindet können auch mehrere

Optionen ausgewählt werden indem man dieOptionen ausgewählt werden indem man die

„„Strg“-Taste gedrückt hält.Strg“-Taste gedrückt hält.

Möchte man eine Option im Voraus auswählen, Möchte man eine Option im Voraus auswählen, soso

fügt man im entsprechenden fügt man im entsprechenden <option><option>-Tag das-Tag das

Attribut Attribut selectedselected hinzu. hinzu.

Inhalt

MenüstrukturenMenüstrukturen

Es ist möglich in einer Auswahlliste die einzelnen Es ist möglich in einer Auswahlliste die einzelnen OptionenOptionen

zu gliedern. Hierzu verwendet man zu gliedern. Hierzu verwendet man <optgroup><optgroup>

<select><select><optgroup label="1. Gliederrung"><optgroup label="1. Gliederrung">

<option>Auswahl Nr. 1</option><option>Auswahl Nr. 1</option><option>Auswahl Nr. 2</option><option>Auswahl Nr. 2</option><option>Auswahl Nr. 3</option><option>Auswahl Nr. 3</option>

</optgroup></optgroup><optgroup label="2. Gliederrung"><optgroup label="2. Gliederrung">

<option>Auswahl Nr. 4</option><option>Auswahl Nr. 4</option><option>Auswahl Nr. 5</option><option>Auswahl Nr. 5</option><option>Auswahl Nr. 6</option><option>Auswahl Nr. 6</option>

</optgroup></optgroup></select></select>

optgroup.htmloptgroup.htmlInhalt

Label von Label von FormularelementenFormularelementen

Mit Mit <label>…</label> <label>…</label> lassen sich lassen sich beschreibendebeschreibende

Texte und Formularelemente miteinanderTexte und Formularelemente miteinanderverbinden, so dass beide beim Senden desverbinden, so dass beide beim Senden desFormulars übermittelt werden. Formulars übermittelt werden. Dazu wird zunächst im einleitenden Dazu wird zunächst im einleitenden <label><label> das dasAttribut Attribut for=„“for=„“ gesetzt. In den gesetzt. In den

AnführungszeichenAnführungszeichenmuss der selbe Wert stehen, der im zumuss der selbe Wert stehen, der im zuverknüfenden Formularelement als verknüfenden Formularelement als id=„“id=„“gespeichert wird.gespeichert wird.

Inhalt

Label von Label von FormularelementenFormularelementen

Beispiel:Beispiel:

<label for„ihr_name">Ihr Name:</label><label for„ihr_name">Ihr Name:</label>

<input id=„ihr_name" size="20"><input id=„ihr_name" size="20">

Inhalt

ElementgruppenElementgruppen

Ein Formular kann auch in einzelneEin Formular kann auch in einzelne

Elementgruppen unterteilt werden.Elementgruppen unterteilt werden.

elementgruppen.htmlelementgruppen.html

Hierzu muss jede Gruppe von Hierzu muss jede Gruppe von

<fieldset> <fieldset> undund </fieldset> </fieldset> eingeschlossen eingeschlossen werden. werden.

Zwischen <legend> und </legend> kann man Zwischen <legend> und </legend> kann man eineeine

Überschrift für diese Gruppe schreiben.Überschrift für diese Gruppe schreiben.

Inhalt

ElementgruppenElementgruppen<form action="" method=""><form action="" method=""><fieldset><fieldset><legend><font color="FFFFFF">Wer bin ich?</font></legend><legend><font color="FFFFFF">Wer bin ich?</font></legend><table><table>

<tr><tr> <td width="200">Vorname, Name:</td><td width="200">Vorname, Name:</td>

<td><input size="30" maxlength="50"></td><td><input size="30" maxlength="50"></td> </tr></tr> <tr><tr> <td width="200">E-Mail-Adresse:</td><td width="200">E-Mail-Adresse:</td> <td><input size="30" maxlength="50"></td><td><input size="30" maxlength="50"></td> </tr></tr></table></table></fieldset></fieldset> <br> <br><fieldset><fieldset><legend><font color="FFFFFF">Was will ich</font></legend><legend><font color="FFFFFF">Was will ich</font></legend>

<input type="checkbox" name="Bestellung" value="Pizza">Pizza<input type="checkbox" name="Bestellung" value="Pizza">Pizza<input type="checkbox" name="Bestellung" value="Gyros">Gyros<input type="checkbox" name="Bestellung" value="Gyros">Gyros<input type="checkbox" name="Bestellung" value="Chop">Chop Suey<input type="checkbox" name="Bestellung" value="Chop">Chop Suey<input type="checkbox" name="Bestellung" value="Eisbein">Eisbein<input type="checkbox" name="Bestellung" value="Eisbein">Eisbein

</fieldset></fieldset> <br> <br><fieldset><fieldset><legend><font color="FFFFFF">Bestellung</font></legend><legend><font color="FFFFFF">Bestellung</font></legend><input type="submit" value="Absenden"><input type="submit" value="Absenden"><input type="reset" value="Abbrechen"><input type="reset" value="Abbrechen"></fieldset></fieldset></form></form>

Inhalt

Übertragung von Übertragung von FormularenFormularen

Formulare werden meistens per e-MailFormulare werden meistens per e-Mailübermittelt. Dazu muss man im übermittelt. Dazu muss man im <form><form>-Tag -Tag

beimbeimAttribut Attribut action=„“action=„“ zwischen den zwischen denAnführungszeichen den BefehlAnführungszeichen den Befehlmailto:[email protected]:[email protected] schreiben. schreiben.Ich habe ein Beispieldokument angefertigt umIch habe ein Beispieldokument angefertigt umgleich zu zeigen wie die übermittelten Eingabengleich zu zeigen wie die übermittelten Eingabenangezeigt werden.angezeigt werden.

form2.htmlform2.html

Inhalt

Übertragung von Übertragung von FormularenFormularen

Die übermittelten Daten des gerade Die übermittelten Daten des gerade gesehenengesehenen

Formulars würden in etwa so aussehen:Formulars würden in etwa so aussehen:

Interessent_Name=Wilfried OlthoffInteressent_Name=Wilfried Olthoff

Interessent_Telefon=05941-8486Interessent_Telefon=05941-8486

Interessent_Straße=Eschweg 23Interessent_Straße=Eschweg 23

Interessent_Ort=HardingenInteressent_Ort=Hardingen

Interesse_An=EuleInteresse_An=Eule

Inhalt

CSS für FormulareCSS für Formulare

Auch Formularelemente lassen sich durch Auch Formularelemente lassen sich durch

Style Sheets verändern.Style Sheets verändern.

Beispiel:Beispiel:

<input size=„15“ value=„Vorname“<input size=„15“ value=„Vorname“

style=„color:white;backgroung-style=„color:white;backgroung-color:darkblue“color:darkblue“>>

css.htmlcss.html

Inhalt

Formulare in HTML. Inhalt Teil 1 Seite 1 Seite 1 Titelseite Seite 2 Seite 2 Inhaltsverzeichnis Teil...

Documents

Transcript of Formulare in HTML. Inhalt Teil 1 Seite 1 Seite 1 Titelseite Seite 2 Seite 2 Inhaltsverzeichnis Teil...