Problème boutton html
Superdiamant7
-
jordane45 Messages postés 40050 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 40050 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour,
J'ai commencé un projet de "To do list", et ça fonctionne bien.
Mais il y a un problème: Les boutons qui permettent de supprimer chaque élément de la liste refusent de se placer à coté. J'ai d'abords regardé sur internet et même demandé à chat-GPT !, mais rien ne fonctionne ????
Pouvez vous m'aider svp ?
Index.php:
<?php
require_once 'list.php';
?>
<html>
<head>
<link rel="stylesheet" href="style.scss">
<title>To do list</title>
</head>
<body>
<h1>To do list</h1>
<label>
<div>
<form method="POST">
<input placeholder="Enter a new task" required id="form" name="form" maxlength="36">
<button id="newTask">Add to list</button>
</form>
</div>
</label>
</body>
</html>
List.php:
<?php
require_once 'login.php';
try
{
$pdo = new PDO($attr, $user, $pass, $opts);
}
catch (PDOException $e)
{
throw new PDOException($e->getMessage(), (int)$e->getCode());
}
if (isset($_POST['form']))
{
$newTask = htmlentities($_POST['form']);
$query = "INSERT INTO tasks (text) VALUES (\"$newTask\")";
$result = $pdo->query($query);
$newTask = NULL;
header("refresh: 0");
}
$query = "SELECT * FROM tasks";
$result = $pdo->query($query);
echo "<ol class='list'>";
while ($row = $result->fetch())
{
echo "<li>" . $row['text'] . "</li>" . "<form method='POST'>
<button name='supprimer' value=" . $row['id'] . ">Supprimer</button></form>";
}
echo "</ol>";
if (isset($_POST['supprimer']))
{
$id = $_POST['supprimer'];
$query = "DELETE FROM tasks WHERE id=" . $id;
$result = $pdo->query($query);
header("refresh: 0");
}
style.scss:
h1 {
position: absolute;
top: 7%;
left: 10%;
font-size: 400%;
text-decoration: underline;
}
#form {
position: absolute;
top: 25%;
left: 35%;
width: 30%;
height: 5%;
text-align: center;
&:focus {
border: 5px solid black;
}
font-size: 200%;
}
#newTask {
position: absolute;
top: 26%;
left: 66.5%;
width: 10%;
height: 3%;
transition: 400ms;
&:hover {
transform: scale(1.15);
}
}
.list {
position: absolute;
top: 40%;
left: 35%;
font-size: 200%;
}
A voir également:
- Problème boutton html
- Editeur html - Télécharger - HTML
- Espace en html ✓ - Forum HTML
- Nbsp html ✓ - Forum Webmastering
- [**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
- Html download - Télécharger - HTML
1 réponse
Bonjour,
Pour commencer, tes boutons doivent se trouver dans tes LI
Ensuite, tu peux utiliser le css : display:inline-block
<ol class='list'>
<li>aaa
<form method='POST'>
<button name='supprimer' value="1">Supprimer</button>
</form>
</li>
<li>bbbb
<form method='POST'>
<button name='supprimer' value="2">Supprimer</button>
</form>
</li>
</ol>
.list > li > form {
display:inline-block
}
