html登录页面输入账号密码才能跳转

HTML页面用 script 验证不是必须要用 form 的，可以直接给页面里的 DOM 对象定义 id 属性，用 javascript *** 作 DOM 对象即可。

针对您提的问题想要实现的效果，下面说说不用 form 表单和数据库来实现用户名和密码验证的方法：

1、首先，给 HTML 页面里的用户名和密码输入框都定义一个id属性，例如：

用户名：

密   码：

2、其次，放置一个按钮登录

3、编写 javascript 脚本代码，主要思路如下：

（1）为按钮增加一个 click 的监听，当鼠标点击该按钮时执行；

（2）获取 input 用户名和密码输入框的输入值；

（3）验证输入值是否符合要求；

（4）符合要求页面跳转到设置的指定页面；

（5）不符合要求提示用户输入错误。

4、最后，在浏览器里运行该页面，测试一下效果。完整代码如下图所示。

form表单的action 与url跳转是不一样的：

form表单可以给后台传递数据，在后台直接可以用request对象去向前台请求数据。

form表单传递数据有两种方式：

method="post":这是传递大量数据时用的，在数据传递之前会先将数据打包，因此这种传递数据的方式会效率会比较慢，但是穿过的数据都能正确解析，因此传中文不会有乱码。

method="get"：以URL传递的，因为地址栏长度有限，所以对数据量是有限制的，而且传递的数据必须是ASCCI码值范围内的，因此，传中文会有乱码，需特殊处理。

url跳转到action只能通过url的参数来传递数据，action?参数名=参数值&……，在后台也可以用request对象去向前台请求url的参数值（url传中文参数需要进行特殊处理）

需要在一张图片上设置多个能点击跳转的链接区域时，推荐使用网页的热点链接。

参考代码如下：

<map name="Map" id="Map">

  <area shape="rect" coords="89,41,379,136" href="#" target="baidu.com" />

  <area shape="rect" coords="89,175,394,264" href="#" />

  <area shape="rect" coords="95,293,386,355" href="#" />

</map>

网页热点使用方法：

个人推荐Dreamwever可视化 *** 作来创建网页热点。

1、打开Dreamwever，新建一个页面，插入一张图片，

2、使用左下角的热点工具。

3、点击“矩形”或其他热点工具，再在图片上拖动位置

4、选中其中一个热点，在下方的属性窗口中的链接栏填上你的链接，热点链接就创建完成了。

---