表单1

表单简介

首先来看下几个门户网站的用户注册界面：

淘宝

11.png

百度：

12.png

这些都是表单的内容，也是一个网站的必备功能，接下来，我们来看表单的基础知识：

表单的概念

表单主要用来获取客户端用户数据(信息)的。如：注册表单、查询表单、登录表单等。

表单的工作原理

  • 浏览有表单的网页，填写一些必要的信息，然后点击某个按钮进行提交。
  • 这些表单数据，通过互联网，传递到了服务器上。
  • 服务器上有专门的程序，对表单数据进行验证。如果验证成功，将你的数据存入数据库(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>

在本地测试时，填写了信息，然后点击提交之后，可以观察到浏览器地址栏变成

15.png

上面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提交方式一样

表单与表格的嵌套

之前制作的注册页面，几个元素的对齐是混乱的

16.png

我们可以利用表格和表单的嵌套，使得页面更加规则

<!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来实现

posted @ 2022-05-26 11:25  ppqppl  阅读(28)  评论(0)  编辑  收藏  举报