jQuery Mobile 表单

常见的表单控件类型
• 文本框
• 搜索框
• 单选框
• 复选框
• 选择菜单
• 滑动条
• 翻转切换开关

创建表单注意事项
1.<form> 元素必须设置 method 和 action 属性
2.每个表单元素必须设置唯一的 “id” 属性。该 id 在站点的页面中必须是唯一的
3.每个表单元素必须有一个标记（label）。请设置 label 的 for 属性来匹配元素的 id

代码：

<form method="post" action="#">
        <div data-role="fieldcontain">
            <label for="name">姓名:</label>
            <input type="text" id="name" name="name" placeholder="姓名" />

            <label for="like">介绍:</label>
            <textarea id="like" placeholder="请输入介绍.........."></textarea>

            <label for="search">搜索:</label>
            <input type="search" name="search" id="search" />

            <legend>Choose your like:</legend>
           <select data-inline="true" name="day" id="day">
                    <option value="" selected>请选择日期.....</option>
                    <option value="mon">星期一</option>
                    <option value="tue">星期二</option>
                    <option value="wed">星期三</option>
            </select>

            <fieldset data-role="controlgroup" data-type="horizontal">
                 <legend>Choose your gender:</legend>
                <label for="boy">boy:</label>
                <input type="radio" id="boy" name="sex" value="boy">
                <label for="gril">gril:</label>
                <input type="radio" checked id="gril" name="sex" value="girl">
            </fieldset>
            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>Choose your like:</legend>
                <label for="book">book:</label>
                <input type="checkbox" id="book" name="sex" value="book">
                <label for="sleep">sleep:</label>
                <input type="checkbox" id="sleep" name="sex" value="sleep">
            </fieldset>
            <label for="points">Points:</label>
            <input type="range" name="points" id="points" value="50" min="0" max="100">

            <label for="switch">开关:</label>
            <select id="switch" data-role="slider">
                <option value="on" selected>on</option>
                <option value="off">off</option>
            </select>
        </div>
        <button data-icon="search" data-inline="true" data-iconpos="right">提交</button>
</form>