3I_WTL_2025/18_forms

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:

<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ší):

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ší):

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:

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

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

event.preventDefault():

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):

// 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:

div.innerHTML = `<p>Nový obsah</p>`;
div.innerHTML += `<p>Přidaný obsah</p>`;

appendChild - přidává element, lepší pro DOM manipulaci:

const p = document.createElement("p");
p.textContent = "Nový obsah";
div.appendChild(p);

Bootstrap Form Classes:

<!-- 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ářů