Forumulaire HTML/CSS à joindre à une base de donnée MYSQL
Posté : 19 nov. 2021, 10:30
Bonjour alors voilà.
J'ai crée un formulaire en HTML/CSS avec certains champ.
je voudrais que lorsque je remplis les données ''nom, prénom... etc'' qu'elles soient inscrite dans une base de données.
En sachant que j'ai déjà une base de donnée créée avec les même champs que sur mon site.
Est-ce que qqn pourrait m'aider à mettre mon HTML/CSS sur mon localhost ''MAMP'' et ensuite à joindre ma bdd ?
Voici mon code
*CSS*
J'ai crée un formulaire en HTML/CSS avec certains champ.
je voudrais que lorsque je remplis les données ''nom, prénom... etc'' qu'elles soient inscrite dans une base de données.
En sachant que j'ai déjà une base de donnée créée avec les même champs que sur mon site.
Est-ce que qqn pourrait m'aider à mettre mon HTML/CSS sur mon localhost ''MAMP'' et ensuite à joindre ma bdd ?
Voici mon code
!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Inscription</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css.css">
<link rel="stylesheet" href="tg.php">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript" src="java.js">
</script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col s12 m12 l12" style="text-align:center; color:white;">
<i class="large material-icons">add_circle</i>
<h1>Inscription</h1>
<p>Bienvenue sur la page d'inscription, veuillez remplir les informations ci-dessous</p>
</div>
</div>
<div class="row" id="blanc">
<div class="col l12 m12 s12" id="rectangle">
<form method="GET">
<!-- Champ prénom !-->
<div class="input-field col s6">
<label for="prenom">Prénom</label>
<input class="validate" name="prenom" type="text" value="" id="prenom" placeholder="François" required>
</div>
<!-- Champ nom !-->
<div class="input-field col s6">
<label for="nom">Nom de famille</label>
<input class="validate" type="text" value="" name="nom" id="nom" placeholder="Pignon" required text-capitalize>
</div>
<!-- Champ code postal !-->
<div class="input-field col s6">
<label for="code_postal">Code postal</label>
<input class="validate" type="number" value="" name="code_postal" id="code_postal" placeholder="69000" minlength="5" maxlength="5" required>
</div>
<!-- Champ ville !-->
<div class="input-field col s6">
<label for="ville">Ville</label>
<input class="validate" type="text" value="" name="ville" id="ville" minlength="3" placeholder="Lyon" required>
</div>
<!-- Champ date de naissance !-->
<div class="input-field col s12">
<label for="naissance">Date de naissance</label>
<input type="text" class="datepicker" name="naissance" placeholder="10/02/1980" class="validate" required>
</div>
<!-- Champ email !-->
<div class="input-field col s12">
<label for="email">Email</label>
<input class="validate" type="email" value="" name="email" id="p1" placeholder="[email protected]" required>
<input class="validate" type='email' placeholder="[email protected]" onfocus="validateMail(document.getElementById('p1'), this);" oninput="validateMail(document.getElementById('p1'), this);" required>
</div>
<!-- Champ CGV !-->
<div class="input-field col s12">
<p>
<label>
<input class="with-gap" name="group1" type="radio"/>
<span>J'accepte les conditions d'utilisations.</span>
</label>
</p>
</div>
<!-- Bouton envoyer !-->
<div class="input-field col s12">
<button class="btn waves-effect waves-light pulse" type="submit" name="action">Valider
<i class="material-icons right">send</i>
</button>
</div>
</form>
</div>
</div>
</div>
</header>
</body>
</html>
*CSS*
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,600,700");
html{
min-height: 100%;
}
body{
background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);background-position: center;
}
#nom{
text-transform: uppercase;
}
.btn{
background-color: #14b0f3;
}
.btn:hover{
background-color: #0093d2;
}
header{
padding: 7em 5em 4em 5em;
}
h1{
font-family: 'Source Sans Pro', Arial, sans-serif;
}
#rectangle{
border: solid 2px white;
background-color: white;
padding: 2em 2em 2em 2em;
-webkit-box-shadow: 3px 4px 4px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 4px 4px -2px rgba(0,0,0,0.75);
box-shadow: 3px 4px 4px -2px rgba(0,0,0,0.75);
}
#blanc{
max-width: 50%;
min-width: 50%;
}
)