HTML表单
- 表单的概念
-
- 表单主要用来获取客户端用户数据(信息)的,如:注册表单、查询表单、登陆表单等
- 表单的工作原理
-
- 浏览表单的网页,填写一些必要的信息,然后点击某个按钮进行提交。
- 这些表单数据,通过互联网,传递到了服务器上。
- 服务器上有专门的程序,对表单数据进行验证。
-
- 如果验证成功,将你的数据存入数据库(MySQL),则返回一个验证成功的消息。
- 如果验证失败,将返回一个错误信息。
- 从表单的工作原理来看:表单的制作分两个部分,一是前台页面的制作,二是后台PHP对表单数据的处理。
- 表单的结构
-
- < form name="form1" align="center" method="get" action="login.php"
>
- < form name="form1" align="center" method="get" action="login.php"
- < form
> 标记属性——块元素 -
- name:给表单起个名字,主要给JS来用,JS主要用来做客户端表单验证。
- method:表单的提交方式,取值:get或POST。
- action:指定表单的处理程序,一般是PHP文件。
-
- 如果action为空,那么表单数据提交给当前文件
- encype:指定表单数据的编码方式(加密方式)。这个属性只能用在method="post"的情况下,有两个取值
-
- application/x-www-form-urldecoded
//默认的传值加密方式 - multipart/form-data
//如果上传文件,该值必须是它自己
- application/x-www-form-urldecoded
- GET方法和POST方法
-
- GET提交方式(基本上用不到)
§
-
-
- GET方式,是将表单数据追加到action指定的处理程序的后面,然后向服务器发出请求
- 注意:地址栏传数据的方式,默认就是GET方式
- file:///D:/UE练习/login.php?username=&usepwd=
- 上面URL的说明:
-
- login.php //表单的处理程序文件
- username=&usepwd=
//表单提交的数据,有成为“查询字符串” - action文件和查询字符串之间用"?"分隔。
- 每两个表单元素的"名称=值"之间用"&"分隔。
- 表单名称和表单值之间用"="分隔。
- 如果某个表单元素,不想往服务器传递数据,那么,我们可以不给它加name属性。传递到服务器的数据,如果没有name,则无法获取该值。
- GET方式的特点:
-
- GET方式不能提交敏感数据,如:密码
- GET方式只能提交少量数据,因为地址栏的长度有限制,大约100多个字符
- GET方式下不能上传附件
- POST表单提交方式
-
- POST提交方式,不是将表单数据追加到地址上,二是直接传给表单处理程序。
- POST方式的特点:
-
- POST提交的数据相对安全。
- POST可以提交海量数据。
- POST方式可以上传附件。
-
- 表格和变淡的嵌套顺序:
-
- < form name="form1" method="post" action="register.php"
>
- < form name="form1" method="post" action="register.php"
- 单行文本域
-
- 语法格式: < input type="text" 属性="值" /
> - 常用属性:
-
- name:文本框的名字。命名规则是:可以包含字母、数字、下划线,只能以字母开头。
- type:表单元素的类型。
- value:文本框中的值。
- size:文本框的长度,以“字符”为单位。
- maxLength:最多可以输入多少个字符,超出无法输入。
- readonly:只读属性。可以选中,但不能修改。如,readonly="readonly"
- disabled:禁用属性。不能选中,不能修改。如:disabled="disabled"
- 举例说明:
-
- < input type="text" name=""usename" value="请输入你的用户名" /
>
- < input type="text" name=""usename" value="请输入你的用户名" /
- 语法格式: < input type="text" 属性="值" /
- 单行密码域
-
- 语法格式: < input type="password" 属性="值" /
> - 常用属性:
- 语法格式: < input type="password" 属性="值" /
o
-
-
- name:密码框的名字。命名规则是:可以包含字母、数字、下划线,只能以字母开头。
- type:表单元素的类型。
- value:元素中的值。
- size:元素的长度,以“字符”为单位。
- maxLength:最多可以输入多少个字符,超出无法输入。
- readonly:只读属性。可以选中,但不能修改。如,readonly="readonly"
- disabled:禁用属性。不能选中,不能修改。如:disabled="disabled"
- 例如: < input type="password" name="userpwd" value="请输入登陆密码" /
>
-
- 单选按钮
-
- 语法格式: < input type="radio" 属性="值" /
> - 常用属性:
-
- name:元素的名称
- value:元素的值,该value中数据将发往服务器。
- checked:默认选择那一项。如:checked="checked"
-
< input type="radio" name="sex" value="男" checked="checked"/ >是
- 语法格式: < input type="radio" 属性="值" /
- 注意:一组单选按钮,只能选择一个,但name的值必须一致,如:name="sex".单选按钮用户不能自己输入内容,用户只能选择,因此必须为其指定默认值value。
- 复选框
-
- 语法格式: < input type="checkbox" 属性="值" /
> - 常用属性:
-
- name:元素的名称
- value:元素的值
- checked:默认选中。如:checkd="checked"
- < tr
>
- 语法格式: < input type="checkbox" 属性="值" /
-
注意:复选框也是一组选项,因此name的值必须一致。在PHP中,使用数组来获取多个同名的name的值。复选框选取可以同时选多个,也可以一个都不选。
- 下拉列表
-
- 语法格式:
-
- < select name="名称"
>
- < select name="名称"
- < select
> 标记属性只有一个name属性 -
< option > 标记的属性有两个:vlaue属性、selectd属性 -
- selected:默认选中属性。如:select="select"
- < select name="名称"
>
- 文本区域
-
- 语法格式: < textarea name="名称" cols="宽度" rows="高度"
> < /textarea > - 常用属性:
-
- name:元素名称
- cols:宽度,是指多少个字符宽。
- rows:高度,是指几行高。
- 提示: < textarea
> 和 < /textarea > 之间是默认文本
- 语法格式: < textarea name="名称" cols="宽度" rows="高度"
- 各种按钮
-
- 提交按钮: < input type="submit" value="提交表单" /
> - 重置按钮: < input type="reset" value="重新填写" /
> - 图片按钮: < input type="image" src="images/02.jpg" /
> //功能呢就是提交表单,与submit按钮功能一样。 - 普通按钮: < input type="button" value="关闭窗口" /
>
- 提交按钮: < input type="submit" value="提交表单" /
o
-
- 普通按钮本身不具备任何功能的,一般要与JS程序配合使用,实现相应的功能。
-
- < input type="button" οnclick="javascript:window.close()" value="关闭窗口" /
>
- < input type="button" οnclick="javascript:window.close()" value="关闭窗口" /
- 上传文件域
-
- 语法格式: < input type="file" 属性="属性" /
> - 常用属性
-
- name:表单位元素的名称
- value:表单元素的值,这个值其实就是上传的文件名。value属性是只读属性,这个value的内容只能来字手动上传的文件,而不能用户自己指定一个路径。为了安全起见,value是只读的。
-
< td width="100" align="right" > 上传图片: < /td >
- 语法格式: < input type="file" 属性="属性" /
- 注意:现在只能实现上传文件框,而不能真正实现上传功能,上传功能用PHP来实现。
-
- < form name="form1" method="get" action="register.php" enctype="multipart/form-data"
> - < tr
>
- < form name="form1" method="get" action="register.php" enctype="multipart/form-data"
-
- 以上两个配合使用,enctype必须是这个值,文件才能够上传。
- 隐藏域
-
- 功能:隐藏域就是看不见的一个框。传递一些值,而这个值又不想让别人看见。
- 用处:主要用于PHP后台程序,如:修改某一条新闻内容时,需要传递一个新闻的ID号。
- 语法格式: < input type="hidden" name="名称" value="默认值" /
> -
< input type="hidden" name="id" value="1263" / >
-
< caption > 表格标题 -
- 语法格式: < caption
> < /caption > - 提示: < caption
> 标记是 < table > 的子标记。 < caption > 放在 < table > 标记之后 - < table width="500" border="1" align="left"
>
- 语法格式: < caption
- 图片热点
-
- 给一张图片加多个链接,默认情况下,一张图只能加一个链接。
- 标记结构:
-
- < img src="images/03.jpg" usemap="#map01"/
>
- < img src="images/03.jpg" usemap="#map01"/
- < area
> 标记的常用属性 -
- shape:热区的形状。取值:rect(矩形)、circle(圆形)、polygon(多边形)
- coords:热区的坐标(位置)
§
- 如果shape=rect时,那么coords="x1,y1(左上),x2,y2(右下)"
- 如果shape=circle时,那么coords="x,y,r",其中(x,y)为圆心坐标,r为半径