patternphpModerate
Login Form in HTML
Viewed 0 times
formloginhtml
Problem
I am a beginner and I have made Login Form in HTML. I'm pretty sure it will look horrible to any developer, but hey, that's why I've posted it.
I'd like a general review of this. I'm especially concerned about the quality and enhancements of this form.
```
Login Page
/ 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 #a8c9e
I'd like a general review of this. I'm especially concerned about the quality and enhancements of this form.
```
Login Page
/ 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 #a8c9e
Solution
This is one of those places where if you ask 10 developers the same question, you will get at least 15 answers, and they are all valid.
My 2 cents:
-
It's 2014. Use HTML5.
-
Discover jsfiddle.net for this kind of thing.
-
Put "required" on the username and password fields, it's free validation.
-
There's nothing wrong with in-page CSS. I often mix sitewide and in-page as needed. For the purpose of this example, it works just fine. (This does NOT mean ignore CSS classes)
-
Instead of
-
Learn this pattern for unset variables: the ternary operator.
-
The login message does not need a label (but it's not "wrong" to have it). incorporate the HTML in the stored message for cleaner output when there is no message
-
Your checkbox needs both a
My 2 cents:
-
It's 2014. Use HTML5.
-
Discover jsfiddle.net for this kind of thing.
-
Put "required" on the username and password fields, it's free validation.
-
There's nothing wrong with in-page CSS. I often mix sitewide and in-page as needed. For the purpose of this example, it works just fine. (This does NOT mean ignore CSS classes)
-
Instead of
echo @$_GET['msg'] (and resulting security issues) try echo $messages[$_GET['msg']] where $_GET['msg'] is a number. Define your messages server-side.-
Learn this pattern for unset variables: the ternary operator.
echo !empty($_GET['msg']) ? $messages[$_GET['msg']] : '' ;-
The login message does not need a label (but it's not "wrong" to have it). incorporate the HTML in the stored message for cleaner output when there is no message
-
Your checkbox needs both a
name= and value=Code Snippets
echo !empty($_GET['msg']) ? $messages[$_GET['msg']] : '' ;Context
StackExchange Code Review Q#47771, answer score: 18
Revisions (0)
No revisions yet.