.---.                                                                        
   .                  __  __   ___   |   |                                                                        
 .'|                 |  |/  `.'   `. |   |                                                                        
 |  |             .|  |   .-.  .-.   '|   |                                                                        
 | |           .' |_ |  |  |  |  |  ||   |                                                                        
 | | .'''-.  .'     ||  |  |  |  |  ||   |                                                                        
 | |/.'''. \'--.  .-'|  |  |  |  |  ||   |                                                                        
 |  /    | |   |  |  |  |  |  |  |  ||   |                                                                        
 | |     | |   |  |  |__|  |__|  |__||   |                                                                        
 | |     | |   |  '.'                '---'                                                                        
 | '.    | '.  |   /                      _..._                                                                   
 '---'   '---' `'-'                    .-'_..._''.                                                                
/|                             .--.  .' .'      '.\                    .--..--.                                   
||                             |__| / .'                               |__||__| ,.--.                             
||                             .--.. '                                 .--..--.//    \                            
||  __        __               |  || |                                 |  ||  |\\    /                            
||/'__ '.  .:--.'.         _   |  || |                   _             |  ||  | `'--'                             
|:/`  '. '/ |   \ |      .' |  |  |. '                 .' |            |  ||  | ,.--.                             
||     | |`" __ | |     .   | /|  | \ '.          .   .   | /          |  ||  |//    \                            
||\    / ' .'.''| |   .'.'| |//|__|  '. `._____.-'/ .'.'| |//          |__||__|\\    /                            
|/\'..' / / /   | |_.'.'.-'  /         `-.______ /.'.'.-'  /                    `'--'                             
'  `'-'`  \ \._,\ '/.'   \_.'                   ` .'   \_.'         _..._                  .-'''-.                
           `--'  `"                                              .-'_..._''.              '   _    \              
.--.   _..._                  __.....__                        .' .'      '.\      .--. /   /` '.   \    _..._    
|__| .'     '.            .-''         '.                     / .'                 |__|.   |     \  '  .'     '.  
.--..   .-.   .     .|   /     .-''"'-.  `. .-,.--.          . '               .|  .--.|   '      |  '.   .-.   . 
|  ||  '   '  |   .' |_ /     /________\   \|  .-. |    __   | |             .' |_ |  |\    \     / / |  '   '  | 
|  ||  |   |  | .'     ||                  || |  | | .:--.'. | |           .'     ||  | `.   ` ..' /  |  |   |  | 
|  ||  |   |  |'--.  .-'\    .-------------'| |  | |/ |   \ |. '          '--.  .-'|  |    '-...-'`   |  |   |  | 
|  ||  |   |  |   |  |   \    '-.____...---.| |  '- `" __ | | \ '.          .|  |  |  |               |  |   |  | 
|__||  |   |  |   |  |    `.             .' | |      .'.''| |  '. `._____.-'/|  |  |__|               |  |   |  | 
    |  |   |  |   |  '.'    `''-...... -'   | |     / /   | |_   `-.______ / |  '.'                   |  |   |  | 
    |  |   |  |   |   /                     |_|     \ \._,\ '/            `  |   /                    |  |   |  | 
    '--'   '--'   `'-'                               `--'  `"                `'-'                     '--'   '--'




HTML BASICS II: Interaction

Es gibt HTML-Elemente, bei denen Nutzer*innen klicken, wählen, schieben und tippen können.

Jedes Element unten hat drei Teile: eine kurze Erklärung, eine Demo zum Ausprobieren und den Code zum Kopieren.

Inhalt

  1. Textfeld
  2. Zahlenfeld
  3. Textbereich (Textarea)
  4. Auswahlliste (Select)
  5. Checkbox
  6. Radiobutton
  7. Slider (Range)
  8. Colorpicker
  9. Aufklappen (Details / Summary)
  10. Popover





  .-.   .-.   .-.   .-.   .-.   .-.   .-.   .-.   .-.   .-.   .-.   .-.   .-.
 /   \ /   \ /   \ /   \ /   \ /   \ /   \ /   \ /   \ /   \ /   \ /   \ /   \
'     ' 🌊  '     '     ' 🌊  '     '     ' 🌊  '     '     ' 🌊  '     '



1. Textfeld

Ein Feld für eine Zeile Text. Das Attribut placeholder zeigt einen grauen Hinweis, der verschwindet, sobald in dem Textfeld getippt wird.

Demo

Frage eine Person nach ihrem Lieblingsort in .

Code






/\/\/\/\/\ 🏠 /\/\/\/\/\ 🌳 /\/\/\/\/\ 🏠 /\/\/\/\/\ 🌳 /\/\/\/\/\ 🏠
\/\/\/\/\/    \/\/\/\/\/    \/\/\/\/\/    \/\/\/\/\/    \/\/\/\/\/



2. Zahlenfeld

Ein Feld nur für Zahlen, mit kleinen Pfeilen zum Hoch- und Herunterzählen. Die Attribute bedeuten: min = kleinster Wert, max = größter Wert, step = Schrittgröße, value = Startwert.

Demo

Frage Personen nach ihrem Lieblingsort in der Stadt.

Code






 *    .   ✨   .   *    .   ✨   .   *    .   ✨   .   *    .   ✨   .
    .        .        .       🌙        .        .        .       🌙
  .    *   .    ✨  .    *   .    ✨  .    *   .    ✨  .    *   .    ✨



3. Textbereich (Textarea)

Ein Feld für längere Texte mit mehreren Zeilen. Das Attribut rows bestimmt die Höhe (in Zeilen), das Attribut cols die Breite (in Zeichen).

Demo

Schreibe auf, wie du dich vorstellst. Lies es einer Person vor und frage sie nach ihrem Lieblingsort.

Code






 __    __    __    __    __    __    __    __    __    __    __    __    __
/  \__/🌳\__/  \__/🏠\__/  \__/🌳\__/  \__/🏠\__/  \__/🌳\__/  \__/🏠\__/  \__



4. Auswahlliste (Select)

Ein Aufklappmenü mit festen Optionen. Jede Option steht in einem eigenen <option>-Element. Mit dem Attribut selected ist eine Option vorausgewählt.

Demo

Frage eine Person nach ihrem Lieblingsort.

Code






 __    __    __    __    __    __    __    __    __    __    __    __    __
|  |__|👣|__|  |__|👣|__|  |__|👣|__|  |__|👣|__|  |__|👣|__|  |__|👣|__|  |__



5. Checkbox

Es können mehrere Checkboxen gleichzeitig ausgewählt werden. Mit dem Attribut checked ist eine Checkbox bereits angehakt.

Demo

Frage eine Person nach ihrem Lieblingsort. Regeln:

Stelle nur Ja-/Nein-Fragen.

Mache vorher ein Kompliment.

Gehe danach gemeinsam ein Stück.

Code






~^~-~^~-~^~-~^~-~^~-~^~-~^~-~^~-~^~-~^~-~^~-~^~-~^~-~^~-~^~-~^~-~^~-~^~-~^~-~^~-
-~^~-~^~-🐟~-~^~-~^~-~^~-~^~-🐟~-~^~-~^~-~^~-~^~-🐟~-~^~-~^~-~^~-~^~-🐟~-~^~-~^~



6. Radiobutton

Es kann immer nur ein Radiobutton ausgewählt werden. Wichtig: Bei allen Radiobuttons einer Gruppe muss das Attribut name den gleichen Wert haben.

Demo

Frage eine Person nach ihrem Lieblingsort – und zwar:

auf Deutsch

auf Englisch

mit Händen und Füßen

Code






.:*~*:._.:*🌼*:..:*~*:._.:*🌼*:..:*~*:._.:*🌼*:..:*~*:._.:*🌼*:..:*~*:._.:*🌼*:.



7. Slider (Range)

Ein Schieberegler. Wie bei einem Zahlenfeld gibt es die Attribute min, max, step und value.

Demo

Frage eine Person nach ihrem Lieblingsort. Wie laut?

flüsternd rufend

Code






-o-=-O-=-o-=-O-=-o-=-O-=-o-=-O-=-o-=-O-=-o-=-O-=-o-=-O-=-o-=-O-=-o-=-O-=-o-=-O-=
  |       |       |       |       |       |       |       |       |       |
  🏮      🍂      🏮      🍂      🏮      🍂      🏮      🍂      🏮      🍂



8. Colorpicker

Öffnet einen Farbwähler. Mit dem Attribut value wird die Startfarbe festgelegt (als Hex-Code, z. B. #ff0000 für Rot).

Demo

Frage eine Person, die etwas in dieser Farbe trägt, nach ihrem Lieblingsort:

Code






.oOo. .oOo. .oOo. .oOo. .oOo. .oOo. .oOo. .oOo. .oOo. .oOo. .oOo. .oOo. .oOo.
  .oOo  🐟    .oOo  .oOo  🐟    .oOo  .oOo  🐟    .oOo  .oOo  🐟    .oOo  .oOo



9. Aufklappen (Details / Summary)

Ein Bereich, der auf- und zugeklappt werden kann. <summary> ist die Überschrift, die immer sichtbar ist. Alles andere in <details> erscheint erst nach dem Klick. Mit dem Attribut open ist der Bereich bereits aufgeklappt.

Demo

Frage eine Person nach ihrem Lieblingsort in der Stadt.

Und dann?

Gehe dorthin und mache ein Foto für die Person.

Code






--->>>    --->>> 🚶 --->>>    --->>> 👣 --->>>    --->>> 🚶 --->>>    --->>> 👣



10. Popover

Ein Kasten, der über der Seite erscheint, wenn auf einen Button geklickt wird. Geschlossen wird er durch einen erneuten Klick, einen Klick daneben oder die Taste Esc. Der Wert des Attributs popovertarget am Button muss mit dem Wert des Attributs id am Popover übereinstimmen.

Demo

Frage eine Person nach ihrem Lieblingsort in der Stadt.

Stelle dich vor und erkläre kurz das Projekt.

Code




     /  \        /  \        /  \        /  \        /  \        /  \
__/        \__/        \__/        \__/        \__/        \__/       
  \        /  \        /  \        /  \        /  \        /  \       
     \__/        \__/        \__/        \__/        \__/        \__/
     /  \        /  \        /  \        /  \        /  \        /  \
__/        \__/        \__/        \__/        \__/        \__/       
  \        /  \        /  \        /  \        /  \        /  \       
     \__/        \__/        \__/        \__/        \__/        \__/
     /  \        /  \        /  \        /  \        /  \        /  \
__/        \__/        \__/        \__/        \__/        \__/       
  \        /  \        /  \        /  \        /  \        /  \       
     \__/        \__/        \__/        \__/        \__/        \__/
     /  \        /  \        /  \        /  \        /  \        /  \
__/        \__/        \__/        \__/        \__/        \__/       
  \        /  \        /  \        /  \        /  \        /  \