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>