fieldcontain
data-role=”fieldcontain”を指定した要素でフォーム部品を包むことができます。
data-role=”fieldcontain”内ではlabel要素でラベルを記述し対応するフォーム部品を記述します。
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>こうすることでブラウザの幅に応じて狭い場合はラベルの下にフォーム部品を、幅が広い場合はラベルの右にフォーム部品を配置します。
チェックボックスやラジオボンタンを配置する場合は、fieldset要素に対して設定を行ない、legend要素をラベルとして利用します。
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>参考URL
登録日 : 2012年10月24日 最終更新日 : 2016年12月19日