Dreamweaver实现登录窗口界面（简单实例）

等日出看彩虹

于 2022-03-29 16:43:27 发布

阅读量1w

点赞数 4

分类专栏： HTML 文章标签： html html5

本文链接：https://blog.csdn.net/m0_54158068/article/details/123825094

版权

HTML 专栏收录该内容

9 篇文章

订阅专栏

窗口界面形式

如下图所示，使用HTML语言实现登录窗口界面。

窗口实现简略分析

如果要实现上图中的登录窗口界面，需要用到文本框（Text）、按钮（Button）、表格、表单（Form）等标记以及设置相关标签的属性。

如果要进一步实现用户输入用户名、密码点击登录可以提示登录成功或登录失败，可以进一步添加事件和方法，如使用JavaScript编写函数进行事件的动态响应，因只是一个简单实例，在这里不做太多介绍和功能实现，如果想要进一步学习，欢迎关注，后续推进。

代码实现

提示：编译环境采用的是“Dreamweaver CS6”，如果是更高版本DW软件，可以只选取标签“<title> </title>”中的内容，其余部分采用软件打开时自给的信息。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DW CS6实现登录窗口</title>
</head>

<body>
<form id="form1" runat="server">
        <div>
            <table style="width: 320px; text-align: center" border="1">
                <tr>
                    <td colspan="4" bgcolor="#99CCFF">用户登录</td>
                </tr>
                <tr>
                    <td colspan="2">用户名</td>
                    <td>
                        <input type="text" name="Text1" runat="server" width="200px" value="" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">密码</td>
                    <td>
                        <input type="text" name="Text2" runat="server" width="200px" value=""/>
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <input type="button" value="登录" runat="server" />
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>