このページの本文へ

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

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

2011年06月28日 13時00分更新

西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

 jQuery Mobileによるスマートフォンサイトの制作方法を解説する本連載。前回に続き、簡単な会社案内サイトを作成ながらjQuery Mobileの基本を学びましょう。今回は、jQuery MobileのフォームUIを使って、以下のような「お問い合わせ」ページ(#contact)を作成し、会社案内サイトを完成させます。

<画像>sample01.jpg
作成するサンプル。jQuery Mobileを利用するとスマートフォンに最適化されたフォームを手軽に作成できる

フォームUIの課題とjQuery Mobileによる解決

 スマートフォンのブラウザーに標準で用意されているフォーム部品はどれもサイズが小さく、そのままでは指による操作に適しません。スマートフォンサイトの制作ではフォームをスマートフォンに最適化することが重要です。

 以下は、jQuery Mobileを使わずに作成したお問い合わせページをiPhone/Androidで表示したものです。

<画像>02.jpg,03.png
iPhone(左)の標準フォームUIとAndroid(右)の標準フォームUI

 フォームUIの中でも、特にチェックボックスやラジオボタンはサイズが非常に小さく、タップ操作で正しく選択するのは困難です。しかもiPhoneの場合はlabel要素に対応していないので、label要素内のテキストをタップしてもチェックボックスやラジオボタンが選択されません(Androidはlabel要素に対応しています)。

 jQuery Mobileを利用することで、使いづらいブラウザー標準のフォームUIをスマートフォンに最適化された使いやすいフォームUIに変更できます。

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング