Datalist Element

<div class="input-container">
  <label for="browser-input">Choose or Enter Browser:</label>
  <input
    type="text"
    id="browser-input"
    list="browsers"
    placeholder="Start typing... (e.g., Chrome)"
    class="styled-input"
    >
    <datalist id="browsers">
      <option value="Google Chrome">
        <option value="Mozilla Firefox">
          <option value="Safari">
            <option value="Microsoft Edge">
              <option value="Opera">
                <option value="Brave">
                </datalist>
              </div>
              <p class="note">🌐 Type to see suggestions appear. You can also enter any custom value!</p>

<div class="input-container">
  <label for="language-input">Select Programming Language:</label>
  <input
    type="text"
    id="language-input"
    list="languages"
    placeholder="e.g., JavaScript"
    class="styled-input"
    >
    <datalist id="languages">
      <option value="JavaScript">Dynamic web programming</option>
      <option value="Python">General-purpose, easy syntax</option>
      <option value="Java">Enterprise applications</option>
      <option value="C++">System programming</option>
      <option value="TypeScript">JavaScript with types</option>
      <option value="Rust">Memory-safe systems</option>
      <option value="Go">Fast compilation</option>
    </datalist>
  </div>
  <p class="note">💻 Options show descriptions as hints in some browsers</p>

<div class="input-container">
  <label for="color-input">Pick or Enter Color:</label>
  <input
    type="color"
    id="color-input"
    list="colors"
    value="#ec4899"
    class="color-input"
    >
    <datalist id="colors">
      <option value="#3b82f6">Blue</option>
      <option value="#10b981">Green</option>
      <option value="#ef4444">Red</option>
      <option value="#f59e0b">Orange</option>
      <option value="#8b5cf6">Purple</option>
      <option value="#ec4899">Pink</option>
    </datalist>
    <span class="color-display">Selected: #ec4899</span>
  </div>
  <p class="note">🎨 Datalist provides quick color presets in color picker</p>

<div class="input-container">
  <label for="email-input">Enter Email Address:</label>
  <input
    type="email"
    id="email-input"
    list="email-domains"
    placeholder="username@domain.com"
    class="styled-input"
    >
    <datalist id="email-domains">
      <option value="user@gmail.com">
        <option value="user@yahoo.com">
          <option value="user@outlook.com">
            <option value="user@hotmail.com">
              <option value="user@icloud.com">
                <option value="user@protonmail.com">
                </datalist>
              </div>
              <p class="note">📧 Common email domains appear as suggestions</p>

<div class="input-container">
  <label for="volume-input">Volume Level:</label>
  <input
    type="range"
    id="volume-input"
    list="volume-markers"
    min="0"
    max="100"
    value="50"
    class="range-input"
    >
    <datalist id="volume-markers">
      <option value="0" label="Mute"></option>
      <option value="25" label="Low"></option>
      <option value="50" label="Medium"></option>
      <option value="75" label="High"></option>
      <option value="100" label="Max"></option>
    </datalist>
    <div class="value-display">Current: <span id="value">50</span></div>
  </div>
  <p class="note">🎚️ Datalist creates tick marks on the range slider</p>