我是一个初学者，已经用HTML制作了登录表单。我敢肯定，对于任何开发人员来说，它看起来都会很恐怖，但是，这就是为什么我将其发布。

，我希望对此进行一般性的评论。我特别关注此表单的质量和增强功能。

<!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>Login Page</title>
<style>
/* Basics */
html, body {
    width: 100%;
    height: 100%;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    color: #444;
    -webkit-font-smoothing: antialiased;
    background: #f0f0f0;
}
#container {
    position: fixed;
    width: 340px;
    height: 280px;
    top: 50%;
    left: 50%;
    margin-top: -140px;
    margin-left: -170px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);

}
form {
    margin: 0 auto;
    margin-top: 20px;
}
label {
    color: #555;
    display: inline-block;
    margin-left: 18px;
    padding-top: 10px;
    font-size: 14px;
}
p a {
    font-size: 11px;
    color: #aaa;
    float: right;
    margin-top: -13px;
    margin-right: 20px;
 -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: all .4s ease;
}
p a:hover {
    color: #555;
}
input {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    outline: none;
}
input[type=text],
input[type=password] ,input[type=time]{
    color: #777;
    padding-left: 10px;
    margin: 10px;
    margin-top: 12px;
    margin-left: 18px;
    width: 290px;
    height: 35px;
    border: 1px solid #c7d0d2;
    border-radius: 2px;
    box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: all .4s ease;
    }
input[type=text]:hover,
input[type=password]:hover,input[type=time]:hover {
    border: 1px solid #b6bfc0;
    box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8;
}
input[type=text]:focus,
input[type=password]:focus,input[type=time]:focus {
    border: 1px solid #a8c9e4;
    box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
}
#lower {
    background: #ecf2f5;
    width: 100%;
    height: 69px;
    margin-top: 20px;
      box-shadow: inset 0 1px 1px #fff;
    border-top: 1px solid #ccc;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
input[type=checkbox] {
    margin-left: 20px;
    margin-top: 30px;
}
.check {
    margin-left: 3px;
    font-size: 11px;
    color: #444;
    text-shadow: 0 1px 0 #fff;
}
input[type=submit] {
    float: right;
    margin-right: 20px;
    margin-top: 20px;
    width: 80px;
    height: 30px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #acd6ef; /*IE fallback*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8));
    background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
    background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
    border-radius: 30px;
    border: 1px solid #66add6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
    cursor: pointer;
}
input[type=submit]:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8));
    background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
    background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
}
input[type=submit]:active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8), to(#b6e2ff));
    background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
    background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
}
</style>

</head>

<body>

    <!-- Begin Page Content -->
    <div id="container">
        <form action="login_process.php" method="post">
            <label for="loginmsg" style="color:hsla(0,100%,50%,0.5); font-family:"Helvetica Neue",Helvetica,sans-serif;"><?php  echo @$_GET['msg'];?></label>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username">
            <label for="password">Password:</label>
            <input type="password" id="password" name="password">
            <div id="lower">
                <input type="checkbox"><label class="check" for="checkbox">Keep me logged in</label>
                <input type="submit" value="Login">
            </div><!--/ lower-->
        </form>
    </div><!--/ container-->
    <!-- End Page Content -->
</body>
</html>


评论

由于用户名和密码字段是必填字段，因此您可以根据需要标记这些字段。
我认为XHTML中没有必填属性。
好问题！
@Sandeep我知道，但是他正在使用XHTML。
如下面的@paul所述：使用HTML5。这意味着使用<！DOCTYPE html>代替当前在doctype声明中拥有的内容。参考

#1 楼

在这些地方，如果您向10个开发人员提出相同的问题，您将至少获得15个答案，并且都有效。

我的2美分：


是2014年。请使用HTML5。
发现这种情况。
在用户名和密码字段中输入“必填”，可以免费验证。
页内CSS没什么问题。我经常根据需要在网站范围和页面内混合使用。就本示例而言，它工作得很好。 （这并不意味着忽略CSS类）
尝试使用echo @$_GET['msg']代替echo $messages[$_GET['msg']]（以及由此引起的安全问题），其中$_GET['msg']是一个数字。在服务器端定义您的消息。

了解此模式以了解未设置的变量：三元运算符。

echo !empty($_GET['msg']) ? $messages[$_GET['msg']] : '' ;


登录消息不需要标签（但是拥有它并不是“错误”）。当没有消息时，将HTML合并到存储的消息中以更清洁地输出
您的复选框同时需要name=和value=


评论

