Die Webseite soll nun mit einem Formular verschönert werden. Dieser Artikel stellt die Formularelemente vor…
Formulare für die Webseite:
Mit dem form-Element werden im HTML Quelltext Formulare erstellt. Da HTML Formulare für Benutzereingaben so dringend gebraucht werden, macht es Sinn sich den Aufbau solcher Formulare genauer anzusehen.
Der Grundaufbau sieht so aus:
<form action=“Datei oder Pfad“ method=“post“>
Vorname: [Einzeiliges Eingabefeld]
<br />
<input type=“text“ name=“vorname“ size=“30″ maxlength=“30″>
<input type=“submit“ value=“Absenden“>
<input type=“reset“ value=“Reset“>
<br /><br />
</form>Noch grundsätzlicher schaut die Sache so aus:
<form>
Formular-Elemente und Beschriftung
</form>Das form-Element wird also geöffnet und bekommt noch einige Zusatzangaben mit auf den Weg (die hier teilweise noch fehlen). Innerhalb des form-Elementes werden dann die Beschriftungen und die einzelnen Formular-Elemente eingebaut.
Wenn alle Formular-Elemente verbaut sind wird das form-Element wieder geschlossen.
Der Grundaufbau ist also identisch zu allen anderen HTML-Elementen. Die Kunst der Formulargestaltung ist die optimale Anordnung der Formularelemente und von denen gibt es ganz schön viele…
Eingabefelder und Textarea:
Das einfachste Formularelement ist das Eingabefeld. Es gibt zwei Varianten davon. Einmal ein leeres Eingabefeld und eines mit Textvorbelegung.
<form action=“Dateipfad“ method=“post“ accept-charset=“utf-8″>
Vorname: [Einzeiliges Eingabefeld]
<br />
<input type=“text“ name=“vorname1″ size=“30″ maxlength=“30″>
<br /><br />
Vorname: [Einzeiliges Eingabefeld mit Textvorbelegung]
<br />
<input type=“text“ name=“vorname2″ size=“30″ maxlength=“30″ value=“Wert“>
</form>Dann gibt es noch ein Eingabefeld für Passwörter.
<form action=“Dateipfad“ method=“post“ accept-charset=“utf-8″>
Passwort: [Eingabefeld für Passwörter]
<br />
<input type=“password“ name=“passwort“ size=“12″ maxlength=“12″>
</form>Auch bei der Textarea, den Textfeldern gibt es verschiedene Varianten.
Der Aufbau bleibt aber wie erwähnt:
<form>
<textarea name=“user_eingabe“ cols=“50″ rows=“10″></textarea>
<textarea name=“user_eingabe“ cols=“50″ rows=“10″>Textvorbelegung</textarea>
<textarea name=“user_eingabe“ cols=“50″ rows=“10″ readonly>Textausgabe</textarea>
</form>Auswahllisten und Dropdowns:
Ohne viel Worte – hier der HTML Quelltext zu den Auswahllisten:
<form action=“Dateipfad“ method=“post“ accept-charset=“Zeichencodierung“>
Auswahlliste: [Dropdown]
<br />
<select name=“top5″ size=“1″>
<option>Person 1</option>
<option>Person 2</option>
<option>Person 3</option>
<option>Person 4</option>
<option>Person 5</option>
</select>
<br /><br />
Auswahlliste mit Mehrfachauswahl:
<br />
<select name=“chart2″ size=“5″ multiple=“multiple“>
<option>Mensch 1</option>
<option>Mensch 2</option>
<option>Mensch 3</option>
<option>Mensch 4</option>
<option>Mensch 5</option>
</select>
<br /><br />
Auswahlliste mit Mehrfachauswahl und Vorselektion:
<br />
<select name=“chart2″ size=“5″ multiple=“multiple“>
<option>Lebewesen 1</option>
<option selected=“selected“>Lebewesen 2</option>
<option>Lebewesen 3</option>
<option>Lebewesen 4</option>
<option>Lebewesen 5</option>
</select>
<br /><br />
Auswahlliste mit Absendewert:
<br />
<select name=“chart2″ size=“5″ multiple=“multiple“>
<option>Kreatur 1</option>
<option value=“Absendewert“>Kreatur 2</option>
<option>Kreatur 3</option>
<option>Kreatur 4</option>
<option>Kreatur 5</option>
</select>
<br /><br />
Verschachtelte Auswahlliste:
<br />
<select name=“Namen“ size=“6″>
<optgroup label=“Namen mit A“>
<option label=“Anna“>Anna</option>
<option label=“Achim“>Achim</option>
<option label=“Andreas“>Andreas</option>
</optgroup>
<optgroup label=“Namen mit B“>
<option label=“Berta“>Berta</option>
<option label=“Barbara“>Barbara</option>
<option label=“Bernd“>Bernd</option>
</optgroup>
<optgroup label=“Namen mit C“>
<option label=“Caesar“>Caesar</option>
<option label=“Christine“>Christine</option>
<option label=“Christian“>Christian</option>
</optgroup>
</select>
<br /><br />
</form>Radioknöpfe:
<form action=“Dateipfad“ method=“post“ accept-charset=“Zeichencodierung“>
Radio-Buttons:
<br />
<input type=“radio“ name=“Zahlmethode“ value=“Mastercard“> Mastercard<br>
<input type=“radio“ name=“Zahlmethode“ value=“Visa“> Visa<br>
<input type=“radio“ name=“Zahlmethode“ value=“AmericanExpress“> American Express
</form>Checkbox:
<form action=“Dateipfad“ method=“post“ accept-charset=“Zeichencodierung“>
Checkboxen:
<br />
<input type=“checkbox“ name=“zutat“ value=“salami“> Salami<br>
<input type=“checkbox“ name=“zutat“ value=“pilze“> Pilze<br>
<input type=“checkbox“ name=“zutat“ value=“sardellen“> Sardellen
</form>Upload-Formularfeld:
<form action=“Dateipfad“ method=“post“ accept-charset=“Zeichencodierung“>
Upload-Formularelement: [hier ohne enctype=“multipart/form-data“ im „form-Element“]
<br />
<input type=“file“ name=“Datei“ size=“50″ maxlength=“100000″ accept=“text/txt“>
<br /><br />
Versteckte Formularfelder: [Der Inhalt von „value“ wird versteckt übermittelt]
<br />
<input type=“hidden“ name=“hiddeninfo“ value=“Dieses Formular wurde von Webseite X verschickt. Der Inhalt von value wird
versteckt übermittelt.“>
</form>Absende-Button und Reset Button:
<form action=“Dateipfad“ method=“post“ accept-charset=“Zeichencodierung“>
<input type=“submit“ value=“Absenden „>
<input type=“reset“ value=“Abbrechen“>
</form>Fieldset und Legend:
<form action=“Dateipfad“ method=“post“ accept-charset=“Zeichencodierung“>
Formularelemente gruppieren:
<br />
<fieldset>
<legend>Absender</legend>
<br />
<input type=“text“ size=“40″ maxlength=“40″ name=“Vorname“>
<br />
<input type=“text“ size=“40″ maxlength=“40″ name=“Vorname“>
<br />
<input type=“text“ size=“40″ maxlength=“40″ name=“Vorname“>
<br /><br />
</fieldset>
</form>Klick-Buttons:
Buttons, also Schaltknöpfe/Schaltflächen können auch selber definiert werden…
<form action=“Dateipfad“ method=“post“ accept-charset=“Zeichencodierung“>
<br />
Schaltfläche: [Klick-Button ohne Event-Handler onclick]
<br />
<input type=“button“ name=“Text 1″ value=“LED 01 einschalten“>
<input type=“button“ name=“Text 1″ value=“LED 01 ausschalten“>
<br /><br />
Schaltfläche mit Grafik: [Klick-Button ohne Event-Handler onclick]
<br />
<input type=“button“ name=“Text 1″ value=“LED 01 einschalten“>
<input type=“button“ name=“Text 1″ value=“LED 01 ausschalten“>
<input type=“image“ src=“DATEINAME“ alt=“Bild als Button“>
</form>Das kleine Beispiel-Formular:
Nochmal als Info: Diese Quelltexte sind noch keine vollständigen Formulare sondern stellen nur die einzelnen Formularelemente vor.
Ein kleines Beispiel-Formular könnte so aussehen:
<form action=“Dateipfad“ method=“post“ accept-charset=“Zeichencodierung“>
Vorname:
<br />
<input type=“text“ name=“vorname“ size=“30″ maxlength=“30″ value=“Vorname eintragen…“>
<br /><br />
Nachname:
<br />
<input type=“text“ name=“nachname“ size=“30″ maxlength=“30″ value=“Nachname eintragen…“>
<br /><br />
<input type=“submit“ value=“Absenden „>
<input type=“reset“ value=“Abbrechen“>
</form>Textvorbelegung mit Placeholder:
<form action=“Dateipfad“ method=“post“ accept-charset=“Zeichencodierung“>
<input type=“text“ name=“vorname“ placeholder=“Max Mustermann“ > Textvorbelegung
</form>Pflichtfeld mit Required:
<form action=“Dateipfad“ method=“post“ accept-charset=“Zeichencodierung“>
<input type=“text“ name=“name“ required > Pflichtfeld mit required
<br /><br />
<input type=“submit“ value=“Absenden „>
<input type=“reset“ value=“Abbrechen“>
</form>Das neue „required“ Attribut ist schon der Knaller, wenn versucht wird das Formular leer abzuschicken, dann gibt es eine Warnung
Autofocus:
<form action=“Dateipfad“ method=“post“ accept-charset=“Zeichencodierung“>
<input type=“text“ name=“vorname“ required autofocus > Vorname Pflichtfeld mit required und autofocus
<input type=“text“ name=“nachname“ required > Nachname Pflichtfeld mit required
<input type=“text“ name=“ort“ required > Ort Pflichtfeld mit required
<br /><br />
<input type=“submit“ value=“Absenden „>
<input type=“reset“ value=“Abbrechen“>
</form>Per „autofocus“ wird der Cursor im entsprechenden Formularfeld positioniert.
Formularfeld für E-Mail:
<form action=“Dateipfad“ method=“post“ accept-charset=“Zeichencodierung“>
<input type=“email“ name=“vorname“ size=“40″ maxlength=“40″ placeholder=“E-Mail Adresse eintragen“ > E-Mail Formularelement
<br /><br />
<input type=“submit“ value=“Absenden „>
<input type=“reset“ value=“Abbrechen“>
</form>Für E-Mail Adressen gibt es ab HTML5 auch ein eigenes input-Element.
Dieses neue Formularelement wird in PHP noch eine Rolle spielen, denn hier wird schon auf HTML Ebene ein Formularcheck durchgeführt, ob eine gültige Mailadresse eingegeben wurde.
Formularfeld für Webadresse:
<form action=“Dateipfad“ method=“post“ accept-charset=“Zeichencodierung“>
<input type=“url“ name=“vorname“ size=“40″ maxlength=“40″ placeholder=“Webadresse eintragen“ > Webadresse Formularelement
<br /><br />
<input type=“submit“ value=“Absenden „>
<input type=“reset“ value=“Abbrechen“>
</form>Auch das Webadresse-Feld prüft schon die Eingabe
Formularfeld für Telefonnummer:
<form action=“Dateipfad“ method=“post“ accept-charset=“Zeichencodierung“>
<input type=“tel“ name=“vorname“ size=“40″ maxlength=“40″ placeholder=“Telefonnr. eintragen“ > Telefonnummer Formularelement
<br /><br />
<input type=“submit“ value=“Absenden „>
<input type=“reset“ value=“Abbrechen“>
</form>