西畑一馬のjQuery Mobileデザイン入門 ― 第4回

jQuery Mobileによる問い合わせフォームの作成 (5/5)

送信・キャンセルボタンの装飾

　最後に、フォームの送信・キャンセルボタンを作ってフォームを完成させましょう。jQuery Mobileではスマートフォンで操作しやすいボタンのUIが用意されており、以下のように記述するだけで表示できます。

■サンプル6[HTML]

<input type="button" value="キャンセル">
<input type="submit" value="送信">

サンプル6をスマートフォンで開くと、以下のように最適化されたボタンが表示されます。

jQuery Mobileにより最適化されたボタン

　第2回で紹介したdata-theme属性を指定することでフォームのデザインテーマも変更できます（ただし、α4.1では不具合のためかデザインテーマが反映されません）。サンプル7はテーマ「b」を適用した状態です。

■サンプル7[HTML]

<input type="button" value="キャンセル" data-theme="b">
<input type="submit" value="送信" data-theme="b">

デザインテーマ「b」を適用させたボタン

　jQuery Mobileのボタンは通常、ページ幅いっぱいに表示されますが、data-inline属性に「true」を指定することで文字数にフィットしたボタンにもできます（サンプル8）。

■サンプル8[HTML]

<input type="button" value="キャンセル" data-theme="b" data-inline="true">
<input type="submit" value="送信" data-theme="b" data-inline="true">

文字数にフィットさせたボタン

　input要素にdata-icon属性を追加すると、それぞれのボタンにjQuery Mobileが用意したアイコンも表示できます。今回はサンプル9のように、キャンセルボタンに×アイコンを、送信ボタンに右矢印のアイコンを付けました。

■サンプル9[HTML]

<input type="button" value="キャンセル" data-theme="b" data-icon="delete" data-inline="true">
<input type="submit" value="送信" data-theme="b" data-icon="arrow-r" data-inline="true">

アイコンを追加したボタン

　以上で、お問い合わせページに必要なフォーム部品が揃いました。最後に今回紹介したフォーム部品をまとめて作ったページを確認しましょう。

■サンプル10[HTML]

<div data-role="page" id="contact" data-theme="b" data-back-btn-text="戻る">
  <div data-role="header">
    <h1>to-R</h1>
  </div>
  <div data-role="content">
    <h2 class="h1">お問い合わせ</h2>
    <form action="form.php" method="post">
      <div data-role="fieldcontain"> 
        <label for="name">名前</label>
        <input type="text" id="name">
      </div>
      <div data-role="fieldcontain"> 
        <label for="gender">性別</label> 
        <select name="gender" id="gender" data-role="slider"> 
          <option value="男性">男性</option>
          <option value="女性">女性</option>
        </select>
      </div>
      <div data-role="fieldcontain"> 
        <fieldset data-role="controlgroup"> 
          <legend>お問い合わせ種別</legend> 
          <input type="checkbox" name="type1" id="type1" /> 
          <label for="type1">HP新規作成</label> 
          <input type="checkbox" name="type2" id="type2" /> 
          <label for="type2">HPリニューアル</label> 
          <input type="checkbox" name="type2" id="type3" /> 
          <label for="type3">システム開発</label> 
          <input type="checkbox" name="type4" id="type4" /> 
          <label for="type4">コンサルティング</label> 
        </fieldset>
      </div>
      <div data-role="fieldcontain"> 
        <label for="textarea">お問い合わせ内容</label> 
        <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
      </div>
      <input type="submit" value="キャンセル" data-theme="b" data-icon="delete" data-inline="true">
      <input type="submit" value="送信" data-theme="b" data-icon="arrow-r" data-inline="true">
    </form>
  </div>
  <div data-role="footer">
    <h4>&copy; 2011 to-R</h4>
  </div>
</div>

　これまで見てきたように、jQueryではマークアップの規則さえ覚えてしまえばスマートフォンに最適化されたサイトを簡単に作成できます。次回は、サンプル作成で紹介したjQuery Mobileの機能と、まだ触れていないそのほかの機能をまとめて紹介します。

著者：西畑一馬（にしはた かずま）

to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWeb制作にかかわるさまざまな情報を発信している。
主な著書に「Web制作の現場で使う jQueryデザイン入門」（アスキー・メディアワークス刊）がある。