表单 form:标签、类型、注意事项

表单
示例代码:

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

posted @ 2018-07-10 14:28  街角的守护  阅读(126)  评论(0编辑  收藏  举报