Im 5. Teil des Tutorials zum Thema „Eigene Webseite erstellen“ geht es um das erstellen von verschiedenen Steuerelementen (Input types) wie z.B. Buttons, Textboxen oder Auswahlboxen.
HTML Steuerlemente
Bevor wir mit den eigentlichen Steuerelementen anfangen, sollte ich noch kurz einige Begriffe erklären welche später nicht weiter erleutert werden:
type – Hiermit wird der Typ des Steuerelements bestimmt. type bestimmt also z.B. ob ein Eingabeelement eine Textbox oder ein Button ist. (Muss ein valider type sein)
value – Mit dieser Eigenschaft wird der Standardwert, bzw. der Text eines z.B Buttons, eingestellt. (Beliebiger Text)
placeholder – Mit dieser Eigenschaft wird ein standardmäßig grauer Text gesetzt, der verschwindet, sobald der Benutzer in z.B. eine Textbox einen Text schreibt und wieder erscheint, sobald diese leer ist. (Beliebiger Text)
autocomplete – Mit autocomplete ist es möglich die vom Browser „gestellten“ Formulardaten welche bereits auf anderen Webseiten eingegeben wurden nicht zu erlauben. (off)
checked – Mit dieser Eigenschaft ist es möglich Optionen einer Checkbox oder einer Radiobox vorab zu aktivieren. (Kein Wert erforderlich)
Nachdem wir einige Grundlagen geklärt haben jetzt zu den verschiedenen Steuerelementen:
Buttons: Buttons sind einfache Steuerelemente und werden meist zum abschicken eines Formulars verwendet. Buttons können mit unzählig vielen verschiedenen CSS-Eigenschaften bearbeitet werden.
<!-- Button per Input-Element --> <input type="button" value="Button" /> <!-- Button per Button-Element --> <button>Button 2</button>
Textbox: Ach komm schon, du weißt genau, was eine Textbox ist! Die Suche auf www.playingthat.de ist z.B. eine Textbox
<input type="text" placeholder="Ich bin eine Textbox!" autocomplete="off" />
Auswahlbox: Eine Auswahlbox ist im Grunde genommen einer Textbox sehr ähnlich, nur das wie bei einer Auswahlbox keinen Text eingeben können sondern uns diese stattdessen feste vorgaben macht.
<select name="month"> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select>
Radiobutton: Radiobuttons geben uns ähnlich wie Auswahlboxen die Möglichkeit zwischen verschiedenen vorgegebenen Optionen zu wählen. Radiobuttons die zur selben Auswahlmöglichkeit gehören (ich hoffe man kann nachvollziehen was ich meine) müssen den selben name (Namen) tragen, damit der Browser des Benutzers weiß, dass diese zusammengehören.
<input type="radio" name="Alter" value="10-15"> 10-15 <br> <input type="radio" name="Alter" value="16-25"> 16-25 <br> <input type="radio" name="Alter" value="26-35"> 26-35
Checkboxen: Checkboxen sind diese kleinen Kästchen in denen wenn man diese anklickt ein Häkchen erscheint neben denen rechts ein Text steht. Sie ermöglichen dem Benutzer einzelne Optionen zu aktivieren oder deaktivieren.
<input type="checkbox" name="zusatzinformationen" value="newsletter"> Möchten Sie regelmäßig unseren Newsletter erhalten?<br> <input type="checkbox" name="zusatzinformationen" value="katalog"> Sind Sie an unserem Katalog interessiert?<br> <input type="checkbox" name="zusatzinformationen" value="einfallslos"> Sind Sie auch so einfallslos wie der Author dieses Artikels?
So, das wären vorerst alle Elemente, im Video werden nocht einige mehr genannt.