1、表单的概念
表单主要用来获取客户端用户数据(信息)的。如:注册表单、查询表单、登录表单等。
2、表单的工作原理
l 浏览有表单的网页,填写一些必要的信息,然后点击某个按钮进行提交。
l 这些表单数据,通过互联网,传递到了服务器上。
l 服务器上有专门的程序,对表单数据进行验证。如果验证成功,将你的数据存入数据库(MySQL),则返回一个验证成功的信息。如果验证失败,将返回一个错误信息。
从上面表单的工作原来看:表单的制作分两个部分,一是前台页面的制作,二是后台PHP对表单数据的处理。
3、表单的结构
<form>标记属性——块元素
l name:给表单起个名字。这个名字主要给JavaScript来用。JS主要用来做客户端表单验证。
l method:表单的提交方式,取值:get或post。
l action:指定表单的处理程序,一般是PHP文件。
u 如果action为空,那么表单数据发到哪里去了?
u 结果:那么表单数据提交给了它自己来处理。
l enctype:指定表单数据的编码方式(解密方式)。这个属性只能用在method = “post” 的情况下。
u application/x-www-form-urldecoded //默认的加密方式
u multipart/form-data //如果你上传文件,该值必须它自己。
GET方法和POST方法
(1)GET提交方式(基本上用不着)
GET方式,是将表单数据追加到action指定的处理程序的后面,然后向服务器发出请求。
注意:地址栏传数据的方式,默认就是GET方式。
上面URL的说明:
l login.php //是表单处理程序文件
l username=yao&userpwd=123456//表单提交的数据,又称为“查询字符串”。
l action文件和查询字符串之间用“?”分隔。
l 每两个表单元素的“名称=值”之间用“&”分隔。
l 表单名称和表单值之间用“=”分隔。
如果某个表单元素,不想往服务器传递数据,那么,我们可以不给它加name属性。传递到服务器的数据,如果没有name,则无法获取它的值。
GET方式的特点:
(1) GET方式不能提交敏感数据,如:密码。
(2) GET方式只提交少量数据。因为地址栏的长度有限制,大约100外字符。
(3) GET方式下不能上传附件。
(2)POST表单提交方式
POST提交方式,它不是将表单数据追加到地址上,而是直接传给表单处理程序。
POST方式的特点:
(1) POST提交的数据相对安全。
(2) POST可以提交海量数据。
(3) POST方式可以上传附件。
表格和表单的嵌套顺序
1.单行文本域
l 语法格式:<input type = “text” 属性 = “值” />
l 常用属性
u name:文本框的名字。命名规则是:可以包含字母、数字、下划线,只能以字母开头。
u type:表单元素的类型。
u value:文本框中的值。
u size:文本框的长度,以“字符”为单位。
u maxLength:最多可以输入多少个字符,超出的就输不进去了。
u readonly:只读属性。可以选中,但不能修改。如:readonly = “readonly”
u disabled:禁用属性。不能选中,不能修改。如:disabled = “disabled”
l 举例说明:<input type="text"name="username" />
2.单行密码域
l 语法格式:<input type = “password” 属性 = “值” />
l 常用属性
u name:密码框的名字。命名规则是:可以包含字母、数字、下划线,只能以字母开头。
u type:表单元素的类型。
u value:元素中的值。
u size:元素的长度,以“字符”为单位。
u maxLength:最多可以输入多少个字符,超出的就输不进去了。
u readonly:只读属性。可以选中,但不能修改。如:readonly = “readonly”
u disabled:禁用属性。不能选中,不能修改。如:disabled = “disabled”
3.单选按钮
u 语法格式:<input type = “radio” 属性 = “值” />
u 常用属性
u Name:元素的名称
u Value:元素的值,该value中数据将发往服务器。
u Checked:默认选择哪一项。如:checked = “checked”
注意:一组单选按钮,只能选择一个,但name的值必须一致。如:name = “sex”
单选按钮用户自己不能输入内容,用户只能选择,因此必须为它指默认值value。
4.复选框
u 语法格式:<input type = “checkbox” 属性 = “值” />
u 常用属性
u Name:元素的名称
u Value:元素的值
u Checked:默认选中。如:checked = “checked”
注意:复选框也是一组选项,因此name的值必须一致。在PHP中,使用数组来获取多个同名的name的值。
复选框可以同时选多个,也可以一个都不选。
5.下拉列表
<select name = “city”>
<option value = “北京市”>北京市</option>
<option value = “天津市”>天津市</option>
<option value = “重庆市”>重庆市</option>
</select>
u <select>标记的属性,只有一个name属性
u <option>标记的属性有两个:value属性、selected属性
u Selected:默认选中。如:selected = “selected”
6.文本区域
u 语法格式:<textarea name = “名称” cols = “宽度” rows = “高度”></textarea>
u 常用属性
u name:元素名称
u cols:宽度,是指多少个字符宽。
u Rows:高度,是指几行高。
u 提示:<textarea>和</textarea>之间是默认文本
7.各种按钮
u 提交按钮:<input type="submit" value="提交表单"/>
u 重置按钮:<input type="reset" value="重新填写"/>
u 图片按钮:<input type="image"src="images/btn02.png" /> //功能就是提交表单,与submit按钮功能一样
u 普通按钮:<input type="button"οnclick="javascript:window.close()" value="关闭窗口"/>
u 普通按钮本身是不具备任何功能的,一般要与JS程序配合使用,实现相应的功能。
u 关于JS的内容,后面再讲
8.隐藏域
功能:隐藏域就是看不见的一个框。传递一些值,而这个值又不想让别人看见。
用处:主要用于PHP后面程序,如:修改某一条新闻内容时,需要传递一个新闻的id号。
语法格式:<input type = “hidden” name = “名称” value = “默认值” />
9.上传文件域
l 语法格式:<input type = “file” 属性 = “属性” />
l 常用属性
u name:表单元素的名称
u value:表单元素的值,这个值其实就是上传的文件名。value属性是只读属性,这个value的内容只能来自手动选择上传的文件,而不能用户自己指定一个路径。为了安全起见,value是只读的。
l 注意:现在只能实现上传文件框,而不能真正实现上传功能,上传功能用PHP来实现的。
<caption>表格标题
l 语法格式:<caption></caption>
l 提示:<caption>标记是<table>的子标记。<caption>放在<table>开始标记之后。