2/13 jQuery Mobileで問い合わせフォームの作成
問い合わせフォームの作成
<div data-role="content"> <h2 class="h1">お問い合わせ</h2> <form action="form.php" method="post"> (フォームの内容) </form>
ページの見出し(h2要素)とフォームの間には不自然な余白があり、入力フォームの背景色がやや暗いのでCSSで調整する。
/*入力フォームの背景を調整*/ textarea.ui-body-b,input.ui-body-b{ background-color:white; } /*見出しとフォーム部品の間の余白を調整*/ .ui-field-contain:first-child{ padding-top:0; }
名前
- フォーム部品は、「data-role="fieldcontain"」のDIVタグで囲う。
<div data-role="fieldcontain"> <label for="name">名前</label> <input type="text" id="name"> </div>
お問い合わせ内容
<div data-role="fieldcontain"> <label for="comment">お問い合わせ内容</label> <textarea id="comment"></textarea> </div>
性別
- フリップスイッチ
<div data-role="fieldcontain"> <label for="gender">性別</label> <select name="gender" id="gender" data-role="slider" data-theme="b"> <option value="男性">男性</option> <option value="女性">女性</option> </select> </div>
<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>性別</legend> <input type="radio" name="radio-choice-1" id="radio-choice-1" value="男性" > <label for="radio-choice-1">男性</label> <input type="radio" name="radio-choice-1" id="radio-choice-2" value="女性" checked="checked"/> <label for="radio-choice-2">女性</label> </fieldset> </div>
お問い合わせ種別
<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>お問い合わせ種別</legend> <input type="checkbox" name="type1" id="type1" value="HTML5+CSS3"> <label for="type1">HTML5+CSS3</label> <input type="checkbox" name="type2" id="type2" value="WordPress+CMS"> <label for="type2">WordPress+CMS</label> <input type="checkbox" name="type3" id="type3" value="PHP+MySQL"> <label for="type3">PHP+MySQL</label> <input type="checkbox" name="type4" id="type4" value="SEO"> <label for="type4">SEO</label> </fieldset> </div>
送信・キャンセルボタン
<form action="form.php" method="post"> <div data-role="fieldcontain"> <input type="submit" value="キャンセル" data-theme="b" data-inline="true"> <input type="submit" value="送信" data-theme="b" data-inline="true"> </form>