How to insert html inside form element div I want to enhance the login form fields with icons from Font Awesome. For this I need to add some html inside the div of the name and pass fields (to be able to position accurately with css). The html part is for example something like 

&lt;i class="icon-lock icon-large"&gt;&lt;/i&gt;


I tried using #suffix with hook_form_alter, but then the html is added after the div. I also tried with a user-login.tpl.php, but it seems you can only render individual form elements with drupal_render, for example drupal_render($form['name']); But this also outputs the entire div.

What I want to end up with is something like this:

&lt;div class="form-item form-type-password form-item-pass"&gt;
  &lt;input id="edit-pass" class="form-text required" type="password" maxlength="128" size="60" name="pass" placeholder="Password"&gt;
  &lt;i class="icon-lock icon-large"&gt;&lt;/i&gt;
&lt;/div&gt;


I'm using Drupal 7.
Assuming you don't need the input wrapper. Just remove it:

$form['pass'] = array(
        '#type'             =&gt; 'password',
        '#title_display'    =&gt; 'none',
        '#maxlength'        =&gt; 128,
        '#size'             =&gt; 60,
        '#required'         =&gt; TRUE,
        '#theme_wrappers'   =&gt; array(), // remove the wrapper
        '#prefix'           =&gt; '',
        '#suffix'           =&gt; '&lt;i class="icon-lock icon-large"&gt;&lt;/i&gt;',
        '#attributes'       =&gt; array(
                                'placeholder'   =&gt; t('Password')
                            ),
        );


the icon will be placed after the input:

&lt;input type="password" maxlength="128" size="60" name="pass" id="edit-pass" placeholder="Password" class="inputbox form-text required"&gt;
&lt;i class="icon-lock icon-large"&gt;&lt;/i&gt;


But if you need that div wrapper, you can just rearrange his position:

$form['pass'] = array(
        '#type'             =&gt; 'password',
        '#title_display'    =&gt; 'none',
        '#maxlength'        =&gt; 128,
        '#size'             =&gt; 60,
        '#required'         =&gt; TRUE,
        '#theme_wrappers'   =&gt; array(), // remove the wrapper
        '#prefix'           =&gt; '&lt;div class="form-item form-type-password form-item-pass"&gt;',
        '#suffix'           =&gt; '&lt;i class="icon-lock icon-large"&gt;&lt;/i&gt;&lt;/div&gt;',
        '#attributes'       =&gt; array(
                                'placeholder'   =&gt; t('Password')
                            ),
        );


Now the output will be exactly as you wrote:

&lt;div class="form-item form-type-password form-item-pass"&gt;
    &lt;input type="password" maxlength="128" size="60" name="pass" id="edit-pass" placeholder="Password" class="form-text required"&gt;
    &lt;i class="icon-lock icon-large"&gt;&lt;/i&gt;
&lt;/div&gt;