Einfache HTML Formatierungen II (Formulare)

 
<form method="GET" action="https://www.google.at/search">
    <label for="q">Keyword:</label>
    <input type="text" id="q" name="q" size="5" />
    <input type="submit" value="Suchen" />
</form>
form definiert den Formularbereich, method bestimmt die Art der Anfrage (GET oder POST) und action enthält das Skript das auszuführen ist. Über label kann Text mit einem Formularfeld verknüpft werden - die Attribute for beim label und id beim input-Element stellen dabei diesen Zusammenhang her. 
<input type="text" name="firstname" placeholder="Vorname" />
Texteingabefeld mit dem Namen firstname und einem Platzhaltertext der beim Ausfüllen des Feldes verschwindet. 
<input type="password" name="secret" value="Geheimzahl" />
Passworteingabefeld mit maskierten Zeichen. Das Kopieren des Passworts ist nicht möglich. 
<textarea name="abstract" rows="5" cols="30">Abstract:</textarea>
Texteingabefeld für mehrzeilige Texte. Das Attribut rows bestimmt die Anzahl an Reihen, cols (wie columns) die Anzahl an Spalten. Der Text zwischen den beiden textarea-Tags wird in das Eingabefeld geschrieben.
gelesen
verstanden 
<input type="checkbox" name="confirm" /> gelesen
<input type="checkbox" name="confirm" checked /> verstanden
Checkbox zum Ankreuzen. Sobald das Attribut checked vorhanden ist, wird ein Häckchen gesetzt.
weiblich männlich 
<input type="radio" name="gender" value="female" /> weiblich
<input type="radio" name="gender" value="male" /> männlich
Checkboxen mit entweder/oder Auswahlmöglichkeit. Die beiden (oder auch mehrere) Knöpfe müssen das gleiche name-Attribut haben. Vorselektion wieder mit checked. 
<select name="district">
    <option value="1701">Innsbruck</option>
    <option value="1702">Imst</option>
    <option value="1703">Innsbruck Land</option>
    <option value="1704">Kitzbühel</option>
    <option value="1705" selected>Kufstein</option>
    <option value="1706">Landeck</option>
    <option value="1707">Lienz</option>
    <option value="1708">Reute</option>
    <option value="1709">Schwaz</option>
</select>
Auswahlliste mit neun Möglichkeiten. Über select wird die Auswahlliste definiert, option-Elemente enthalten die Einträge der Liste und bestehen aus einem value-Attribut sowie dem Labeltext zwischen den option-Tags. Vorselektion eines Eintrags über das Attribut selected. 
<select name="district" multiple size="10">
    <optgroup label="Bezirk(e) auswählen">
        <option value="1701" selected>Innsbruck</option>
        <option value="1702">Imst</option>
        <option value="1703">Innsbruck Land</option>
        <option value="1704">Kitzbühel</option>
        <option value="1705">Kufstein</option>
        <option value="1706">Landeck</option>
        <option value="1707">Lienz</option>
        <option value="1708">Reute</option>
        <option value="1709">Schwaz</option>
    </optgroup>
</select>
Über das Attribut size aufgeklappte Auswahlliste mit Mehrfachselektion über das Attribut multiple. Die Einträge sind durch ein optgroup-Element gruppiert dessen label-Attribut den Titel der Gruppe bestimmt. 
<input type="range" min="0" max="100" step="10" value="30" />
Einfacher Slider mit dem Wertebereich 0 (min) bis 100 (max), einer Schrittweite beim Ziehen von 10 (step) und dem vordefinierten Wert 30.
75 % 
<progress max="100" value="75">75 %</progress>
Fortschrittsbalken mit dem Naximalwert 100, 75 davon sind schon erreicht.
75 
<meter min="0" max="100" value="75" low="33" high="66" optimum="50">
Meter-Element mit Minimum (min), Maximum (max) und voreingestelltem Wert (value). Durch die attribute low, high und optimum werden Wertebereiche definiert. TODO: und wie wird das gestylt? 
<input type="hidden" name="user" value="geo" />
Verstecktes Formularfeld mit Namen (name) und Wert (value) die beim Abschicken des Formulars an das Skript mitgeschickt werden.
Benutzer-Login 
<fieldset>
    <legend>Benutzer-Login</legend>
    <input type="text" id="user" name="user" size="10" />
    <label for="user"> Name
    <br />
    <input type="password" id="pass" name="pass" size="10" />
    <label for="pass"> Passwort
</fieldset>
Grafische und inhaltliche Gruppierung von Formularfeldern über das Attribut fieldset mit einem legend-Attribut. 
<input type="button" value="Button" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
Drei verschieden Schaltflächen deren type-Attribut die Art der Schaltfläche bestimmt: button erzeugt eine Schaltfläche ohne vordefiniertes Verhalten, submit dient zum Abschicken des Formulars und reset zum Zurücksetzen des Formulars auf die beim Aufruf voreingestellten Werte.
Testen ... 
<form method="POST" action="http://geographie.uibk.ac.at/app/echo">
    <input type="text" name="test" value="ein Test" />
    <input type="submit" value="Abschicken" />
</form>