课堂笔记之表单的使用

action：指定表单数据提交的地址
method：表单数据提交的方法

为了往服务端提交数据时，提交的数据清晰易懂方便处理：
1：普通的输入框，需要添加name属性，来保证键值对的完整。
2：非输入框，需要添加name和value属性，来保证键值对的完整。
           另外，name还有分组的作用，
           单选框，相同name的是一组，单选框中同一组内的选项有互斥的效果。
           复选框，也需要name属性来表明当前的多项是一组。

通过get请求往服务端提交数据的时候，提交的数据会追加在url地址的后面。
以？进行分隔。多个数据之间用&分隔。
get缺点：暴露敏感信息，传输数据有限
get的优点：传输速度快

post请求：传输的数据放在请求体中，而不是暴露在url地址的后面
post：可以隐藏敏感信息，传输的数据多少没有限制
post：传输速度慢 （相对的）

按钮四个:
type:reset           重置按钮
type：submit         提交按钮
type：image          具有提交的功能
<button></button>    具有提交的功能
-->

 

例：
<form action="ccy.php" method="get">
    <fieldset><!--表格边框（一个表格可以分多个区域）-->
        <legend>个人信息</legend><!--表格标题-->
        姓名：<input type="text" name="name">
        <br>
        密码：<input type="password" name="pwd">
        <br>
        性别：<input type="radio" name="sex" value="mam">男
        <input type="radio" name="sex" value="women">女
        <input type="radio" name="sex" value="secret">保密
        <br>
        爱好：<input type="checkbox" name="hobby" value="basketball">篮球
        <input type="checkbox" name="hobby" value="football">足球
        <input type="checkbox" name="hobby" value="wangqiu">网球
    </fieldset>

    <fieldset>
        <legend>其他信息</legend>·
        文件：<input type="file">
        <br>
        籍贯：<select name="home">
                <option value="sd">山东</option>
                <option value="sx">山西</option>
                <option value="hn">河南</option>
                <option value="hb">河北</option>
                <option value="jx">江西</option>
                <option value="zj">浙江</option>
            </select>
        <br>
        意见：<textarea name="suggest" cols="30" rows="5">
         </textarea>
        <br>
        <input type="reset" value="清空">
        <input type="submit" value="登录">
        <button>我也是按钮</button>
        <!--<input type="image" src="../../img/f3_Android1.png">-->
    </fieldset>

 

 

 

表单常与表格互相嵌套使用，在html5中，表单元素可以放在form表单之外，并通过form属性和表单进行关联
通过关联，form表单之外的表单元素也可以把数据提交。

例：

<form action="check.php" id="ccy">
    姓名：<input type="text" name="name" autocomplete="off">
    <br>
    密码：<input type="password" name="pwd">
    <br>
    <input type="submit">
</form>
性别:
<input type="radio" name="sex" value="man" form="ccy">男

 

H5提供的表单类型，具备数据验证的功能，但是验证规则不严谨，建议使用JS正则表达式进行处理

表单属性

 

autocomplete：输入框内容自动补全
autofocus：自动获取焦点
required：必填项
placeholder：提示信息
readonly：只读
multiple：下拉框的多项选择
selected：下拉框的默认选中项  单选框和复选框通过check属性实现默认选中