<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>m03u01</title>
<link rel="stylesheet" type="text/css" href="../../css/materialize.css">
<script defer type="text/javascript" src="../../js/materialize.js"></script>
<script defer>
var options = {}; // Kod kopierad från Materialize (CSS framework) dokumentering för att få kalendern att fungera.
var now = new Date();
options.maxDate = now;
options.firstDay = 1;
options.yearRange = [now.getUTCFullYear() - 100, now.getUTCFullYear()];
document.addEventListener('DOMContentLoaded', function () {
var elems = document.querySelectorAll('.datepicker');
var instances = M.Datepicker.init(elems, options);
console.log(instances);
});
</script>
</head>
<body>
<div class="container">
<form action="output.php" method="POST" class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="surname" name="surname" type="text" class="validate" required>
<label for="surname">Förnamn</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="last_name" name="last_name" type="text" class="validate" required>
<label for="last_name">Efternamn</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="birthday" name="birthday" type="text" class="datepicker validate" required>
<label for="birthday">Födelsedatum</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="password" name="password" type="password" class="validate" required>
<label for="password">Lösenord</label>
</div>
</div>
<fieldset>
<legend>Kön</legend>
<p>
<label>
<input class="with-gap validate" value="male" name="gender" type="radio" required />
<span>Man</span>
</label>
</p>
<p>
<label>
<input class="with-gap validate" value="female" name="gender" type="radio" required />
<span>Kvinna</span>
</label>
</p>
</fieldset>
<p>
<label>
<input type="checkbox" class="filled-in" name="consent" required />
<span>Jag godkänner användarvillkoren</span>
</label>
</p>
<p>
<input class="btn" type="submit" value="Skicka">
</p>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>m03u01 - Svar</title>
<link rel="stylesheet" type="text/css" href="../../css/materialize.css">
<script defer type="text/javascript" src="../../js/materialize.js"></script>
</head>
<body>
<div class="container">
<h1>Svar</h1>
<?php
function write_property($property, $name) # Gör en funktion för att skriva ut textsvaren.
# Då kan jag enkelt kolla ifall den finns i $_POST (vilket den bör göra oavsätt, men bra vana att kolla)
{
if (!isset($_POST[$property]))
return;
echo "<p>{$name}: {$_POST[$property]}</p>";
}
write_property("surname", "Förnamn"); # Här skriver vi ut de 4 textegenskaperna.
write_property("last_name", "Efternamn");
write_property("birthday", "Födelsedag");
write_property("password", "Lösenord");
if (isset($_POST["gender"])) { # För kön använder vi en switch för att "översätta" form värdet till text som ska visas
echo "<p>Kön: ";
switch ($_POST["gender"]) {
case "male":
echo "Man";
break;
case "female":
echo "Kvinna";
break;
default:
echo "Ospecifierat"; # Sker endast ifall POST-requestet är manipulerat, eftersom de enda möjliga alternativen är male eller female.
}
echo "</p>";
}
echo "<p>Samtycker till villkor: ";
echo (isset($_POST["consent"]) && $_POST["consent"]) ? "Ja" : "Nej";
# Vi kollar både om consent var med i post och att den är satt till on.
echo "</p>";
?>
</div>
</body>
</html>