generated from francesco/deploy-dinamico
112 lines
4.9 KiB
HTML
112 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Modulo iscrizione palestra</title>
|
|
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="hero">
|
|
<div class="overlay">
|
|
<div class="container">
|
|
<h1>Iscrizione Palestra</h1>
|
|
<p>Utilizzo di una pagina statica</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="buttons">
|
|
<a href="post.php" class="button">Vai al metodo POST</a>
|
|
</div>
|
|
<form method="get" target="_self">
|
|
<div class="orizzontale">
|
|
<fieldset>
|
|
<label for="nome">Nome</label>
|
|
<input type="text" name="nome" id="nome" autocomplete="given-name" required>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label for="cognome">Cognome</label>
|
|
<input type="text" name="cognome" id="cognome" autocomplete="family-name" required>
|
|
</fieldset>
|
|
</div>
|
|
<div class="orizzontale">
|
|
<fieldset>
|
|
<label for="email">E-mail</label>
|
|
<input type="email" name="email" id="email" autocomplete="email" required>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label for="abbonamento">Abbonamento</label>
|
|
<select id="abbonamento" name="abbonamento" required>
|
|
<option value="" disabled selected> -- Seleziona</option>
|
|
<option value="mensile">Mensile</option>
|
|
<option value="trimestrale">Trimestrale</option>
|
|
<option value="semestrale">Semestrale</option>
|
|
<option value="annuale">Annuale</option>
|
|
</select>
|
|
</fieldset>
|
|
</div>
|
|
<div class="orizzontale">
|
|
<fieldset>
|
|
<label>Sesso</label>
|
|
<div class="box">
|
|
<input type="radio" name="sesso" value="maschio" id="maschio" required>
|
|
<label for="maschio">Maschio</label>
|
|
</div>
|
|
<div class="box">
|
|
<input type="radio" name="sesso" value="femmina" id="femmina" required>
|
|
<label for="femmina">Femmina</label>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label>Attività preferite</label>
|
|
<div class="box">
|
|
<input type="checkbox" name="attivita_yoga" id="yoga" value="yoga">
|
|
<label for="yoga">Yoga</label>
|
|
</div>
|
|
<div class="box">
|
|
<input type="checkbox" name="attivita_nuoto" id="nuoto" value="nuoto">
|
|
<label for="nuoto">Nuoto</label>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<fieldset>
|
|
<input type="submit" value="Invia">
|
|
</fieldset>
|
|
</form>
|
|
<i class="msg">Nota: Dopo aver premuto "Invia", i dati saranno visibili come parametri nell'URL (dopo ?)</i>
|
|
|
|
<div class="output">
|
|
<h3>Dati nell'URL con metodo GET</h3>
|
|
<p>Nome: <span id="getnome"></span></p>
|
|
<p>Cognome: <span id="getcognome"></span></p>
|
|
<p>E-mail: <span id="getemail"></span></p>
|
|
<p>Abbonamento: <span id="getabbonamento"></span></p>
|
|
<p>Sesso: <span id="getsesso"></span></p>
|
|
<p>Attività: <span id="getattivita"></span></p>
|
|
|
|
<i class="msg">Nota: Dati letti con JavaScript</i>
|
|
</div>
|
|
</div>
|
|
|
|
<script defer>
|
|
// Con JS leggo i dati dall'URL e li stampo nella pagina
|
|
const parametri = new URLSearchParams(window.location.href.split("?")[1]);
|
|
|
|
document.getElementById("getnome").innerText = parametri.get("nome") || "Dato non presente nell'URL";
|
|
document.getElementById("getcognome").innerText = parametri.get("cognome") || "Dato non presente nell'URL";
|
|
document.getElementById("getemail").innerText = parametri.get("email") || "Dato non presente nell'URL";
|
|
document.getElementById("getabbonamento").innerText = parametri.get("abbonamento") || "Dato non presente nell'URL";
|
|
document.getElementById("getsesso").innerText = parametri.get("sesso") || "Dato non presente nell'URL";
|
|
document.getElementById("getattivita").innerText = parametri.get("attivita_yoga") && parametri.get("attivita_nuoto") ? `${parametri.get("attivita_yoga")}, ${parametri.get("attivita_nuoto")}` : parametri.get("attivita_yoga") ? parametri.get("attivita_yoga") : parametri.get("attivita_nuoto") ? parametri.get("attivita_nuoto") : "Dato non presente nell'URL";
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |