|
|
|
@ -5,6 +5,7 @@ |
|
|
|
<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; |
|
|
|
@ -13,52 +14,63 @@ |
|
|
|
</head> |
|
|
|
<body> |
|
|
|
<h1>Registrační formulář</h1> |
|
|
|
<form id="regform" action=""> |
|
|
|
<p> |
|
|
|
<input type="text" name="name" value="" placeholder="e.g. Bob"> |
|
|
|
</p> |
|
|
|
<p> |
|
|
|
<input type="number" name="age" min="1" max="199" placeholder="Your age"> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p> |
|
|
|
pohlaví <br> |
|
|
|
<input id="male" type="radio" name="sex" value="male"> <label for="male">muž</label> |
|
|
|
<input id="female" type="radio" name="sex" value="female"> <label for="female">žena</label> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p> |
|
|
|
<select name="country"> |
|
|
|
<option value="CZ">Česko</option> |
|
|
|
<option value="SK">Slovensko</option> |
|
|
|
<option value="DE">Německo</option> |
|
|
|
</select> |
|
|
|
</p> |
|
|
|
<p> |
|
|
|
Chci zasílat novinky z: <br> |
|
|
|
<input type="checkbox" name="news" value="1" id="vedtech"> |
|
|
|
<label for="vedtech">Věda a technika</label> <br> |
|
|
|
<input type="checkbox" name="news" value="2" id="eko"> |
|
|
|
<label for="eko">Ekonomika</label> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p> |
|
|
|
<label for="">Datum narození</label> |
|
|
|
<input type="date" max="2021-11-03"> |
|
|
|
</p> |
|
|
|
|
|
|
|
<p> |
|
|
|
<label for="">Zájmy</label> |
|
|
|
<textarea name="zajmy" id="" cols="30" rows="10"></textarea> |
|
|
|
</p> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<input type="submit" name="reg" value="Registrovat"> |
|
|
|
<button type="submit">Registrovat 2</button> |
|
|
|
</form> |
|
|
|
<div class="card" style="width: 24rem;"> |
|
|
|
<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" 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> |
|
|
|
<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"); |
|
|
|
|
|
|
|
|
