På lektionen visade jag praktiskt hur man arbetar med formulär. Inga avancerade saker visades men den koden som användes under lektionen publicerar jag här.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Exempel på formulär</title>
<!-- Länkade in en css från ramverket mustard, https://mustard-ui.com/ -->
<link rel="stylesheet" href="https://unpkg.com/mustard-ui@latest/dist/css/mustard-ui.min.css">
</head>
<body>
<div class="container container-small">
<h1>Formulärtest</h1>
<form action="output.php" method="GET">
<p><label for="tal">Tal</label>
<input type="text" name="tal" required placeholder="Ange ett tal">
<p><input type="submit" name="submit" value="send">
<input type="reset" name="reset" value="reset"></p>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<link rel="stylesheet" href="https://unpkg.com/mustard-ui@latest/dist/css/mustard-ui.min.css">
<style>
pre{
/* Behövs för att radbryta snyggt i pre, detta är borttaget i
mustard-ui, därför behöver jag lägga tillbaka det. */
white-space: pre;
}
</style>
</head>
<body>
<div class="container container-small">
<h1>Resultat</h1>
<?php
echo "<p>Värdet du angav är: " . $_GET['tal'] . "</p>";
for($i=0; $i<=$_GET['tal']; $i++){
echo "<p>Talet är $i</p>";
}
?>
<p>Följande har skickats från formuläret!</p>
<pre>
<?php
// var_dump är en bra funktion som skriver
// ut allt innehåll i en variabel, i detta
// fallet en array var_dump($_POST);
// print_r skriver ut samma sak, fast med
// lite mindre information. Använd den du vill.
print_r($_POST);
// var_dump($_POST);
?>
</pre>
<p>Här är alla variabler som finns på sidan;</p>
<pre>
<?php
// get_defined_vars() är en funktion som tar fram
// alla variabler som finns på sidan denna är
// utmärkt att skriva ut för att hålla koll på vad
// som finns och vad som inte finns tillgängligt.
print_r(get_defined_vars());
?>
</pre>
<a href="javascript:history.back()">Back</a>
</div>
</body>
</html>