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为半径