- Web前端学习笔记:HTML5+CSS3+JavaScript
- 王涛 杨延成 姜浩
- 759字
- 2020-06-24 22:37:58
4.1 表单简介
表单用于让用户填写信息并提交给服务器进行处理,它的用途有很多,如网站的注册登录、在线购物的购物车、论坛留言板等功能。图4-1所示的QQ注册中就使用了表单。
图4-1 利用表单进行QQ注册
4.1.1 表单的结构
表单由许多表单控件组成,主要包括用户填写信息部分和表单提交按钮。用户填写数据完成后,单击“提交”按钮就可以发送数据到服务器,经过后台程序处理后将用户所需的信息返回到客户端,在浏览器中展示给用户,表单内容由<form></form>包裹。
基本语法如下:
<form>
各种表单控件
</form>
4.1.2 表单的常用属性
表单的常用属性有3种。
1.action属性
action属性用于指定表单提交时向何处发送表单数据,即需要发送的服务器地址。基本语法如下:<form action="form.php">
各种表单控件
</form>
2.method属性
method属性用于指定表单向服务器提交数据的方法,包括两种方法,分别是get和post。这两种方法各有特点,下面分别进行具体介绍。
(1)get方法的特点
使用URL(统一资源定位符)传递参数:http://服务器地址?name1=value1&name2=value2,其中“?”符号表示要进行参数传递,“?”符号后面采用“name=value”的形式传递,多个参数之间,用“&”符号连接。URL传递的数据量有限,只能传递少量数据。
注意:使用URL传递参数并不安全,所有信息可在地址栏中看到,并且可以通过地址栏随意传递其他数据。
(2)post方法的特点
将数据封装后使用http请求传递,信息在地址栏中不可见,比较安全,并且传递的数据量理论上没有限制。
综上所述,虽然get方法是表单提交的默认方法,但是通常采用post方法传递数据。
基本语法如下:
<form action="form.php"method="post">
各种表单控件
</form>
3.enctype属性
enctype属性指定表单发送的编码方式,只有method="post"时才有效,共有三种属性值。
1)application/x-www-form-urlencoded:此为默认值,如果enctype属性省略不写,则表示采取此种编码方式。
2)multipart/form-data:不对字符编码,用于上传文件时使用。
3)text/plain:将空格转换为“+”符号,但不编码特殊字符,通常在将表单发送到电子邮箱时使用。