ajout et base du formulaire

This commit is contained in:
2026-04-03 10:23:45 +02:00
parent 0704caa03f
commit a9f310a37f
4 changed files with 109 additions and 9 deletions

View File

@@ -12,8 +12,8 @@
<div class="main-body"> <div class="main-body">
<div class="content"> <div class="content">
<form class="recette-form" action="" method="post"> <div class="recette-add-form-all">
<div class="recette-form-add"> <form class="recette-form recette-form-add" action="" method="post">
<div class="recette-form-group form-group"> <div class="recette-form-group form-group">
<label for="nom">Titre : </label> <label for="nom">Titre : </label>
<input type="texte" class="form-control" id="recette-form-nom" name="nom" placeholder="Titre de votre recette"> <input type="texte" class="form-control" id="recette-form-nom" name="nom" placeholder="Titre de votre recette">
@@ -26,18 +26,60 @@
<label for="photo">Photo du plat : </label> <label for="photo">Photo du plat : </label>
<input type="file" class="form-control" id="recette-form-photo" name="photo" placeholder="ajouter votre image"> <input type="file" class="form-control" id="recette-form-photo" name="photo" placeholder="ajouter votre image">
</div> </div>
<div class="recette-form-group form-group" id="recette-form-div-ingr">
<label for="ingr">Ingredients</label>
<select multiple class="form-control" id="recette-form-ingr" name="ingr" placeholder="Ingredients">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="recette-form-group form-group" id="recette-form-div-tag">
<label for="tag">Tag</label>
<select multiple class="form-control" id="recette-form-tag" name="tag" placeholder="Tag">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="recette-form-group form-group" id="recette-form-div-desc"> <div class="recette-form-group form-group" id="recette-form-div-desc">
<label for="description">Description</label> <label for="description">Description</label>
<input type="texte" class="form-control" id="recette-form-description" name="description" placeholder="Description..."> <textarea type="texte" class="form-control" id="recette-form-description" name="description" placeholder="Description..."></textarea>
</div> </div>
<button type='submit' class='btn btn-primary'>Confirmer</button> <button type='submit' class='btn btn-primary'>Confirmer</button>
</div>
</form> </form>
<div class="recette-form-add-additional">
<form id="recette-form-ingr-add" class="recette-form recette-form-add-ingr" action="" method="post">
<div class="recette-form-group form-group">
<label for="ingr-nom">Nom de l'Ingrédient</label>
<input type="texte" class="form-control" id="recette-form-ingr-nom" name="ingr-nom" placeholder="Nom de l'ingrédient" value="">
</div>
<div class="recette-form-group form-group">
<label for="ingr-photo">Photo de l'Ingrédient</label>
<input type="file" class="form-control" id="recette-form-ingr-photo" name="ingr-photo">
</div>
<button id="submit-ingr" type='submit' class='btn btn-primary'>Confirmer</button>
</form>
<form class="recette-form recette-form-add-tag" action="" method="post">
<div class="recette-form-group form-group">
<label for="tag">Tags</label>
<input type="texte" class="form-control" id="recette-form-tag" name="tag" placeholder="Nom de l'ingrédient">
</div>
<button type='submit' class='btn btn-primary'>Confirmer</button>
</form>
</div>
</div>
</div> </div>
</div> </div>
<?php include "footer.php"?> <?php include "footer.php"?>
</body> </body>
<script src="main.js"></script>
</html> </html>

View File

@@ -21,4 +21,5 @@
<?php include "footer.php"?> <?php include "footer.php"?>
</body> </body>
<script src="main.js"></script>
</html> </html>

View File

@@ -432,25 +432,52 @@ ul {
} }
.recette-form { .recette-form {
height: 100%; height: 80%;
width: 100%; width: 80%;
margin: 10px; margin: 10px;
padding: 10px; padding: 10px;
border: 1px solid black;
background: white;
border-radius: 20px;
} }
.recette-form-group { .recette-form-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 5px;
} }
#recette-form-div-desc { #recette-form-div-desc {
height: 400px; height: 300px;
} }
#recette-form-description { #recette-form-description {
height: 95%; height: 95%;
} }
.recette-add-form-all {
display: flex;
flex-direction: row;
overflow: hidden;
}
.recette-form-add {
flex: 3;
}
.recette-form-add-ingr {
height: 30%;
}
.recette-form-add-tag {
height: 30%;
}
.recette-form-add-additional{
flex: 1;
padding-right: 10px;
}
/*Footer et son contenue*/ /*Footer et son contenue*/
footer{ footer{
padding: 25px; padding: 25px;

30
main.js Normal file
View File

@@ -0,0 +1,30 @@
document.addEventListener("DOMContentLoaded", function(){
function formulaire_ingredient_update(event) {
event.preventDefault();
let form = document.getElementById("recette-form-ingr-add");
let cible = document.getElementById("recette-form-ingr");
let ingr = form.ingr-nom;
let new_elem = document.createElement("option");
new_elem.setAttribute("value",ingr.value);
new_elem.innerText = ingr.value;
cible.appendChild(new_elem);
}
let ingr_btn = document.getElementById("submit-ingr");
ingr_btn.addEventListener('click', formulaire_ingredient_update(event));
})