You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
5.1 KiB
103 lines
5.1 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Formulář</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
|
<style>
|
|
label:hover {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Registrační formulář</h1>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<form id="regform" action="">
|
|
<div class="mb-3">
|
|
<label for="name" class="form-label">Jméno</label>
|
|
<input class="form-control" id="name" type="text" name="name" value="" placeholder="e.g. Bob">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="age" class="form-label">Věk</label>
|
|
<input class="form-control" id="age" type="number" name="age" min="1" max="199" placeholder="Your age">
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" id="male" type="radio" name="sex" value="male">
|
|
<label class="form-check-label" for="male">muž</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" id="female" type="radio" name="sex" value="female">
|
|
<label class="form-check-label" for="female">žena</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="country" class="form-label"></label>
|
|
<select id="form-label" name="country" class="form-select">
|
|
<option value="CZ">Česko</option>
|
|
<option value="SK">Slovensko</option>
|
|
<option value="DE">Německo</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
Chci zasílat novinky z: <br>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" name="news" value="1" id="vedtech">
|
|
<label class="form-check-label" for="vedtech">Věda a technika</label> <br>
|
|
</div>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" name="news" value="2" id="eko">
|
|
<label class="form-check-label" for="eko">Ekonomika</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="birthday">Datum narození</label>
|
|
<input class="form-control" id="birthday" name="birthday" type="date" max="2021-11-03">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="hobbies">Zájmy</label>
|
|
<textarea class="form-control" id="hobbies" name="hobbies" cols="30" rows="10"></textarea>
|
|
</div>
|
|
<div class="mb-3">
|
|
<input class="btn btn-primary" type="submit" name="reg" value="Registrovat">
|
|
<button class="btn btn-primary" type="submit">Registrovat 2</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="form-report" class="col">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
|
|
<script>
|
|
let form = document.querySelector("#regform");
|
|
|
|
form.addEventListener("submit", function(event) {
|
|
event.preventDefault();
|
|
let data = new FormData(form);
|
|
console.log(data);
|
|
let report = document.querySelector("#form-report");
|
|
report.innerHTML = "<p>" + data.get("name") + "</p>";
|
|
report.innerHTML += "<p>" + data.get("age") + "</p>";
|
|
report.innerHTML += "<p>" + data.get("sex") + "</p>";
|
|
report.innerHTML += "<p>" + data.get("country") + "</p>";
|
|
report.innerHTML += "<p>" + data.getAll("news") + "</p>";
|
|
report.innerHTML += "<p>" + data.get("birthday") + "</p>";
|
|
report.innerHTML += "<p>" + data.get("hobbies") + "</p>";
|
|
});
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|