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.
