<!DOCTYPE html>
<html>
  <head>
    <title>Forma</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h1 class="mt-2">Formu uzdevums</h1>
      <form>
        <label class="form-label">Button</label>
        <input type="button" value="Uzspied mani" class="btn btn-primary">
        <label class="form-label">Color</label>
        <input type="color" class="form-control form-control-color">
        <label class="form-label">Date</label>
        <input type="date" class="form-control">
        <label class="form-label">Email</label>
        <input type="email" class="form-control" placeholder="ievadi epastu">
        <label class="form-label">File</label>
        <input type="file" class="form-control">
        <label class="form-label">Image</label>
        <input type="image" src="https://via.placeholder.com/80" class="img-fluid">
        <label class="form-label">Number</label>
        <input type="number" class="form-control">
        <label class="form-label">Password</label>
        <input type="password" class="form-control">
        <label class="form-label">Range</label>
        <input type="range" class="form-range">
        <input type="reset" value="Reset" class="btn btn-warning">
        <input type="submit" value="Submit" class="btn btn-success">
        <label class="form-label">Text</label>
        <input type="text" class="form-control">
        <label class="form-label">Time</label>
        <input type="time" class="form-control">
        <label class="form-label">Radio</label>
        <input type="radio" name="r1" class="form-check-input"> 1
        <input type="radio" name="r1" class="form-check-input"> 2
        <label class="form-label">Checkbox</label>
        <input type="checkbox" class="form-check-input"> A
        <input type="checkbox" class="form-check-input"> B
        <label class="form-label">Textarea</label>
        <textarea class="form-control"></textarea>
        <label class="form-label">Select</label>
        <select class="form-select">
          <optgroup label="Grupa 1">
            <option>1</option>
            <option>2</option>
          </optgroup>
          <optgroup label="Grupa 2">
            <option>3</option>
          </optgroup>
        </select>
        <label class="form-label">Datalist</label>
        <input list="saraksts" class="form-control">
        <datalist id="saraksts">
          <option value="HTML">
          <option value="CSS">
          <option value="JS">
        </datalist>
        <label class="form-label">Output</label>
        <output class="form-control">0</output>
        <fieldset class="border p-1">
          <legend class="w-auto">Fieldset</legend>
          <button class="btn btn-secondary">Poga</button>
        </fieldset>
        <button class="btn btn-info">Parasta poga</button>
      </form>
    </div>
  </body>
</html>
