Formular-Tags
Ein wichtiger Bestandteil des Webs sind Formulare. Mit ihnen kann der Benutzer z. B. Artikel schreiben / kommentieren, sich einloggen oder etwas bestellen.
<form id="myForm" method="GET" action="/include/backend.php">
<!-- Form-Tags -->
</form>- damit die Information, die in die Formular-Tags eingegeben werden auch gesendet werden, müssen sie zwischen dem Form-Tag stehen (er wird oft vergessen, weil er nicht sichtbar ist)
- method
- GET: die Werte werden in die URL angezeigt und es ist sinnvoll, wenn es als Lesezeichen gespeichert oder geteilt werden soll (z. B. Jbschmitt.de/suche?q=html
- POST: ist nicht limitiert und sollte unbedingt für sensible Daten wie Passwörter verwendet werden.
- action: URL, an die die Daten gesendet werden
<fieldset>
<legend>Felder gruppieren</legend>
<label for="sirAndLastName">Name</label><br>
<input type="text" name="sirlastname" id="sirAndLastName" placeholder="Julian Landwehr"><br>
<label for="age">Alter</label><br>
<input type="number" name="age" id="age" value="18.5" required><br>
<fieldset>
<br>- fieldset: nutzt man um Formularfelder zu gruppieren
- legend: beschriftet diese Gruppen
- label:
- zum beschriften von Formularfeldern
- Wichtig für Blinde, dass man dieses Element nimmt anstatt z. B. eines <h2> oder <p>
- for="id" sagt, zu welchem Input das Label gehört; die Id des Inputs
- input:
- name: unter dem wird die Information (der Value) gesendet
- placeholder: Platzhalter, zum Anzeigen eines Beispiel
- type: text, number, submit, reset, password, button, um einige zu nennen; was für ein Input-Feld es ist. Den richtigen Typen zu wählen, obwohl auch text gehen würde hat den Vorteil, dass z.B. das Passwort unkenntlich als die schwarzen Punkte dargestellt wird oder bei number ein Nummernfeld als Tastatur auf Smartphones erscheint als die mit Buchstaben
- value: dieser Wert kann vorgegen werden und wird gesendet
- required: hat keinen Wert; bestimmt, dass das Formular nur abgesendet werden darf wenn das Feld nicht leer ist
<fieldset>
<label for="sirName">Lieblingsfach</label>
<select name="favsubject" id="favSubject" size=2>
<option value="math">Mathe</option>
<option value="pe">Mathe</option>
<option value="english">Mathe</option>
<option valeu="math!">Mathe!</option>
</select>Eine Auswahlliste braucht option-tags, zwischen denen der Nutzer auswählen kann. size gibt an wie viele Optionen gleichzeitig angezeigt werden sollen. Wie im Beispiel zu sehen wird Mathe angezeigt, aber es wird der value gesendet. (Klar, dass das nicht empfohlen ist.)
<h2>Browser, die ich hasse</h2>
<label><input type="checkbox" name="browser[]" value="Chrome">Chrome</label>
<label><input type="checkbox" name="browser[]" value="Opera">Opera</label>
<label><input type="checkbox" name="browser[]" value="Firefox">Firefox</label>
<label><input type="checkbox" name="browser[]" value="Safari" checked>Safari</label>
<label><input type="checkbox" name="browser[]" value="Edge">Edge</label>
<label><input type="checkbox" name="browser[]" value="IE" checked>Internet Explorer</label>Hier ist das Input-Feld im Label-Tag. Dadurch weiß der Browser auch welches Feld gemeint ist. Das Label ist auch anklickbar, um die Checkbox anzuticken. Es ist auch möglich jedesmal einen anderen Namen zu wählen (dann ohne []), hier ergibt es aber mehr Sinn, diese zu eine Liste (Array) zusammenzufügen, da sie inhaltlich zusammen gehören. Würde man "browser" statt browser[] nehmen, würde nur das letzte angetickte Feld übermittelt, da es alle vorherigen überschreibt. "Checked" tickt ein Feld schon an.
<h2>Editor</h2>
<label><input type="radio" name="editor" value="dickhead" required>Notepad</label>
<label><input type="radio" name="editor" value="idiot">Phase 5</label>
<label><input type="radio" name="editor" value="okay">Notepad++</label>
<label><input type="radio" name="editor" value="good">Atom</label>
<label><input type="radio" name="editor" value="good">Visual Studio</label>
</fieldset>
<br>Bei "radio" muss der Name der gleiche sein und darf nicht [] enthalten. Auch wenn das "required"-Attribute im ersten Input[typ="radio"] steht, muss nicht unbedingt dieses angewählt werden, sondern nur eins, dass den gleichen Namen hat (hier also alle 5).
<textarea placeholder="Kommentar"></textarea><br>
<button type="submit">Daten senden</button>
</form>- textarea: für viel Text
- button:
- type="submit" zum Senden des Formulares
- type="button" macht nichts. Sinnvoll für Javascript
- type="reset" zum Leeren bzw. Zurücksetzen des ganzen Formulares (Sollte NICHT verwendet werden, weil Nutzer ihn, weil er oft neben dem submit-Button liegt, aus versehen klicken. Die Seite kann auch neugeladen werden, um das Formular zurück zu setzen.)