HTML: Controls

HTML Form- und Bedienungselemente

Februar 2023
Darstellung Code
Quellen
  • https://drafts.csswg.org/
  • https://developer.mozilla.org/en-US/docs/Web/HTML
Akkordion 
<details
  <summary>
   Quellen
  </summary>
  <ul>
    <li>https://drafts.csswg.org/
    <li>https://developer.mozilla.org/en-US/docs/Web/HTML
  </ul>
</details>
Formularhülle 
<form accept-charset="utf-8"
  action=""
  method=""
  enctype="multipart/form-data">
</form>
Legend
Gruppierrahmen 
<fieldset>
  <legend>Legend</legend>
</fieldset>
Textzeile 
<input type="text" value="">
Passwort 
<input type="password" value="">
Textbereich 
<textarea class="muster">
Mein Text in der Text-Area
</textarea>
verborgenes Feld 
<input type="hidden" value="">
Suchfeld 
<input type="search" value="">
ein Wort mit A eingeben:
 Suchfeld mit voreingestellen Suchbegriffen 
ein Wort mit A eingeben:<br>
<input type="search" list="mysearches">
  <datalist id="mysearches">
    <option value="Alpha"> 
    <option value="Anna"> 
    <option value="Amsel"> 
    <option value="Archipel"> 
  </datalist>
Telefonnummer 
<input type="telephone" value="">
Internetadresse 
<input type="url" value="">
E-Mail-Adresse 
<input type="email" value="">
Datum 
<input type="date" value="">
Monat 
<input type="month" value="">
Woche 
<input type="week" value="">
Zeitpunkt 
<input type="time" value="">
Datum und Zeitpunkt zusammen 
<input type="datetime-local" value="">
numerisches Feld 
<input type="number" value="">
Wertebereich 
<input type="range" value="">
Farbe 
<input type="color" value="">
Checkbox 
<input type="checkbox" value="">
Radiobutton einzeln 
<input type="radio" value="">
Radiobutton-Gruppe 
<input type="radio" name="my-radiogroup" value="1">
<input type="radio" name="my-radiogroup" value="2">
<input type="radio" name="my-radiogroup" value="3">
Auswahlliste 
<select size="1">
  <option disabled="" value="a">Punkt 1</option>
  <option selected="" value="b">Punkt 2</option>
  <option value="c">Punkt 3</option>
</select>
Auswahlliste mit gruppierten Werten 
<select name="Namen" size="6">
 <optgroup label="Group A">
    <option label="eins">1</option>
    <option label="zwei">2</option>
    <option label="drei">3</option>
  </optgroup>
  <optgroup label="Group B">
    <option label="vier">4</option>
    <option label="f&uuml;nf">5</option>
    <option label="sechs">6</option>
  </optgroup>
</select>
Mehrfachauswahl 
<select size="4" multiple="">
  <option value="a" selected="">Punkt 1</option>
  <option value="b">Punkt 2</option>
  <option value="c" selected="">Punkt 3</option>
  <option value="d">Punkt 4</option>
</select>
Button 
<input type="button" value="nur ein Button">
Dateinameneingabe z.B. für Upload 
<input type="file" value="">
Sendebutton 
<input type="submit" value="ein Submit-Button">
Grafik als Sendebutton 
<input type="image" src="imagesubmit.gif" value="">
Reset-Button 
<input type="reset" value="ein Reset-Button">
Button 
<button>Button</button>
Resetbutton 
<button type="reset">Reset</button>
Sendebutton 
<button type="submit">Senden</button>
Fortschrittsbalken 
<progress></progress>
Videowiedergabe 
<video height="100pt" controls>
  <source src="" type="">
</video>
Audiowiedergabe 
<audio src="" controls ></audio>
Minimaldialog mit JavaScript
Dialog 
<button id="anzeigen">Dialog</button>
<dialog id="minimaldialog">
   <div>
     Minimaldialog mit JavaScript
    </div>
    <button id="verbergen">Schlie&szlig;en</button>
</dialog>
<script type="text/JavaScript">
  let dialog = document.getElementById('minimaldialog');
  document.getElementById('verbergen').onclick = 
    function() { dialog.close();};
  document.getElementById('anzeigen').onclick = 
    function() { dialog.show(); }; 
</script>