Drupal 7 - input form readonly and apply style

Question

I need to apply style and read-only property to an input element of a drupal form. I coded the following:

$form['precio'] = array(
  '#type' => 'textfield',
  '#title' => t('Precio'),
  '#default_value' => ''.$precio,
  '#size' => 20,
  '#required' => TRUE,
  '#attributes' => array($inputAtributo => 1),
  '#description' => t('Modifica el precio '),
);

And at '#attributes' => array($inputAtributo => 1),

Before create form, I check if this input should be readonly and apply some style:

if ($tarifa !='' & $tarifa=='N')
$inputAtributo=" readonly style=\"background: none repeat scroll 0 0 #EAEAEA;\" ";
else
$inputAtributo = "";

This works, but I think it's not coded correctly

The html code shows the following:

<input id="edit-precio" class="form-text required" type="text" maxlength="128" size="20" value="258" name="precio" ="1"="" style="background: none repeat scroll 0 0 #EAEAEA;" readonly="">

How I can do this better?

Slaphappy

As side note, the string passed to t() needs to be in English. – Palliate

Answer 1

#attributes must be an array of key-value-pairs.

so the array should look like

'#attributes' => array(
    'readonly'=>'readonly',
    'style'=>'background: none repeat scroll 0 0 #EAEAEA;'
);

Photoperiod

This works, but inline style is evil, class and css is better. – Commemorative

Agreed, but in certain tasks you may require inline styles. If you see pinterest.com all most all the div contain inline styles. – Photoperiod

Thanks! I used finally css class – Slaphappy

How could be possible to not place css inline and still be theme-agnostic? – Idolah

Answer 2

#attributes is not intented to be used with styles. You must provide an array with key and values reproducing html attributes. And class and css is better than adding style directly into html.

'#attributes' = array(
  'class' => array('readonly-input'),
  'readonly' => 'readonly',
)

If you want to add it in an if, you can do this:

if ($tarifa !='' & $tarifa=='N') {
  $form['precio']['#attributes']['class'][] = 'readonly-input';
  $form['precio']['#attributes']['readonly'] = 'readonly';
}

Note that readonly attribute has also "readonly" as value, so it's xhtml compliant.

Now add a css rule in your stylesheet:

.readonly-input { background: none repeat scroll 0 0 #EAEAEA; }

Commemorative

Answer 3

The other answers are correct. Instead of using readonly, I would rather use #disabled. Also, if the form field is read-only, or disabled, #required is not necessary, since the users cannot change the value.

$form['precio'] = array(
  '#type' => 'textfield',
  '#title' => t('Price'),
  '#default_value' => $precio,
  '#size' => 20,
  '#attributes' => array(
    'style'=>'background: none repeat scroll 0 0 #EAEAEA;'
  ),
  '#description' => t('Change the price'),
);

Instead of using a textfield, I would rather use a markup form field, if the value needs just to be shown, and not edited.

$form['precio'] = array(
  '#prefix' => '<span style="background: none repeat scroll 0 0 #EAEAEA">',
  '#suffix' => '</span>',
  '#markup' => t('<strong>Price:</strong> @price', array('@price' => $precio)),
);

Palliate

Hi, I prefer use readonly, because the input box is readonly, but I have another controls to modify them. – Slaphappy

Answer 4

To make our input field as read-only in drupal form, set the value TRUE to readonly attribute.

For example,

$user_name = variable_get('logined_user', 'guest_user');
$form['user_name'] = array(
    '#type' => 'textfield',
    '#title' => t('User Name'),
    '#required' => TRUE,
    '#default_value' => $user_name,
    '#description' => t('Logined user name'),
    '#attributes' => array(
        'readonly' => TRUE
    )
);

Oracle