HiveBrain v1.2.0
Get Started
← Back to all entries
patternphpModerate

Login Form in HTML

Submitted by: @import:stackexchange-codereview··
0
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

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 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.