Você pode usar um Heredoc para armazenar um trecho em uma variável. Com ele você poderá salvar múltiplas linhas de maneira fácil.
Basta utilizar:
<<<[IDENTIFICADOR]
Texto
Aqui
[IDENTIFICADOR];
Para utilizar label e placeholder customizados, basta envolver o código acima em uma função e utilizar as variáveis (usadas como parâmetros) para customizar esses valores.
Exemplo:
function buildCodeHtml($name, $model, $marca, $stock) {
$html = <<<HTML
<div class="form-group">
<label>$name</label>
<input type="text" class="form-control" placeholder="$name" required maxlength="30" name="prod-name">
</div>
<div class="form-group">
<label>$model</label>
<input type="text" class="form-control" placeholder="$model" required maxlength="30" name="prod-model">
</div>
<div class="form-group">
<label>$marca</label>
<input type="text" class="form-control" placeholder="$marca" required maxlength="30" name="prod-marca">
</div>
<div class="form-group">
<label>$stock</label>
<input type="text" class="form-control" placeholder="$stock" required maxlength="20" pattern="[0-9]{1,20}" name="prod-stock">
</div>
HTML;
return $html;
}
/* Imprime */
echo buildCodeHtml("Nome 2", "Modelo 2", "Marca 2", 123456);
echo buildCodeHtml("Nome 3", "Modelo 3", "Marca 3", 1);
Demonstração: https://ideone.com/mHpoEA
Alternativa robusta:
Com essa alternativa você consegue ter mais autonomia na edição dos campos (label, placeholder e name), porém o código fica maior.
Nesta opção, fiz uma modificação básica, ao invés de informar o nome do campo e placeholder de forma idêntica, resolvi passar essas informações como array, assim você tem mais liberdade.
function buildCodeHtml($name, $model, $marca, $stock) {
$html = <<<HTML
<div class="form-group">
<label>{$name['label']}</label>
<input type="text" class="form-control" placeholder="{$name['placeholder']}" required maxlength="30" name="{$name['name']}">
</div>
<div class="form-group">
<label>{$model['label']}</label>
<input type="text" class="form-control" placeholder="{$model['placeholder']}" required maxlength="30" name="{$model['name']}">
</div>
<div class="form-group">
<label>{$marca['label']}</label>
<input type="text" class="form-control" placeholder="{$marca['placeholder']}" required maxlength="30" name="{$marca['name']}">
</div>
<div class="form-group">
<label>{$stock['label']}</label>
<input type="text" class="form-control" placeholder="{$stock['placeholder']}" required maxlength="20" pattern="[0-9]{1,20}" name="{$stock['name']}">
</div>
HTML;
return $html;
}
/* Imprime */
echo buildCodeHtml([
"name" => "name2",
"label" => "Label Nome - 2",
"placeholder" => "Placeholder Nome - 2",
], [
"name" => "model2",
"label" => "Label Model - 2",
"placeholder" => "Placeholder Model - 2",
], [
"name" => "marca2",
"label" => "Label Marca - 2",
"placeholder" => "Placeholder Marca - 2",
], [
"name" => "stock2",
"label" => "Label Stock - 2",
"placeholder" => "Placeholder Stock - 2",
]);
Demonstração: https://ideone.com/tLreO9
Caso você não queira trabalhar aplicando o HTML via JavaScript, é uma boa forma.
No caso da tag template
, você precisa adicionar uma função em JavaScript para adicionar o código em determinado lugar em seu documento HTML, pode parecer complicado, mas é bastante simples.
Exemplo:
/* Captura e armazena o conteúdo do template na variável */
const template = document.querySelector("#meu-template");
/* Adiciona evento de clique no Botão */
document.querySelector("button").addEventListener("click", _ => {
for(let i = 0; i < 5; i++) {
/* Clona o template. Isso fará com que possa inclui-lo no documento inúmeras vezes */
let fragment = document.importNode(template.content, true);
/* Adiciona o fragmento na div #codigo */
document.querySelector("#codigo").appendChild( fragment )
}
});
<template id="meu-template">
<div class="form-group">
<label>Nome de produto</label>
<input type="text" class="form-control" placeholder="Nome" required maxlength="30" name="prod-name">
</div>
<div class="form-group">
<label>Modelo</label>
<input type="text" class="form-control" placeholder="Modelo" required maxlength="30" name="prod-model">
</div>
<div class="form-group">
<label>Marca</label>
<input type="text" class="form-control" placeholder="Marca" required maxlength="30" name="prod-marca">
</div>
<div class="form-group">
<label>Unidades disponíveis</label>
<input type="text" class="form-control" placeholder="Unidades" required maxlength="20" pattern="[0-9]{1,20}" name="prod-stock">
</div>
<hr />
</template>
<div id="codigo"></div>
<button>Adicionar código</button>