A solução com textarea
é ruim e nada usual. A função desse elemento é armazenar um texto, não uma lista, então utilizá-la é errado e nada semântico. Se o seu problema consiste em possuir vários campos de ingredientes, o seu HTML deve ser consistente com essa ideia: possuir vários campos.
Como está utilizando PHP no servidor, você pode definir o nome do campo de ingredientes como ingredientes[]
, com os colchetes no final. O PHP, ao analisar esse dado, irá converter para um array. Assim, seu HTML ficaria algo como:
input {
display: block;
margin-bottom: 10px;
}
<form method="POST">
<label for="receita">Receita:</label>
<input type="text" name="receita" placeholder="Ex: Pão de queijo">
<label>Ingredientes:</label>
<div id="ingredientes">
<input type="text" name="ingredientes[]" placeholder="Ex: Sal">
</div>
<button type="button" id="adicionar">Adicionar</button>
<button type="submit">Cadastrar</button>
</form>
Assim, para adicionar mais ingredientes, basta fazer com que seja criado mais elementos ao pressionar o botão Adicionar. Com JavaScript, podemos fazer algo como:
const adicionar = document.getElementById("adicionar");
const ingredientes = document.getElementById("ingredientes");
adicionar.addEventListener("click", function (event) {
let campo = document.createElement("input");
campo.name = "ingredientes[]";
campo.placeholder = "Ex: Sal";
ingredientes.appendChild(campo);
});
input {
display: block;
margin-bottom: 10px;
}
<form method="POST">
<label for="receita">Receita:</label>
<input type="text" name="receita" placeholder="Ex: Pão de queijo">
<label>Ingredientes:</label>
<div id="ingredientes">
<input type="text" name="ingredientes[]" placeholder="Ex: Sal">
</div>
<button type="button" id="adicionar">Adicionar</button>
<button type="submit">Cadastrar</button>
</form>
Desta forma, ao ser pressionado o botão Adicionar, outro campo para ingrediente é adicionado. Isso permite, inclusive, que o usuário edite as informações de qualquer ingrediente e, se implementado, remover ingredientes também.
No lado do servidor, quando o formulário for submetido, você pode pegar a lista de ingredientes com:
$ingredientes = $_POST["ingredientes"];
Será um array com todos os ingredientes digitados.