jQuery-Mobile学习（表单）

form 元素必须有一个 method 和一个 action 属性
每个表单元素必须有一个唯一的 “id” 属性。id 必须是整个站点所有页面上唯一的。这是因为 jQuery Mobile 的单页导航机制使得多个不同页面在同一时间被呈现每个表单元素必须有一个标签。设置标签的 for 属性来匹配元素的 id。如果我们不想显示label值得话，就给label加上class ui-hidden-accessible

<div data-role="page">
    <div data-role="header"></div>
    <div data-role="main" class="ui-content">
        <form action="" method="post">
            <label for="user" class="ui-hidden-accessible">姓名</label>
            <input type="text" id="user" placeholder="请输入用户名"/>
            <input type="submit" value="提交"/>
        </form>
    </div>
    <div data-role="footer" data-position="fixed"></div>
</div>

input标签里面type=”submit”表示是一个提交按钮。 type=”button”是一个普通按钮。type=”reset”是一个重置按钮。我们可以给input的按钮添加一些样式。

我们一般希望标签名和input的输入框放置在一行会好看一点。这是时候我们将input标签和label标签一起放在一个div里面。这个div有一个类名为ui-field-contain 当页面宽度大于 480px 时，会将标签和input等控件放在一行。

 <form action="" method="post">
            <div class="ui-field-contain">
                <label for="user">用户名</label>
                <input id="user" type="text" placeholder="请输入用户名"/>
                <label for="pwd">密码</label>
                <input id="pwd" type="text" placeholder="请输入密码"/>
            </div>
            <input type="submit" value="提交"/>
        </form>