HTML5与JQuery.Mobile（六）

本小节的内容基本上与jQuery Mobile关系不大，主要是一些HTML5的知识：

input输入可以有多种type，并且我们在移动设备上可以有不同表现，例如点击电话号码输入框(type=tel)将弹出拨号输入框；而搜索框将显示搜索按钮和清除按钮：

<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>

对于checkbox，我们既可以单个使用，也可以分组使用：

    <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>

对于单选按钮，基本用法同checkbox：

     <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>