You can use a Heredoc to store a snippet in a variable. With it you can save multiple lines in an easy way.
Just use:
<<<[IDENTIFICADOR]
Texto
Aqui
[IDENTIFICADOR];
To use custom label and placeholder , simply wrap the above code in a function and use the variables (used as parameters) to customize those values.
Example:
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);
Demo: link
Robust alternative:
With this alternative you can have more autonomy in editing the fields ( label , placeholder and name ), however the code gets bigger.
In this option, I made a basic modification, instead of informing the field name and placeholder in an identical way, I decided to pass this information as array , so you have more freedom.
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",
]);
Demo: link
If you do not want to work by applying HTML via JavaScript , it's a good way.
In the case of the template tag, you need to add a function in JavaScript to add the code somewhere in your HTML document, it may seem complicated, but it's quite simple.
Example:
/* 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>
