html---form表单

表单标签如下：

<form action="/login" method="post" name="login_form" id="login_form" enctype="text/plain">
    <label>用户名:</label>
    <input class="form-control" type="text" id="username" value="用户" name="username" maxlength="11" placeholder="4-16位字符，字母/中文/数字/下划线"/><br>
    <label>密码:</label>
    <input class="form-control" type="password" id="pwd"  value="密码" name="pwd" maxlength="3" placeholder="6-20位字符，字母与数字组合"/><br>


    <!-- 单选按钮和复选框 -->
    <input type="radio" name="sex" value="M" >女士
    <input type="radio" name="sex" value="F" checked="checked">男士
    <input type="radio" name="sex" value="G" >太监
    <input type="checkbox" name="checkbox1" value="跑步" >跑步
    <input type="checkbox" name="checkbox2" value="音乐" checked="checked">音乐
    <input type="checkbox" name="checkbox2" value="游戏" checked="checked">游戏
    <!-- 注意:同一组的单选按钮或者复选框，name 取值一定要一致。比如上面例子为同一个名称"sex"，这样同一组的单选按钮才可以起到单选的作用。 -->
    <!-- 我们可以在元素中添加checked属性 或者添加checked="checked" 都可以让某个选项默认选中，单选框的如果有多个checked 会以最后一个为准。复选框的都会选中 -->
    <!-- 1、对radio 、checkbox 来说说，checked属性可以保证页面初始化被选中，但是通过js或者jquery 控制checked属性并不能保证相应的被选中，同样也不能通过checked属性来判断该元素是否被选中。 -->
    <!-- 2、checked属性并不能影响form表单的值，表单页面真正被选中的元素才是form表单提交的值。 -->
    <!-- 3、通jquery的prop方法可以完美的选中或者取消选中元素，使用prop("checked",true) 选中，prop("checked",false)取消选中，通prop("checked") 返回的false或者true判断是否选中。 -->


    <!-- 隐藏域：想提交给服务器但不想给用户看的数据可以放在隐藏域中 -->
    <input type = "hidden" id="hidden" name="hidden" value="love"/><br>
    <!-- 文件选择框：文件上传时使用 -->
    <input type = "file"  id = "file"  name="点我上传" multiple = "multiple"/><br>


    <!-- 多行文本域 -->
    <!-- rows：指定文本域默认显示的行数。cols：指定文本域默认显示的列数 -->
    <textarea type="text" id="introduction" name="introduction" rows="3" cols="10"></textarea><br/>


    <!-- 下拉选择框（下拉列表） -->
    <select class="form-control"  id="province" name="province">
        <option value="河南" >河南</option>
        <option value="浙江" selected>浙江</option>
        <option value="广东" selected="selected">广东</option>
    </select><br>
    <!-- 附加：上面两种方法都行，都可以默认选中。如果都写了，会以最后一个为准。 -->


    <!-- 1.提交按钮：将表单数据提交给服务器 -->
    <input type="submit"  value="提交按钮"/>
    <!-- 2.重置按钮：将表单内容恢复到初始化的状态 -->
    <input type="reset"   value="重置按钮"/>
    <!-- 3.普通按钮：允许通过js自定义功能 -->
    <input type="button"  value="普通按钮"/>
    <!-- 4.button按钮：type取值：submit、reset、button -->
    <button type="submit" value="多功能按钮">内容</button>
</form>