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>