Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery Mobile逆引きリファレンス

jQuery Mobile逆引きリファレンス

jQuery Mobileで入力フォームを設置するには?

2014年6月12日

jQuery Mobileでフォームを設置する際の、よりjQuery Mobileらしいフォームを実装するために知っておきたいポイントと特性方法を説明する。

  • このエントリーをはてなブックマークに追加

jQuery Mobileとは?

 jQuery Mobileは、jQueryを拡張するライブラリ(プラグイン)の一種で、名前のとおり、スマホ/タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス: jQuery Mobileを利用するには?」を参照してください。

 jQuery Mobileでフォームを設置するのはカンタン、標準的な<form>要素でフォームを定義するだけです。それだけであとはjQuery Mobileが適切なウィジェットを適用し、ネイティブアプリ風の見た目に整形してくれるわけです。

 もっとも、何も意識しなくてよいというわけではなく、よりjQuery Mobileらしいフォームを実装するために知っておきたいポイント、特性があります。本稿では、それらの点について、具体的なサンプルを示しながら押さえていきます。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
  href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js">
</script>
</head>
<body>
<div data-role="page">
  <div data-role="header">
    <h1>jQuery Mobile TIPS</h1>
  </div>
  <div role="main" class="ui-content">
    <!--(1)フォームの内容はAjaxで処理される-->
    <form method="POST" action="">
      <!--(2)ラベルとフォーム要素をグループ化-->
      <div class="ui-field-contain">
        <label for="entry_comment">コメント:</label>
        <input id="entry_comment" name="entry_comment" type="text" />
      </div>
      <fieldset class="ui-grid-a">
        <div class="ui-block-a"><input type="submit" value="送信" /></div>
        <div class="ui-block-b"><input type="reset" value="クリア" /></div>
      </fieldset>
    </form>
  </div>
  <div data-role="footer">
    <h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
  </div>
</div>
</body>
</html>
jQuery Mobileで作成したコメント入力フォーム(form.html)
ネイティブアプリライクな入力フォーム

 ポイントとなるのは、以下の点です。

(1)フォームの送信はAjax通信がデフォルト

 ハイパーリンクの場合と同じく、フォームの内容はデフォルトでAjax(非同期)送信されます。もしも通常の同期通信に戻したい場合には、<form>要素に対して「data-ajax="false"」属性を付与してください。目的として合致しているならば、target属性を指定してもAjax通信は無効になります。

 jQuery MobileにおけるAjax通信の仕組みについては、別稿「jQuery Mobileページでハイパーリンクを設置するには?」も併せて参照してください。

(2)ラベルとフォーム要素はコンテナーでまとめる

 ラベルと対応するフォーム要素は、<div class="ui-field-contain">~</div>(=「コンテナー要素」、または「フィールドコンテナー」と言います)で括るのが基本です*1。これによって、ラベルとフォーム要素が画面の横幅に応じて、適切な配置を採るようになります。具体的には次の画面例のように、横幅が狭い場合はラベルとフォーム要素を上下に、広い場合には左右に並べます。

画面幅によって並びが変化(上:縦置きの場合は上下に、下:横置きの場合は左右に)
  • *1 jQuery Mobile 1.3以前では、<div data-role="fieldcontain">~</div>を利用していました。1.4以降では非推奨となっています。

(3)透かし文字でラベルの代替に

 HTML5(jQuery Mobileの機能ではありません!)のplaceholder属性を利用することで、テキストボックスの中に透かし文字を表示できるようになります。ラベルの代わりに用いることで、限られた画面領域を有効に用いることができます。

 以下は、上のリストの太字部分を透かし文字で置き換えた例です。

HTML
<div class="ui-field-contain ui-hide-label">
  <label for="entry_comment">コメント:</label>
  <input id="entry_comment" name="entry_comment" type="text"
    placeholder="サイトへのご意見、感想をお願いします。" />
</div>
透かし文字を設置した場合(form.html)
ラベルの代わりに透かし文字を表示

 ただし、placeholder属性を利用している場合にも、ラベルを完全に除去してしまうのは良いことではありません。というのも、スクリーンリーダーなどの読み上げ環境で、フォーム要素を識別する手がかりが失われてしまうからです。

 そこで「ラベルを設置だけしておいて、ページ上は非表示にする」という手法が用いられます。これには、コンテナー要素に対して「class="ui-hide-label"」属性を指定します。

 ラベル要素に対して「class="ui-hidden-accessible"」属性を付与する方法もありますが、この場合は、ラベル領域が単純に詰められ、テキストボックスはそのままのサイズとなります(上の例では、テキストボックスの領域はページいっぱいに広がります)。微妙に結果が異なりますので、用途に応じて使い分けが必要となるでしょう。

HTML
<label for="entry_comment" class="ui-hidden-accessible">コメント:</label>
「class="ui-hidden-accessible"」属性を利用した場合
ラベル領域の分だけ空白ができる

※以下では、本稿の前後を合わせて5回分(第20回~第24回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery Mobile逆引きリファレンス
20. Flipswitchウィジェットでオン/オフ選択のためのフリップスイッチを作成するには?

オン/オフに特化した選択ボタンを設置するには、CheckboxradioウィジェットよりもFlipswitchウィジェットが便利。その基本的な使い方を解説する。

jQuery Mobile逆引きリファレンス
21. Selectmenuウィジェットで選択メニューを作成するには?

複数の選択肢から1つもしくは複数をページ閲覧者に選択させたいときに、通常の「ラジオボタン/チェックボックス」ではなく、タップして初めて選択オプションが表示される「選択メニュー」を使いたい場合がある。これを手軽に作成する方法を説明する。

jQuery Mobile逆引きリファレンス
22. 【現在、表示中】≫ jQuery Mobileで入力フォームを設置するには?

jQuery Mobileでフォームを設置する際の、よりjQuery Mobileらしいフォームを実装するために知っておきたいポイントと特性方法を説明する。

jQuery Mobile逆引きリファレンス
23. Textinputウィジェットでテキスト入力ボックスを設置するには?

jQuery Mobileでテキスト入力ボックスを設置するのは通常のフォームの場合と変わらない。それだけで角丸やシャドウ効果の効いた、ネイティブアプリ・ライクなテキストボックスへと整形してくれる。その内容を解説する。

jQuery Mobile逆引きリファレンス
24. ListViewウィジェットで、ネイティブアプリ・ライクなリストビューを作成するには?

<ul>/<li>要素や<ol>/<li>要素をネイティブアプリで見かけるようなリッチなリストに整形できるListViewウィジェットの基本的な使い方を解説。

サイトからのお知らせ

Twitterでつぶやこう!