[PHP] Twitter bootstrapのform-horizontalを楽に使う関数

Twitter bootstrapはTwitter社が提供する大変便利なCSSフレームワークです。大変人気のあるフレームワークですので、利用している方も多いのではないでしょうか。

その中に、ラベルと入力欄が横に並んだform-horizontalというスタイルがあります。

自分で設定するのは大変面倒なスタイルを簡単に実現してくれる素晴らしいものなのですが、いかんせんhtmlタグの量が多くなり、一つ一つ書いていくのは面倒です。

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Password">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> Remember me
      </label>
      <button type="submit" class="btn">Sign in</button>
    </div>
  </div>
</form>

ラベル名と入力欄を囲むhtmlは同じコードの繰り返しなのですから、その部分を出力する関数を用意すれば、form-horizontalをさらに楽に使うことができそうです。そこで以下の関数を用意しました。

function twitter_bootstrap_form_horizontal( $label=null, $form=null )
{
  if( !is_array($label) )
    return "<div class='control-group'>\n<label class='control-label'>{$label}</label>\n<div class='controls'>\n{$form}\n</div>\n</div>";
  else{
    foreach( $label as $value )
      if( isset($value[0]) && isset($value[1]) )
        $forms[] = "<div class='control-group'>\n<label class='control-label'>{$value[0]}</label>\n<div class='controls'>\n{$value[1]}\n</div>\n</div>";
    
    return isset($forms) ? implode("\n", $forms):null;
  }
}

使い方は2通りです。

ラベルとフォームを単体で出力する

$form = twitter_bootstrap_form_horizontal( "名前", "<input type='text' name='namae'>" );

<div class="control-group">
  <label class="control-label" for="inputPassword">名前</label>
  <div class="controls">
    <input type="text" name='namae'>
  </div>
</div>

まとめて出力する

$forms = array(
  array("名前", "<input type='text' name='namae'>"),
  array("住所", "<input type='text' name='address'>"),
  array("Eメール", "<input type='text' name='email'>"),
  array("パスワード", "<input type='password' name='password'>"),
);
$form_forizontal_inner = twitter_bootstrap_form_horizontal( $forms );

echo "<form class='form-horizontal'>".$form_forizontal_inner.</form>";

<div class="control-group">
  <label class="control-label" for="inputPassword">名前</label>
  <div class="controls">
    <input type="text" name='namae'>
  </div>
</div>
<div class="control-group">
  <label class="control-label" for="inputPassword">住所</label>
  <div class="controls">
    <input type="text" name='address'>
  </div>
</div>
<div class="control-group">
  <label class="control-label" for="inputPassword">Eメール</label>
  <div class="controls">
    <input type="text" name='email'>
  </div>
</div>
<div class="control-group">
  <label class="control-label" for="inputPassword">パスワード</label>
  <div class="controls">
    <input type="password" name='pass'>
  </div>
</div>

あとはこれを、<form class='form-horizontal'></form>で囲んでプリントすればいいわけです。

たいしたものではありませんが、あると大変便利です。