Az űrlapok a weboldalak egyik legfontosabb interakciós elemei. Egy jól megtervezett, reszponzív űrlap nemcsak esztétikus, de használható is minden eszközön. Ebben a cikkben lépésről lépésre megmutatjuk, hogyan készíthetsz egy modern, reszponzív űrlapot Bootstrap 5 és CSS Grid segítségével, valamint hogyan alkalmazhatod a Bootstrap beépített form validációs lehetőségeit.
1. lépés: Projekt struktúra
Hozz létre egy egyszerű projektet az alábbi struktúrával:
Projekt mappa │ ├── index.html # A fő HTML fájl └── js # Egyéni js (opcionális) └── script.js # Egyéni js fájl (opcionális) └── css # Egyéni stílusokhoz (opcionális) └── style.css # Egyéni CSS fájl (opcionális)2. lépés: Alap HTML űrlap Bootstrap osztályokkal
Az űrlap elemeihez használd a Bootstrap form-osztályait, hogy alapból szép és reszponzív legyen:
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Űrlap Validáció</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" /> <link rel="stylesheet" href="css/style.css" /> </head> <body class="p-4"> <div class="container"> <h1 class="mb-4">Regisztrációs űrlap</h1> <form class="needs-validation" novalidate> <!-- Szövegmező --> <div class="mb-3"> <label for="name" class="form-label">Név</label> <input type="text" class="form-control" id="name" required /> <div class="invalid-feedback">Kérjük, add meg a neved!</div> </div> <!-- Email --> <div class="mb-3"> <label for="email" class="form-label">Email cím</label> <input type="email" class="form-control" id="email" required /> <div class="invalid-feedback">Kérjük, érvényes email címet adj meg!</div> </div> <!-- Jelszó --> <div class="mb-3"> <label for="password" class="form-label">Jelszó</label> <input type="password" class="form-control" id="password" required minlength="6" /> <div class="invalid-feedback">Legalább 6 karakter szükséges.</div> </div> <!-- Jelszó megerősítése --> <div class="mb-3"> <label for="confirmPassword" class="form-label">Jelszó megerősítése</label> <input type="password" class="form-control" id="confirmPassword" required /> <div class="invalid-feedback" id="confirmPasswordFeedback">A jelszavak nem egyeznek!</div> </div> <!-- Telefonszám --> <div class="mb-3"> <label for="phone" class="form-label">Telefonszám</label> <input type="tel" class="form-control" id="phone" required /> <div class="invalid-feedback">Kérjük, add meg a telefonszámod!</div> </div> <!-- TAJ-szám --> <div class="mb-3"> <label for="taj" class="form-label">TAJ-szám</label> <input type="text" class="form-control" id="taj" required /> <div class="invalid-feedback">Kérjük, add meg a TAJ-számod (9 számjegy)!</div> </div> <!-- Bankszámlaszám --> <div class="mb-3"> <label for="bankszamla" class="form-label">Bankszámlaszám</label> <input type="text" class="form-control" id="bankszamla" required /> <div class="invalid-feedback">Kérjük, add meg a teljes bankszámlaszámod!</div> </div> <!-- Dátum --> <div class="mb-3"> <label for="dob" class="form-label">Születési dátum</label> <input type="text" class="form-control" id="dob" required /> <div class="invalid-feedback">Kérjük, válassz dátumot!</div> </div> <!-- Idő --> <div class="mb-3"> <label for="idopont" class="form-label">Időpont</label> <input type="text" class="form-control" id="idopont" required /> <div class="invalid-feedback">Kérjük, válassz időpontot!</div> </div> <!-- Szám --> <div class="mb-3"> <label for="quantity" class="form-label">Darabszám</label> <input type="number" class="form-control" id="quantity" min="1" max="100" required /> <div class="invalid-feedback">Kérjük, adj meg egy számot 1 és 100 között!</div> </div> <!-- Legördülő --> <div class="mb-3"> <label for="select" class="form-label">Válassz kategóriát</label> <select class="form-select" id="select" required> <option value="">-- Válassz --</option> <option value="1">Kategória 1</option> <option value="2">Kategória 2</option> </select> <div class="invalid-feedback">Kérjük, válassz kategóriát!</div> </div> <!-- Checkbox --> <div class="mb-3 form-check"> <input class="form-check-input" type="checkbox" id="terms" required /> <label class="form-check-label" for="terms">Elfogadom a feltételeket</label> <div class="invalid-feedback">El kell fogadnod a feltételeket!</div> </div> <!-- Rádiógombok --> <div class="mb-3"> <label class="form-label">Nem</label> <div class="form-check"> <input class="form-check-input" type="radio" name="gender" id="male" required /> <label class="form-check-label" for="male">Férfi</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="gender" id="female" required /> <label class="form-check-label" for="female">Nő</label> </div> <div class="invalid-feedback d-block">Kérjük, válassz nemet!</div> </div> <!-- Szövegterület --> <div class="mb-3"> <label for="message" class="form-label">Üzenet</label> <textarea class="form-control" id="message" rows="3" required></textarea> <div class="invalid-feedback">Kérjük, írj üzenetet!</div> </div> <!-- Fájl --> <div class="mb-3"> <label for="fileUpload" class="form-label">Fájl feltöltése</label> <input class="form-control" type="file" id="fileUpload" required /> <div class="invalid-feedback">Kérlek, válassz ki egy fájlt!</div> </div> <!-- Küldés --> <button class="btn btn-primary" type="submit">Küldés</button> </form> </div> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> <!-- Flatpickr --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" /> <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> <!-- Magyar lokalizáció --> <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/hu.js"></script> <!-- Inputmask (teljes működő build) --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.9/jquery.inputmask.min.js"></script> <!-- Végül a saját script --> <script src="js/script.js"></script> </body> </html>3. lépés: CSS Grid az űrlap elrendezéséhez
A CSS Grid segítségével egyszerűen készíthetsz több oszlopos elrendezést nagyobb képernyőkre, miközben mobilon egy oszlopos marad:
form { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { form { grid-template-columns: 1fr 1fr; } /* Az üzenet mező és a gomb teljes szélességűek legyenek */ form > div:nth-last-child(2), form > button { grid-column: 1 / -1; } } 4. lépés: Bootstrap form validáció használata
Bootstrap beépített validációs osztályait használhatod JavaScript segítségével, hogy a felhasználói hibákat azonnal jelezze az űrlap:
(() => { 'use strict'; const form = document.querySelector('.needs-validation'); if (!form) return; const password = form.querySelector('#password'); const confirmPassword = form.querySelector('#confirmPassword'); const confirmFeedback = form.querySelector('#confirmPasswordFeedback'); form.addEventListener('submit', event => { event.preventDefault(); // <- Mindig megakadályozza az elküldést event.stopPropagation(); const isPasswordMatch = password.value === confirmPassword.value; if (!form.checkValidity() || !isPasswordMatch) { if (!isPasswordMatch) { confirmPassword.classList.add('is-invalid'); confirmFeedback.style.display = 'block'; } else { confirmPassword.classList.remove('is-invalid'); confirmFeedback.style.display = 'none'; } } else { confirmPassword.classList.remove('is-invalid'); confirmFeedback.style.display = 'none'; // 💡 Ide jöhet a saját logikád pl. AJAX küldés console.log('Űrlap sikeresen validált!'); } form.classList.add('was-validated'); }, false); })(); window.addEventListener("DOMContentLoaded", function () { // Csak ha már minden betöltődött if (typeof Inputmask !== "undefined") { Inputmask({"mask": "+36 (99) 999-9999"}).mask("#phone"); Inputmask({"mask": "999999999"}).mask("#taj"); Inputmask({"mask": "99999999-99999999-99999999"}).mask("#bankszamla"); } else { console.error("Inputmask nincs betöltve!"); } if (typeof flatpickr !== "undefined") { flatpickr("#dob", { dateFormat: "Y-m-d", maxDate: "today", locale: "hu" }); flatpickr("#idopont", { enableTime: true, noCalendar: true, dateFormat: "H:i", time_24hr: true, locale: "hu" }); } else { console.error("Flatpickr nincs betöltve!"); } }); Összegzés
Egy reszponzív űrlap CSS Grid és Bootstrap kombinációjával könnyen elkészíthető, amely minden eszközön jól működik. A Bootstrap validációs osztályai pedig egyszerűvé teszik a felhasználói hibák kezelését és megjelenítését.
