HTML5与JQuery.Mobile（六）

<div data-role="fieldcontain">
<label for="username">姓名：</label>
<input type="text" id="username"/>
</div>
<div data-role="fieldcontain">
<label for="tel">电话号码：</label>
<input type="tel" id="tel"/>
</div>
<div data-role="fieldcontain">
<label for="email">email：</label>
<input type="email" id="email"/>
</div>
<div data-role="fieldcontain">
<label for="website">网站：</label>
<input type="url" id="website"/>
</div>
<div data-role="fieldcontain">
<label for="search">搜索：</label>
<input type="search" id="search"/>
</div>

<div data-role="controlgroup">
<div data-role="fieldcontain">
<legend>HTML5</legend>
<label for="html5">是否喜欢HTML5</label>
<input type="checkbox" id="html5"/>
</div>
</div>
<div data-role="controlgroup">
<legend>兴趣爱好：</legend>
<input type="checkbox" id="basketball"/>
<label for="basketball">是否喜欢篮球</label>
<input type="checkbox" id="football"/>
<label for="football">是否喜欢足球</label>
<input type="checkbox" id="pingpang"/>
<label for="pingpang">是否喜欢乒乓球</label>
</div>

    <div data-role="controlgroup" data-type="horizontal">
      <legend>居住城市：</legend>
      <input type="radio" id="beijing" value="beijing" name="city" checked="true"/>
      <label for="beijing">北京</label>
      <input type="radio" id="shanghai" value="shanghai" name="city"/>
      <label for="shanghai">上海</label>
      <input type="radio" id="guangzhou" value="guangzhou" name="city"/>
      <label for="guangzhou">广州</label>
    </div>

    <div data-role="fieldcontain" >
      <label for="travel">选择旅游城市：</label>
      <select id="travel" name="travel">
        <option value="tbeijing">北京</option>
        <option value="tshanghai">上海</option>
        <option value="tguangzhou">广州</option>
      </select>
    </div>