1.HTML中表单元素的基本概念
HTML表单是HTML元素中较为复杂的部分,表单往往和脚本,动态页面,数据处理等功能相结合,因此是制作动态网站很重要的内容.
表单一般用来收集用户的输入信息
2.表单工作原理
访问者在浏览有表单的网页时,可填写必需的信息,然后按某个按钮提交,这些信息通过网络传送到服务器上.服务器上专门的程序对这些数据进行处理,如果有错误会返回错误信息,并要求纠正错误.当数据完整无误后,服务器反馈一个输入完成的信息
3.表单的功能
功能:表单用于向服务器传输数据,从而实现用户与WEB服务器的交互表单能够包含input系统标签,比如文本字段,复选框,单选框,提交按钮等表单还可以包含textarea,select,fieldset,label标签.
4.表单的常用类型及说明
1.表单常用的类型有:
2.表单属性：
3.文本输入框(text)：
当用户要在表单中输入字母,数字内容时,就会用到文本域
代码如下:
注意,表单本身并不可见.同时,在大多浏览器中,文本域的缺省宽度是20个字符.
在密码域中输入的字符,浏览器将使用项目符号来代替这些字符.
4.单选按钮(radio)：
当用户从若干给定的选择中选取一个选项时,就会用到单选框.
代码如下:
用户只能从众多选择中选取一个选项.当用户点击一个单选按钮时,该按钮会变为选中状态,其他所有按钮会变为非选中状态.
5.复选框(checkboxes)
当用户需要从若干给定的选择中选取一个或多个选项时,就会用到复选框
代码如下:
用户一次可以选择多个选项.6.重置按钮(reset)
重置按钮会清除当前页面上的用户输入的所有数据,把当前页面恢复到打开时的样子.
代码如下:
<form><p><input type="reset"></p></form>
7.提交按钮
会在当前页面生成一个提交按钮,用户点击此按钮,浏览器就会把当前页面用户输入的数据传送到服务端
代码如下:
<form><p><input type="button" value="按钮"/></p></form>
8.提交文件
当需要把客户端的文件发送到服务端时,需要用到提交文件按钮
代码如下:
<form action="/index/" method="post"><p><input type="file"/></p></form>
上传文件注意两点: 请求方式必须是post enctype="multipart/form-data"
9.下拉菜单
当需要用户从很多选项中选择一个或多个选项时,也可以使用下拉列表.
代码如下:
这样的下拉列表,用户只能从其中选择一个选项,当需要用户选择两个或以下时,可以添加参数来进行控制.代码如下:
还可以在OPTION
中添加selected="selected"
选项来设置默认值.10.表单属性
1.action属性的说明:
使用action选项来指定服务端的脚本来处理被提交的表单
<form action="/index/" method="post">
如果省略action属性,则action会被设置为当前页面
2.method属性的说明:
method属性规定在提交表单时所用的http方法(POST或GET)
<form action="/index/" method="post">
或
<form action="/index/" method="get">
3.get方法或post方法的使用方式说明:
如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息.
当使用get方法时,表单的数据在页面地址栏中是可见的
因此,get最适合少量数据的提交,浏览器会设定容量限制
如果表单正在更新数据,或者包含敏感信息(比如密码)时应该使用post,post的安全性更好.
因为在页面地址栏中被提交的数据是不可见的.
切图 qietu(.com)