表单

示例代码：

<!--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设为一样实现分组。