I’d like to propose a small change to the default value of the layout property in CFormInputElement to add before and after text to input elements. The layout property would become:
public $layout="{label}\n{before}{input}{after}\n{hint}\n{error}";
The rendering would be:
<span class="before>beforeText</span><input /><span class="after">afterText</span>
(plus the label, hint and error of course)
before and after properties need to be defined and renderBefore and renderAfter methods are also needed.
/**
* @var string before text of this input
*/
public $before;
/**
* @var string after text of this input
*/
public $after;
public function renderBefore()
{
return $this->before===null ? '' : '<span class="before">'.$this->before.'</span>';
}
public function renderAfter()
{
return $this->after===null ? '' : '<span class="after">'.$this->after.'</span>';
}
and a change to the render method:
public function render()
{
if($this->type==='hidden')
return $this->renderInput();
$output=array(
'{label}'=>$this->renderLabel(),
'{before}'=>$this->renderBefore(),
'{input}'=>$this->renderInput(),
'{after}'=>$this->renderAfter(),
'{hint}'=>$this->renderHint(),
'{error}'=>$this->getParent()->showErrorSummary ? '' : $this->renderError(),
);
return strtr($this->layout,$output);
}
Use case for this change is to support currency, units, etc. of the value being entered. e.g.
<div class="row field_length">
<label for="Product_length" class="required">Length <span class="required">*</span></label>
<input name="Product[length]" id="Product_length" type="text" value="" /><span class="after">m</span>
</div>
The proposed change is backwards compatible.