HTML-3

HTML表单

表单的概念

表单主要用来获取客户端用户数据（信息）的，如：注册表单、查询表单、登陆表单等

表单的工作原理

浏览表单的网页，填写一些必要的信息，然后点击某个按钮进行提交。

这些表单数据，通过互联网，传递到了服务器上。

服务器上有专门的程序，对表单数据进行验证。

如果验证成功，将你的数据存入数据库（MySQL），则返回一个验证成功的消息。

如果验证失败，将返回一个错误信息。

从表单的工作原理来看：表单的***分两个部分，一是前台页面的***，二是后台PHP对表单数据的处理。

表单的结构

< form name="form1" align="center" method="get"
action="login.php" >


用户名： < input type="text"
name="username" / > < br
/ >


密 码： <
input type="password" name="usepwd" / < br /
>

< input type="submit"
value="提交表单" / >

< /form
>

< form > 标记属性——块元素

name：给表单起个名字，主要给JS来用，JS主要用来做客户端表单验证。

method：表单的提交方式，取值:get或POST。

action：指定表单的处理程序，一般是PHP文件。

如果action为空，那么表单数据提交给当前文件

encype：指定表单数据的编码方式（加密方式）。这个属性只能用在method="post"的情况下，有两个取值

application/x-www-form-urldecoded
//默认的传值加密方式

multipart/form-data //如果上传文件，该值必须是它自己

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"
>


< table
width="500" border="1" bordercolor="f0f0f0" rules="all"
cellpadding="5" align="center" >


< tr
>



< td
align="right" width="100" > 用户名: < /td
>



< td
> < input type="text"
name=""usename" / > < /td
>


< /tr
>


< /table
>

< /form
>

单行文本域

语法格式： < input type="text" 属性="值" /
>

常用属性：

name：文本框的名字。命名规则是：可以包含字母、数字、下划线，只能以字母开头。

type：表单元素的类型。

value：文本框中的值。

size：文本框的长度，以“字符”为单位。

maxLength：最多可以输入多少个字符，超出无法输入。

readonly：只读属性。可以选中，但不能修改。如，readonly="readonly"

disabled:禁用属性。不能选中，不能修改。如：disabled="disabled"

举例说明：

< input type="text" name=""usename" value="请输入你的用户名" /
>

单行密码域

语法格式： < 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="sex" value="女" / > 是

注意：一组单选按钮，只能选择一个，但name的值必须一致，如：name="sex".单选按钮用户不能自己输入内容，用户只能选择，因此必须为其指定默认值value。

复选框

语法格式： < input type="checkbox" 属性="值" /
>

常用属性:

name：元素的名称

value：元素的值

checked：默认选中。如：checkd="checked"

< tr >


< td
align="center"width="100" > 兴趣爱好： < /td
> < /td
>

< td
> < input type="checkbox"
name="like" value="爱吃猪肉" checked="checked"/ >
爱吃猪肉

< input
type="checkbox" name="like" value="爱玩游戏" / >
爱玩游戏

< input
type="checkbox" name="like" value="爱AA妹子" / >
爱AA

< input
type="checkbox" name="like" value="爱吃卤煮" / >
爱吃卤煮

< input
type="checkbox" name="like" value="爱吃猪肉" / >
爱吃猪肉

< input
type="checkbox" name="like" value="爱玩游戏" / >
爱玩游戏

< input
type="checkbox" name="like" value="爱AA妹子" / >
爱AA

< input
type="checkbox" name="like" value="爱吃卤煮" / >
爱吃卤煮

< /tr
>

注意：复选框也是一组选项，因此name的值必须一致。在PHP中，使用数组来获取多个同名的name的值。复选框选取可以同时选多个，也可以一个都不选。

下拉列表

语法格式:

< select name="名称" >



< option value="北京市"
> 北京市 < /option >







< option value="天津市"
> 天津市 < /option >







< /select >

< select > 标记属性只有一个name属性

< option >
标记的属性有两个：vlaue属性、selectd属性

selected：默认选中属性。如：select="select"

< select name="名称" >



< option value="黑猪 "
selected="selected" > 黑猪 < /option
>






< option value="白猪 市"
> 白猪 < /option >


< option value="花猪 "
> 花猪 < /option >


< option value="红猪 "
> 红猪 < /option >


< /select >

文本区域

语法格式： < textarea name="名称" cols="宽度" rows="高度"
> < /textarea
>

常用属性：

name：元素名称

cols：宽度，是指多少个字符宽。

rows：高度，是指几行高。

提示： < textarea > 和 < /textarea
> 之间是默认文本

各种按钮

提交按钮： < input type="submit" value="提交表单" /
>

重置按钮： < input type="reset" value="重新填写" /
>

图片按钮： < input type="image" src="images/02.jpg" /
>
//功能呢就是提交表单，与submit按钮功能一样。

普通按钮： < input type="button" value="关闭窗口" /
>

o


普通按钮本身不具备任何功能的，一般要与JS程序配合使用，实现相应的功能。

< input type="button" onclick="javascript:window.close()"
value="关闭窗口" / >

上传文件域

语法格式： < input type="file" 属性="属性" /
>

常用属性

name：表单位元素的名称

value：表单元素的值，这个值其实就是上传的文件名。value属性是只读属性，这个value的内容只能来字手动上传的文件，而不能用户自己指定一个路径。为了安全起见，value是只读的。

< td width="100" align="right"
> 上传图片： < /td >


< input
type="file" name="uploadfile" / >

注意：现在只能实现上传文件框，而不能真正实现上传功能，上传功能用PHP来实现。

< form name="form1" method="get" action="register.php"
enctype="multipart/form-data" >

< tr >



< td width="100"
align="right" > 上传图片： < /td
>





< td >
< input type="file"
name="uploadfile" / >
< /td >





< /tr >

以上两个配合使用，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 > 2016年猪头系列 < /caption
>


< tr >



< td > < /td
>


< td >
< /td >

< /tr
>

< /table
>

图片热点

给一张图片加多个链接，默认情况下，一张图只能加一个链接。

标记结构：

< img src="images/03.jpg" usemap="#map01"/
>



< map id="map01"
>



< area shape="热区形状" coords="热区坐标"
href="imges/04.jpg"/ >



< area shape="热区形状" coords="热区坐标"
href="imges/05.jpg"/ >



< area shape="热区形状" coords="热区坐标"
href="imges/06.jpg"/ >


< /map
>

< area > 标记的常用属性

shape：热区的形状。取值：rect（矩形）、circle（圆形）、polygon（多边形）

coords：热区的坐标（位置）

§

如果shape=rect时，那么coords="x1,y1（左上）,x2,y2（右下）"

如果shape=circle时，那么coords="x,y,r"，其中（x,y）为圆心坐标，r为半径