How to produce repetitive HTML form fields? - php

Question

I am using PHP to create a web application where user has to submit a form. Currently I am using simple html to render out the form just like given below.
<?php ?>
<form class='form-horizontal' method='post'>
<div class='form-group mail-right-element'>
<label class='col-sm-12 control-label mail-form-single-line-label' for='name 1'>Label 1</label>"
<div class='col-sm-12'>
<input name='name1' class='form-control validate' maxlength='100' placeholder='placeholder' value='value1'/>");
</div>
</div>
..
..
..// Some 20+ similar form fields
..
<div class='form-group mail-right-element'>
<label class='col-sm-12 control-label mail-form-single-line-label' for='name 20'>Label 20</label>"
<div class='col-sm-12'>
<input name='name20' class='form-control validate' maxlength='100' placeholder='placeholder' value='value20'/>");
</div>
</div>
</form>
This looks really messy and hardly maintainable. So I went the php way as given below.
<?php
function GetFormRowHtml($label, $name, $maxlength, $placeholder, $value)
{
return "<div class='form-group mail-right-element'>"
. "<label class='col-sm-12 control-label mail-form-single-line-label' for='$name'>$label</label>"
. "<div class='col-sm-12'>"
. "<input name='$name' class='form-control validate' maxlength='$maxlength' placeholder='$placeholder' value='$value'/>"
. "</div></div>";
}
?>
<form class='form-horizontal' method='post'>
<?php
echo GetFormRowHtml('Label1', 'Name1', 'abc', 'abc');
echo GetFormRowHtml('Label2', 'Name2', 'abc', 'abc');
echo GetFormRowHtml('Label3', 'Name3', 'abc', 'abc');
?>
</form>
Is there any better approach to do this? I've read that having html in php is a really bad design. So should I go with the html way or continue using this approach? What are the disadvantages of using above method?

Answer 1

You could have the input as a separate PHP file that you'd use for including:
input-template.php
<div class='form-group mail-right-element'>
<label class='col-sm-12 control-label mail-form-single-line-label' for='<?= $name ?>'><?= $label ?></label>"
<div class='col-sm-12'>
<input id='<?= $name ?>' name='<?= $name ?>' class='form-control validate' maxlength='100' placeholder='<?= $placeholder ?>' value='<?= $value ?>'/>");
</div>
</div>
And in your HTML:
<form class='form-horizontal' method='post'>
<?php
$values = [
[ "Label 1", "Name 1", "abc" , "abc" ],
[ "Label 2", "Name 2", "abc" , "abc" ],
[ "Label 3", "Name 3", "abc" , "abc" ],
[ "Label 4", "Name 4", "abc" , "abc" ]
];
foreach ($values as $array) {
list($label,$name,$placeholder,$value) = $array;
include "input-template.php"
}
?>
</form>
The reason I personally Opt for this style is that IDEs generally can analyze the HTML in the template and help with formatting and detecting of errors while string HTML would usually not be treated that way.

Answer 2

The best thing to do when looking at a common problem like this is to look at the some of the PHP frameworks and see how they handle it.
Looking at Laravel or Yii they abstract any inputs or labels into functions which generate the markup. So you're on the right track. The main issue with your code above is that you are combining layout with the label / field markup. Inherently this isn't' a massive issue but doesn't give your code much flexibility.
Markup should be moved into its own partial file so it's easy to maintain, form php functions should be more explicit generally.

Answer 3

This is my approach ...
function GetFormRowHtml($label, $name, $maxlength, $placeholder, $value)
{
/**
* #var array
* Grouping all searches and replaces in one array
*/
$sar = [
'{label}' => $label,
'{name}' => $name,
'{maxlength}' => $maxlength,
'{placeholder}' => $placeholder,
'{value}' => $value
];
/**
* #var $elementTemplate
* Template for a row
*/
$elementTemplate = "
<div class='form-group mail-right-element'>
<label class='col-sm-12 control-label mail-form-single-line-label' for='{name}'>{label}</label>
<div class='col-sm-12'>
<input name='{name}' class='form-control validate' maxlength='{maxlength}' placeholder='{placeholder}' value='{value}'/>
</div>
</div>
";
return str_replace(array_keys($sar), array_values($sar), $elementTemplate);
}
?>
<form class='form-horizontal' method='post'>
<?php
echo GetFormRowHtml('Label1', 'Name1', 'abc', 'abc');
echo GetFormRowHtml('Label2', 'Name2', 'abc', 'abc');
echo GetFormRowHtml('Label3', 'Name3', 'abc', 'abc');
?>
</form>
The approach from apokryfos is another good solution.