jQuery Mobile 1.0正式版でフォームを作ってみました。サイト作成には必ずといって言いほど、作成するページなので覚えておいて損はないです。
sample：jQuery Mobileでフォーム作成
※実際のコードは下記になります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.1"> <title>jQuery Mobileのフォームサンプル:美Deブ</title> <!-- jQuery/jQuery Mobileのファイルを読み込む --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <!-- フォームの設置 ページ --> <div id="home" data-role="page"> <div data-role="header"> <h1>jQuery Mobileでフォーム設置</h1> </div> <div data-role="content"> <div data-role="fieldcontain"> <form action="#" method="post"> <label for="name">テキストインプット:</label> <input type="text" name="name" id="name" value="" /> <label for="password">パスワード:</label> <input type="password" name="password" id="password" value="" /> <label for="textarea">テキストエリア:</label> <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea> <label for="slider">インプットスライダー:</label> <input type="range" name="slider" id="slider" value="0" min="0" max="100" /> <label for="slider">選択:</label> <select name="slider" id="slider" data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select> <fieldset data-role="controlgroup"> <legend>ラジオボタン:</legend> <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" /> <label for="radio-choice-1">A</label> <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" /> <label for="radio-choice-2">B</label> <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" /> <label for="radio-choice-3">C</label> <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" /> <label for="radio-choice-4">D</label> </fieldset> <fieldset data-role="controlgroup"> <legend>チェックボックス:</legend> <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" /> <label for="checkbox-1">チェック-1</label> <input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" /> <label for="checkbox-2">チェック-2</label> <input type="checkbox" name="checkbox-3" id="checkbox-3" class="custom" /> <label for="checkbox-3">チェック-3</label> <input type="checkbox" name="checkbox-4" id="checkbox-4" class="custom" /> <label for="checkbox-4">チェック-4</label> </fieldset> <label for="select-choice-1" class="select">セレクトメニュー:</label> <select name="select-choice-1" id="select-choice-1"> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> <option value="d">D</option> </select> <input type="button" value="キャンセル" data-icon="delete" data-inline="true"> <input type="submit" value="送信" data-icon="arrow-r" data-inline="true"> </form> </div> </div> <div data-role="footer"> <h4>フッター</h4> </div> </div> </body> </html>
関連記事：
