TABLEを使って入力フォームを作る

TABLEを使って入力フォームを作ってみる。

TABLEでレイアウトを行うのはちょっとカッコ悪い感じもするけど、まぁいいか。

1行に複数の入力項目を持つ表を作る

入力項目が多いフォームを、帳票っぽいレイアウトにしてみる。

こんなのを作ってみよう。

帳票っぽいフォーム

XPageのソース

データソースをXPageに貼り付けて、ソースコードでレイアウトをちょこちょこいじってみた。

  001: <?xml version='1.0' encoding='UTF-8'?>
  002: <xp:view xmlns:xp="http://www.ibm.com/xsp/core">
  003:   <xp:this.data>
  004:     <xp:dominoDocument var="document1" formName="Event" />
  005:   </xp:this.data>
  006:   <xp:this.resources>
  007:     <xp:styleSheet href="/mycss.css" />
  008:   </xp:this.resources>
  009:   <xp:table styleClass="inputFormTbl">
  010:     <th class="topMidashi" colspan="6">
  011:       <xp:label value="申請書" />
  012:     </th>
  013:     <xp:tr>
  014:       <th>
  015:         <xp:label id="eventDate_Label2" value="申請日:" for="eventDate2" />
  016:       </th>
  017:       <xp:td>
  018:         <xp:inputText id="eventDate2" value="#{document1.EventDate}">
  019:           <xp:dateTimeHelper id="dateTimeHelper4" />
  020:           <xp:this.converter>
  021:             <xp:convertDateTime dateStyle="short" type="date" />
  022:           </xp:this.converter>
  023:         </xp:inputText>
  024:       </xp:td>
  025:       <th>
  026:         <xp:label id="from_Label1" value="申請者:" for="from1" />
  027:       </th>
  028:       <xp:td>
  029:         <xp:inputText id="from1" value="#{document1.From}" />
  030:       </xp:td>
  031:       <th>
  032:         <xp:label id="label1" value="部署:" for="from1" />
  033:       </th>
  034:       <xp:td>
  035:         <xp:comboBox id="comboBox1" value="#{document1.Department}" />
  036:       </xp:td>
  037:     </xp:tr>
  038:     <xp:tr>
  039:       <th>
  040:         <xp:label id="label2" value="申請区分:" for="from1" />
  041:       </th>
  042:       <xp:td>
  043:         <xp:checkBoxGroup id="checkBoxGroup1" styleClass="myCheckBox">
  044:           <xp:selectItem itemLabel="新規" itemValue="1" />
  045:           <xp:selectItem itemLabel="変更" itemValue="2" />
  046:           <xp:selectItem itemLabel="削除" itemValue="3" />
  047:         </xp:checkBoxGroup>
  048:       </xp:td>
  049:     </xp:tr>
  050:     <xp:tr>
  051:       <th>
  052:         <xp:label id="subject_Label2" value="申請内容:" for="subject2" />
  053:       </th>
  054:       <xp:td colspan="5">
  055:         <xp:inputTextarea id="subject2" value="#{document1.Subject}" />
  056:       </xp:td>
  057:     </xp:tr>
  058:   </xp:table>
  059: </xp:view>
  

 

次にCSSは以下のように設定してみた。まだよくわかってない部分もあるので、もうちょっと修正が必要な感じ。

  table.inputFormTbl {
    border-collapse: collapse;
    border: 2px #000000 solid;
    margin: 0px;
    width: 800px;
    margin: 20px 0px 0px 20px;
  }
  table.inputFormTbl td {
    border-collapse: collapse;
    border: 1px #000000 solid;
    border-style:inset;
    padding: 2px;
  }
  table.inputFormTbl th.topMidashi {
    border-collapse: collapse;
    border: 1px #000000 solid;
    border-style:inset;
    padding: 2px;
    background-color: rgb(123,164,223);
    text-align: center;
    font-size: 12pt;
  }
  
  table.inputFormTbl th {
    border-collapse: collapse;
    border: 1px #000000 solid;
    border-style:inset;
    padding: 2px;
    background-color: #FFF8D0;
    text-align: center;
    width: 80px;
  }
  
  table.inputFormTbl input, select {
    width: 100px;
  }
  /*
  table.inputFormTbl select {
    width: 80%;
  }
  */
  
  table.inputFormTbl textarea {
    width: 80%;
    height: 100px;
    margin: 0px 0px 0px 10px;
  }
  
  fieldset.myCheckBox {
    //width: 150px;
  }
  table.myCheckBox input {
    width: 30px;
  }
  table.myCheckBox td {
    text-align: center;
  }
  fieldset.myCheckBox  {
    border: 0px;
  }