030910-表单：标签、类型、注意事项

表单
示例代码：

<!--form：
    提交方式分为get提交和post提交，默认为get提交；
    get提交：在路径后面加参数 ？name=123&age=456
    *键名和键值要完全匹配，注意键名的空格和键值的引号。
    post提交：在请求信息里加参数，能接收到但是（路径中）看不到

    如果有file类型，需要有enctype属性
-->
<form action="../0309/jianliye.html" method="get" enctype="multipart/form-data">
<!--表单的通用写法-->
    <!--
    placeholder="123"  输入框默认文本为123，可修改
    readonly（与placeholder配合）  只读
    disabled（与placeholder配合）  不可操作 -->
    <input type="text" placeholder="123" readonly disabled /><br/>
     <!--隐藏域：不显示且不占位，可传参-->
    <input type="hidden" />
    <!--单选按钮：
    通过相同的name值设置分组实现单选的效果；
    checked:默认选中
    label:将文字与按钮标签相关联，实现点击文字选中选择按钮的效果 -->
    <!--label方法一：-->
    <label><input type="radio" name="sex" value="1" checked />男</label><br/>
    <!--label方法二：-->
    <input id="nv" type="radio" name="sex" value="0" /><label for="nv">女</label><br/>
    <!--多选按钮：
    通过相同的name值设置分组，分组的作用是传参时对参数分组；
    checked:默认选中
    label:将文字与按钮标签相关联，实现点击文字选中选择按钮的效果
    -->
    <label><input type="checkbox" name="ah" value="music" checked />听歌</label><br/>
    <input id="pgame" type="checkbox" name="ah" value="game" /><label for="pgame">打游戏</label><br/>
    <input type="checkbox" name="ah" value="it" />敲代码<br/>
<!--表单的特殊元素-->
     <!--多行文本：name=内容，默认显示123-->
      <textarea name="add" cols="30" rows="10" placeholder="123" >
         北京东城 显示手敲的     空格  
    </textarea>
    <!--下拉：
    option有value时：name=value
    option没有value时:name=内容
    selected:默认选中,是option的属性
    multiple:默认展示条数，与size配合使用，是select的属性 -->
    <select multiple size="4">
        <option value="1">小明</option>    <!--name=1-->
        <option>小龙</option>                <!--name=小龙-->
        <option value="2">小红</option>    <!--name=2-->
        <option value="3" selected>小明明</option>
        <option value="5">小龙明</option>
        <option value="5">小红明</option>
    </select>
</form>

 

注意事项：

 

在表单中name与value是键值对，如果需要传值，必须要有name和value（input）；

在单选和多选中name有分组的作用：通过将name设为一样实现分组。