jQuery Mobile フォーム入力要素
jQuery Mobile テキスト入力ボックス
入力フィールドは標準の HTML 要素を通じてエンコードされ、jQuery Mobile はそれらにスタイルを追加して、モバイル デバイスでより魅力的に見えるようにし、使いやすくします。新しい HTML5 <input> タイプも使用できます:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>文本输入</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="demo_form.php">
<div class="ui-field-contain">
<label for="fullname">全名：</label>
<input type="text" name="fullname" id="fullname">
<label for="bday">生日：</label>
<input type="date" name="bday" id="bday">
<label for="email">E-mail:</label>
<input type="email" name="email" id="email" placeholder="你的电子邮箱..">
</div>
<input type="submit" data-inline="true" value="提交">
</form>
</div>
</div>
</body>
</html>
オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
ヒント: プレースホルダーを使用してください指定する入力フィールドの期待値を説明する短い説明:
<input placeholder="sometext">
テキストエリア
複数行のテキスト入力には、<textarea> を使用します。
注: テキストを入力すると、新しく追加された行に合わせてテキストフィールドのサイズが自動的に変更されます。
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>文本框</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="demoform.php">
<div class="ui-field-contain">
<label for="info">附加信息:</label>
<textarea name="addinfo" id="info"></textarea>
</div>
<input type="submit" data-inline="true" value="提交">
</form>
<p><b>注意：</b> 文本框会根据你的输入自动调整文本框的高度，你可以在以上文本框输入内容，查看效果。</p>
</div>
</div>
</body>
</html>
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
検索入力ボックス
type="search" タイプ入力ボックスは HTML5 の新機能です。入力検索用のテキストフィールドを定義します:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="main" class="ui-content">
<form method="post" action="demoform.asp">
<div class="ui-field-contain">
<label for="search">搜索：</label>
<input type="search" name="search" id="search" placeholder="搜索内容...">
</div>
<input type="submit" data-inline="true" value="提交">
</form>
</div>
</div>
</body>
</html>
オンラインインスタンスを表示するには、「インスタンスの実行」ボタンをクリックしてください
ラジオボタン
ユーザーの選択肢が限られている場合オプションを 1 つだけ選択する場合は、ラジオ ボタンを使用します。
一連のラジオ ボタンを作成するには、type="radio" の入力と対応するラベルを追加します。 <fieldset> 要素内でラジオ ボタンを囲みます。
