# 18 - Bootstrap Formuláře a DOM Manipulace

## 🎯 Co se naučíte

V této lekci se naučíte vytvářet dynamické formuláře s Bootstrapem a DOM manipulací.

## 📚 Témata lekce

- **Bootstrap formuláře** - `form-control`, `form-label`, `mb-3`
- **addEventListener** - moderní přístup k event handlingu
- **event.preventDefault()** - zabránění default chování formuláře
- **DOM manipulace** - vytváření elementů pomocí JS
- **createElement()** - vytvoření nového elementu
- **appendChild()** - přidání elementu do DOM
- **Template literals** - backticks pro HTML šablony
- **Bootstrap Cards** - kartičky pro obsah
- **Real-time výpis** - návštěvní kniha

## 📂 Soubory v projektu

- `index.html` - kompletní aplikace s formulářem a výpisem
- `css/bootstrap.css` - Bootstrap CSS

## 💻 Ukázka z lekce

### Formulář s Bootstrap třídami:
```html
<form id="guestbookForm">
    <div class="mb-3">
        <label for="name" class="form-label">Jméno:</label>
        <input type="text" class="form-control" id="name" required>
    </div>
    <div class="mb-3">
        <label for="message" class="form-label">Zpráva:</label>
        <textarea class="form-control" id="message" required></textarea>
    </div>
    <button type="submit" class="btn btn-danger w-100">ODESLAT</button>
</form>

<div id="entries"></div>
```

### JavaScript - Template Literals (rychlejší):
```javascript
form.addEventListener("submit", function(e) {
    e.preventDefault();

    const name = document.getElementById("name").value;
    const message = document.getElementById("message").value;

    // Template literal s backticks
    const htmldiv = `
        <div class="alert alert-info">
            <strong>${name}</strong>: ${message}
        </div>
    `;

    entriesDiv.innerHTML += htmldiv;
    form.reset();
});
```

### JavaScript - createElement (strukturovanější):
```javascript
form.addEventListener("submit", function(e) {
    e.preventDefault();

    const name = document.getElementById("name").value;
    const message = document.getElementById("message").value;

    // Vytvoření elementů
    const div = document.createElement("div");
    div.className = "alert alert-danger";

    const strong = document.createElement("strong");
    strong.textContent = name;

    const text = document.createElement("span");
    text.textContent = ": " + message;

    // Složení dohromady
    div.appendChild(strong);
    div.appendChild(text);

    // Vložení do stránky
    entriesDiv.appendChild(div);

    form.reset();
});
```

## 🚀 Jak s lekcí pracovat

1. Otevřete `index.html` v prohlížeči
2. Vyplňte jméno a zprávu do formuláře
3. Odešlete formulář - zpráva se objeví pod formulářem
4. Přidejte další zprávy - všechny se zobrazí
5. Prozkoumejte JavaScript kód - dvě různé metody
6. Vyzkoušejte Developer Tools (F12) - sledujte DOM změny

## 💡 Tip pro studenty

### addEventListener vs onclick:
```javascript
// ✅ MODERNÍ přístup (doporučený)
form.addEventListener("submit", function(e) {
    e.preventDefault();
    // ...
});

// ❌ STARŠÍ přístup (méně flexibilní)
<form onsubmit="return handleSubmit()">
```

### event.preventDefault():
```javascript
form.addEventListener("submit", function(e) {
    e.preventDefault();  // Zastaví odeslání a reload stránky
    // Můžeme zpracovat data vlastním způsobem
});
```

### Template Literals (backticks):
```javascript
// Starý způsob (konkatenace)
const html = "<div>" + name + ": " + message + "</div>";

// ✅ Nový způsob (template literal)
const html = `<div>${name}: ${message}</div>`;
```
- Používá **backticks** (AltGr + ý)
- **${proměnná}** - vložení hodnoty proměnné
- Podporuje **víceřádkové stringy**

### innerHTML vs appendChild:

**innerHTML** - rychlé, ale přepisuje vše:
```javascript
div.innerHTML = `<p>Nový obsah</p>`;
div.innerHTML += `<p>Přidaný obsah</p>`;
```

**appendChild** - přidává element, lepší pro DOM manipulaci:
```javascript
const p = document.createElement("p");
p.textContent = "Nový obsah";
div.appendChild(p);
```

### Bootstrap Form Classes:
```html
<!-- Form group -->
<div class="mb-3">  <!-- margin-bottom: 1rem -->
    <label class="form-label">Název</label>
    <input class="form-control" type="text">
</div>

<!-- Input velikosti -->
<input class="form-control form-control-sm">  <!-- malý -->
<input class="form-control">                   <!-- normální -->
<input class="form-control form-control-lg">  <!-- velký -->

<!-- Full width button -->
<button class="btn btn-primary w-100">Tlačítko</button>
```

## 🎯 Praktické využití

- **Návštěvní kniha** - uživatelé zanechávají vzkazy
- **Chat aplikace** - zprávy v real-time
- **Komentáře** - pod článkem
- **Todo list** - přidávání úkolů
- **Košík** - přidávání produktů

## 🔗 Související lekce

- **Předchozí:**
  - 17_modal - Bootstrap modal
  - 08_js_form - základy formulářů v JS
- **Další:** 19_todolist - Todo list aplikace
- **Související:** AI/ai_03_form_validation - pokročilá validace formulářů