\ $ \ begingroup \ $
两个问题：1）HTML5（在这种情况下）的具体优势是什么？ 2）为什么不回显空的（$ _GET ['msg']）？ ”：$ messages [$ _ GET ['msg']]; （没有否定）？
\ $ \ endgroup \ $
–user16413
14年4月21日在22:48
\ $ \ begingroup \ $
@谁编辑了我的答案：只是“必填”，而不是class =“ required”。
\ $ \ endgroup \ $
–保罗
2014年4月22日在8:57
\ $ \ begingroup \ $
@Rolazaro Azeveires：HTML5可以完成XHTML的所有工作，甚至更多。您仍然使用Windows 2000或OSX Panther吗？两者都很棒。
\ $ \ endgroup \ $
–保罗
2014年4月22日在8:59
\ $ \ begingroup \ $
@Rolazaro Azeveires：empty（$ _ GET ['msg']）绝对没有错吗？ ”：$ messages [$ _ GET ['msg']];那只是“ ... 15个答案，而且都是有效的”的一部分
\ $ \ endgroup \ $
–保罗
2014年4月22日在9:01
\ $ \ begingroup \ $
+99获得有关Win2K和OSX Panther的参考。大声笑。
\ $ \ endgroup \ $
–azngunit81
2014年4月23日在7:11

#2 楼

从安全角度考虑，您需要确保a）永远不要信任用户，b）永远不要信任用户。

您应该认识到任何人都可以访问GET参数，例如

<?php  echo @$_GET['msg'];?>


因此应避免。打印输出时，请始终致电从用户那里得到的东西htmlspecialchars()。否则，我可以制作一个像http://yourwebsite/form.php?msg=<script>alert("lololol");</script>这样的URL并在您的网页上注入任意JavaScript。诱使某人单击这样的链接非常容易，以使他们在其会话中运行我的代码。

顺便说一句，人们经常发现使用错误抑制（@）不好的风格。这也很慢。

此外，您需要确保您的表单不容易受到CSRF攻击。防止这种情况的方法通常是，根据请求向表单中添加一个一次性的，每次请求的令牌。这个主题太大，无法在这里讨论，所以我要问Google。 OWASP通常是网站安全的重要资源。

HTML方面，请注意，您正在编写XHTML，这要遵循DOCTYPE进行。这意味着您应该注意编写有效的XML。在XML中，您需要关闭每个标签。您还需要关闭仅具有“ open”标签的标签，例如<img>，<br>和<input>。这可以通过在关闭/之前添加正斜杠（>）来完成。因此，在XHTML中，<input>必须为<input />。

如果您希望表单字段实际提交结果，请确保它们都具有name属性。该复选框当前没有。

最后您很好地使用了<label>标签。但是，您应该注意for需要引用id标签的<input>，因此复选框的<label>没有引用正确的字段。

我不是一个CSS向导，所以我会离开总的来说，一旦修复了这些小错误，它的格式比我在野外见过的很多更好:)

评论

\ $ \ begingroup \ $
htmlentities（）在大多数情况下都是过度使用，htmlspecialchars（）可以很好地完成工作。
\ $ \ endgroup \ $
–bjb568
2014年4月21日在22:34
\ $ \ begingroup \ $
@ bjb568我总是忘记使用哪个:)
\ $ \ endgroup \ $
–汤姆·威格斯（Thom Wiggers）
2014年4月22日在11:10

#3 楼

我不是HTML方面的专家，但是我使用起来相当不错，可以为您提供以下建议：


从您的HTML页面中分离CSS，它已经好处是，您已将HTML元素的CSS（大多数）分开了，但是您想使用外部样式表，并将其包含在页面中。这使两个部分都更加清晰（提示：请不要混用编程语言），并允许您轻松地在多个页面上重用样式表。
在适用的地方使用class标记。 class标签可以重复使用，通常应多次使用，而id标签则用于唯一元素。这意味着<div id="container">和<div id="lower">应该是class，而不是id。
不要在HTML标记中偷偷潜入某些CSS。您使用loginmsg标签完成了此操作，应该给它一个id字段并在样式表中引用它。
我不会抑制PHP中的警告消息（@），它们通常是有原因的。
（正在）发送msg（应出现在loginmsg标签中）作为GET参数，因此正在接收用户输入。在这种情况下，这很容易被篡改，POST参数也可能被篡改，但这会稍微困难一些。
您应该在那里验证输入，恶意攻击者可以尝试向其中注入javascript代码，会将示例重定向到另一个（邪恶的）页面。

这绝不是一个完整的评论，但这是我发现的所有要点。

#4 楼

我只会提及其他答案中尚未解决的项目。在Firefox中查看表单时，我看到以下内容：

我已经在Username:标签前圈出了奇数个多余的空格，并绘制了一个箭头以显示该框缺少的底部。


如果您的PHP脚本未返回消息，则多余的空间是用户将看到的。一种解决方法是在两个标签之间简单插入一个<br/>标签。
缺少该框的底部是由于您在CSS中确定了container的大小。有点短。


评论

\ $ \ begingroup \ $
实际上，

#5 楼

我在浏览器中获得了宽度滚动条窗口：

html, body {
    width: 100%;
    height: 100%;
}


我得到了不必要的滚动条。不需要宽度和高度，因此只需从CSS中删除它们即可。

#6 楼

另一件事：

将您的复选框包裹在标签内，以便单击该复选框和“保持登录状态”文本，将取消/激活该复选框。它不是必需的，但它是很好的UX。

<div id="lower">
    <label class="check" for="checkbox"><input type="checkbox"> Keep me logged in</label>
    <input type="submit" value="Login">
</div>


评论

\ $ \ begingroup \ $
除了将输入包装在标签中外，您还可以为输入添加一个与标签的匹配的id。