[Visualforce] テキストエリア入力欄の表示

Visualforceページにて、テキストエリアの入力欄を表示する際に、大きさを指定したりした時の表示のされ方などのまとめ。

apex:inputField

一番基本となる、apex:inputFieldの場合。
valueで指定した項目の型を読み取って自動で入力フォームのタイプを変更してくれるので、普通はこちらを使っておけばよい。

ただし、テキストエリア項目の場合は以下のように入力欄がすごく小さい。

<apex:inputField value="{!項目名}" required="true" label="inputFieldサンプル" />

なので、サイズを調整したいが、apex:inputFieldにはrowsやcolsなどのオプションがない。
よって、スタイスを直接書いてやるしかなさそう。

<apex:inputField value="{!項目名}" required="true" style="width:315px; height:70px;" label="inputFieldサンプル サイズ変更" />

これで、サイズを任意に変更しつつ必須表示にも対応。

エラー

apex:inputFieldを使った場合はそのままエラーの表示にも対応している。

apex:inputtextArea

apex:inputtextAreaを利用すると、rows colsでのサイズ指定が可能。
apex:outputlabelも使うと標準の表示を同じようにラベルを配置してやれる。

<apex:pageblocksectionItem>
  <apex:outputlabel value = "outputlabelサンプル"/>
  <apex:inputtextArea value = "{!項目名}" cols = "50" rows = "5" required="true" />
</apex:pageblocksectionItem>

しかし、この場合だと required="true" を指定していても赤い線が表示されない。
その赤い線を再現してやるには、divでクラスをつけて構造を再現してやる必要があるよう。

<apex:pageBlockSectionItem>
  <apex:outputlabel value = "outputlabelサンプル 必須再現"/>
  <apex:outputPanel>
      <div class="requiredInput">
      <div class="requiredBlock"></div>
      <apex:inputtextArea value="{!項目名}" cols = "50" rows = "5" required="true" />
  </div>
  </apex:outputPanel>
</apex:pageBlockSectionItem>