表单1
表单简介
首先来看下几个门户网站的用户注册界面:
淘宝
百度:
这些都是表单的内容,也是一个网站的必备功能,接下来,我们来看表单的基础知识:
表单的概念
表单主要用来获取客户端用户数据(信息)的。如:注册表单、查询表单、登录表单等。
表单的工作原理
- 浏览有表单的网页,填写一些必要的信息,然后点击某个按钮进行提交。
- 这些表单数据,通过互联网,传递到了服务器上。
- 服务器上有专门的程序,对表单数据进行验证。如果验证成功,将你的数据存入数据库(MySQL),则返回一个验证成功的信息。如果验证失败,将返回一个错误信息。
从上面表单的工作原来看:表单的制作分两个部分,一是前台页面的制作,二是后台程序对表单数据的处理。本课程只介绍前台页面制作部分
表单的结构
以下是一个简单的表单
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户注册</title>
</head>
<body>
<font size="5" color="red">欢迎注册php.cn</font>
<form name="user" method="get" action="" >
用户名:<input type="text" name="username"/>
<br/>
密码:<input type="password" name="userpwd"/>
<br/>
<input type="submit" value="提交信息"/>
</form>
</body>
</html>
表单中的HTML标签
标签用于为用户输入创建 HTML 表单。
- 表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。
- 表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
标记属性
-
name:给表单起个名字。这个名字主要给JavaScript来用。JS主要用来做客户端表单验证。
-
method:表单的提交方式,取值:get或post。
-
action:指定表单的处理程序,一般是PHP文件。
-
如果action为空,那么表单数据发到哪里去了?
-
结果:表单将数据提交给了它自己来处理。
-
enctype:指定表单数据的编码方式(解密方式)。这个属性只能用在 method = “post” 的情况下。
-
application/x-www-form-urldecoded //默认的加密方式
-
multipart/form-data //如果你上传文件,该值必须它自己。
GET方法和POST方法
GET提交方式(很少用到)
GET方式,是将表单数据追加到action指定的处理程序的后面,然后向服务器发出请求。
注意:地址栏传数据的方式,默认就是GET方式。
改造我们的第一个例子
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户注册</title>
</head>
<body>
<font size="5" color="red">欢迎注册php.cn</font>
<form name="user" method="get" action="" >
用户名:<input type="text" name="username"/>
<br/>
密码:<input type="password" name="userpwd"/>
<br/>
<input type="submit" value="提交信息"/>
</form>
</body>
</html>
在本地测试时,填写了信息,然后点击提交之后,可以观察到浏览器地址栏变成
上面URL的说明:
- login.php //是表单处理程序文件
- username=小明&userpwd=123456 //表单提交的数据,又称为“查询字符串”。
- action文件和查询字符串之间用“?”分隔。
- 每两个表单元素的“名称=值”之间用“&”分隔。
- 表单名称和表单值之间用“=”分隔。
注:如果某个表单元素,不想往服务器传递数据,那么,我们可以不给它加name属性。传递到服务器的数据,如果没有name,则无法获取它的值。
GET方式的特点:
- GET方式不能提交敏感数据,如:密码。
- GET方式只提交少量数据。因为地址栏的长度有限制,大约100外字符。
- GET方式下不能上传附件。
POST表单提交方式
POST提交方式,它不是将表单数据追加到地址上,而是直接传给表单处理程序。
POST方式的特点:
- POST提交的数据相对安全。
- POST可以提交海量数据。
- POST方式可以上传附件。
来看一个实例:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户注册</title>
</head>
<body>
<font size="5" color="red">欢迎注册php.cn</font>
<form name="user" method="post" action="login.php" >
用户名:<input type="text" name="username"/>
<br/>
密码:<input type="password" name="userpwd"/>
<br/>
<input type="submit" value="提交信息"/>
</form>
</body>
</html>
注:本地测试时,观察地址栏的变化,看看是否和get提交方式一样
表单与表格的嵌套
之前制作的注册页面,几个元素的对齐是混乱的
我们可以利用表格和表单的嵌套,使得页面更加规则
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户注册</title>
</head>
<body>
<font size="5" color="red">欢迎注册php.cn</font>
<form name="user" method="get" action="" >
<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="userpwd"/></td>
</tr>
<tr>
<td colspan="2" align="left"><input type="submit" value="提交信息"/></td>
</tr>
</table>
</form>
</body>
</html>
可以看出,制作这样的规整界面使用table比较复杂,在以后的使用中频率不高,更多的是使用之后要学习的DIV+CSS来实现