form表单

一、定义：

在web网页中用来给访问者填写信息，从而能采集客户端信息，是网页具有交互的功能。

二、原理：

一般是将表单设计在一个html 文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的 ASP 或 PHP 等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。

三、实例：

如登录注册、搜索框等

四、组成：

表单是由窗体和控件组成的,一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。

五、标签：

<form action="提交的地址" name="表单名称" method="提交的方式：get、post">内容</form>

*注意：表单之间不能相互嵌套，一个页面可以有多个表单；表格之间可以相互嵌套

六、数据提交的方式——get和post：

1.get提交数据不安全，会在地址栏中显示；post安全
2.get只能提交少量的数据（不能大于2kb）；post理论上没有限制
*默认提交方式：get

七、表单元素：

1.基本表单元素：

单行文本框：<input type="text"/>
密码框：<input type="password"/>
单选按钮：<input type="radio"/>
多选按钮：<input type="checkbox"/>
提交按钮： <input type="submit"/>
重置按钮： <input type="reset"/>
没有功能的按钮：<input type="button"/>
提交按钮：<button type="submit"></button>
重置按钮：<button type="reset"></button>
没有功能的按钮：<button type="button"></button>

*实例：

<form action="" name="forml" method="post">
    姓名：<input type="text" name="username" />
    <br>
    密码：<input type="password" name="password" />
    <br>
    性别：<input type="radio" name="sex"/> 男
         <input type="radio" name="sex"/> 女
    <br>
    爱好：<input type="checkbox">唱歌
         <input type="checkbox">跳舞
         <input type="checkbox">运动
         <input type="checkbox">吃饭
    <br>
    <input type="submit" value="登录">
    <input type="reset" value="取消">
    <input type="button" value="没有任何功能">
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">没有功能的按钮</button>
</form>

2.其他表单元素：

文件：<input type="file" />
* 把form的编码格式改为二进制：enctype="multipart/form-data"
隐藏域：<input type="hidden" />
*不是给用户看，但隐藏域携带的信息可以正常的提交
图片提交按钮：<input type="image" src="" />
下拉列表：
<select name="" id="">
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
</select>
下拉列表分组：
<select name="" id="">
    <optgroup label="组名">
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
    </optgroup>
</select>
多行文本框：
<textarea name="" id="" cols="30" rows="10"></textarea>
提升用户体验度：
<label for=""></label>
*配合单选和多选按钮使用,for属性和input属性一致

*实例：

<form action="" name="forml" enctype="multipart/form-data">
    <p>
        文件：<input type="file" />
    </p>
    <p>
        隐藏域：<input type="hidden" />
    </p>
    <p>
        图片提交按钮：<input type="image" src="images/1.jpg">
    </p>
    <p>
        城市：
        <select name="city">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="tj">天津</option>
            <option value="hb">河北</option>
            <option value="sx">山西</option>
        </select>
        <select name="shi">
            <option value="bj">北京市</option>
            <option value="sh">上海市</option>
            <option value="tj">天津市</option>
            <option value="hb">保定市</option>
            <option value="sx">太原市</option>
        </select>
        <select name="city1">
            <optgroup label="北京">
                <option value="dx">大兴区</option>
                <option value="tz">通州区</option>
                <option value="cy">朝阳区</option>
            </optgroup>
            <optgroup label="内蒙古">
                <option value="hs">呼和浩特</option>
                <option value="bt">包头</option>
                <option value="xl">锡林郭勒</option>
            </optgroup>
        </select>
    </p>
    <p>
        多行文本框：
        <textarea name="liuyan" cols="30" rows="10">好好学习，天天向上</textarea>
    </p>
    <button>提交</button>
</form>

八、表单元素的属性：

type——类型
name——名称
value——当前值
checked——默认被选中，配合单选按钮和多选按钮使用
selected——默认显示，配合option使用
readonly——只读
disable——禁用