Voir le résultat Retour à la page du projet
Afficher/Masquer les commentaires
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="ISO-10646"/>
<title>formulaire</title>
<style><?php
include 'style.css';
?>
</style>
<link rel="stylesheet" href="formulaire.css">
</head>
<body>
<?php
include 'entete.php';
?>
<main>
<h1>Carte de transport</h1>
On On crée un formulaire dont les informations seront envoyées dans la page cible.php par la méthode post.
<form action="cible.php" method="post">
<fieldset>
<legend>Votre identité</legend>
<ol>
<li>
<label for="nom">Nom</label>
<input id="nom" name="nom" type="text" placeholder="nom" required autofocus>
</li>
<li>
<label for="prenom">Prenom</label>
<input id="prenom" name="prenom" type="text" placeholder="prenom" required autofocus>
</li>
<li>
<label for="naissance">Date de naissance</label>
<input id="naissance" name="naissance" type="date" placeholder="">
</li>
<li>
<fieldset>
<legend>Sexe</legend>
<ol>
<li>
<input name="sexe" type="radio" value="H" checked >
<label for="male">Homme</label>
</li>
<li>
<input name="sexe" type="radio" value="F">
<label for="femelle">Femme</label>
</li>
</ol>
</fieldset>
</fieldset>
<fieldset>
<legend>Votre adresse</legend>
<ol>
<li>
<label for="adresse">Adresse</label>
<textarea id="adresse" rows="5">
</li>
<li>
<label for="codepostal">Code postal</label>
<input id="codepostal" name="codepostal" type="text">
</li>
<li>
<label for="lieu_de_travail">Ville</label>
<select name="lieu_de_travail" requiered>
<option value="Sainte-Anne">Sainte-Anne</label>
<option value="Saint-François">Saint-François</label>
<option value="Le Moule">Le Moule</label>
<option value="autre">autre</label>
</select>
</li>
</ol>
</fieldset>
</fieldset>
<button type="submit">Valider</button>
</fieldset>
</form>
<p class="copyright">©mathartung</p>
</main>
<?php
include 'footer.php';
?>
</body>
</html>
Afficher/Masquer les commentaires
On récupère les informations sur cette page qui est obligatoirement en PHP pour intrépréter les données.
<?php
echo '
<!doctype html>
<html>
<head>
<meta charset="UTF-8"><style>';
include 'style.css';
echo '</style><title>formulaire</title>';
echo '<style type="text/css">
div {
text-align:left;
padding-left:40px;
padding-top:5px;';
if ($_POST['lieu_de_travail']=='Sainte-Anne')
echo 'background-image: url(images/carteSA.jpg);';
else if ($_POST['lieu_de_travail']=='Saint-François')
echo 'background-image: url(images/carteSF.jpg);';
else if ($_POST['lieu_de_travail']=='Le Moule')
echo 'background-image: url(images/carteLM.jpg);';
else if ($_POST['lieu_de_travail']=='autre')
echo 'background-color: green;';
echo '
margin-left:20%;
width:450px;
height:298px;
}
strong {
font-size:2rem;
}
h1{color:red}
.pub {text-align:right;
padding-right:20px;
font-size:1rem;
color:#858E8D;
</style>';
echo '</head> <body>';
include 'entete.php';
echo "<main><div class='carte'><h1>Carte de transport </h1>
<p>Nom : <strong>".$_POST['nom']."</strong></p>
<p>Prénom : <strong>".$_POST['prenom']."</strong></p>
<p>Sexe : <strong>".$_POST['sexe']."</strong></p>
<p>Adresse : <strong>".$_POST['adresse']."</strong></p>
<p>Ville : <strong>".$_POST['lieu_de_travail']."</strong></p>";
if ($_POST['lieu_de_travail']=='autre')
echo "<p class='pub'>Carte offerte par le lycée</p>";
else
echo "<p class='pub'>Carte offerte par la ville de ".$_POST['lieu_de_travail']."</p>";
echo "</div>";
echo '<p>Si tu veux changer des données, <a href="index.php">clique ici</a> pour revenir à la page formulaire.</p>';
echo "</main>";
include 'footer.php';
echo "</body></html>";
?>
Afficher/Masquer les commentaires
Voici la page de style du formulaire.
h1, form, fieldset, legend, ol {
margin: auto;
padding: 0;
}
legend {
margin: 0;
padding: 0;
}
p, h1 {
text-align:center;
margin-bottom: 20px;
}
form {
background: #9cbc2c;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 20px;
width: 400px;
}
form fieldset {
border: none;
margin-bottom: 10px;
}
form fieldset:last-of-type {
margin-bottom: 0;
}
form legend {
color: #384313;
font-size: 16px;
font-weight: bold;
padding-bottom: 10px;
text-shadow: 0 1px 1px #c0d576;
}
form fieldset fieldset legend {
color: #111111;
font-size: 13px;
font-weight: normal;
padding-bottom: 0;
}
form ol li {
background: #b9cf6a;
background: rgba(255,255,255,.3);
border-color: #e3ebc3;
border-color: rgba(255,255,255,.6);
border-style: solid;
border-width: 2px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}
form ol ol li {
background: none;
border: none;
float: left;
}
form label {
float: left;
font-size: 13px;
width: 110px;
}
form fieldset fieldset label {
background:none no-repeat left 50%;
line-height: 20px;
padding: 0 0 0 30px;
width: auto;
}
form fieldset fieldset label:hover {
cursor: pointer;
}
form input:not([type=radio]),
form textarea {
background: #ffffff;
border: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
font: italic 13px Georgia, "Times New Roman", Times, serif;
outline: none;
padding: 5px;
width: 200px;
}
form input:not([type=submit]):focus,
form textarea:focus {
background: #eaeaea;
}
form input[type=radio] {
float: left;
margin-right: -20px;
}
form button {
background: #384313;
border: none;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
color: #ffffff;
display: block;
font: 18px Georgia, "Times New Roman", Times, serif;
letter-spacing: 1px;
margin: auto;
padding: 7px 25px;
text-shadow: 0 1px 1px #000000;
text-transform: uppercase;
}
form button:hover {
background: #1e2506;
cursor: pointer;
}
