I am currently designing a login form that includes a registration form as well. Using jQuery, the email field is generated dynamically.
The labels are positioned below the fields so that they can be placed inside the field. As the field gains focus or has content in it, the label moves above the field.
However, this functionality seems to work fine for the username and password fields but not for the email field. The reason behind this issue is unknown.
For reference, here's the link to the codepen:
http://codepen.io/andornagy/pen/waoyZB
$(document).ready(function(){
var inp = $('#emailhere');
var i = 0;
var emailField = $('<section class="emailc"><input type="email" name="email" id="email" class="field"><label for="email" class="email">E-mail</label></section');
// Do stuff when you click to show register form
$('ul.tabs li.register').click(function(){
$('#do').val('register');
$('.button').val('Register');
if ( i < 1 ) {
$('#emailhere').after(emailField);
};
});
// Do stuff when you click to show login form
$('ul.tabs li.login').click(function(){
$('.emailc').remove();
var i = 0;
$('#do').val('login');
$('.button').val('Login');
});
// Moving the input labels correctly.
$('#login').on("blur", "input",function() {
// Make the label stay above if the field is not empty.
if( this.value ) {
$(this).next().addClass('notEmpty');
}
// Make the label go back on the field if the field is empty.
if( !this.value ) {
$(this).next().removeClass('notEmpty');
}
});
});
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);
body {
margin: 0;
padding: 0;
background-color: #4A5043;
font-family: 'Roboto Slab', serif;
}
.clear:after {
display: block;
content:" ";
clear: both;
}
/* The Base container styles
===================================*/
.tabs {
display: block;
margin: -25px -25px 40px -25px;
padding: 0;
border-bottom: 3px solid #FFFFFF;
}
.tabs li {
display: block;
list-style: none;
float: left;
width: 125px;
margin: 0;
padding: 15px 25px 19px 25px;
font-size: 22px;
color: #FFFFFF;
text-align: center;
}
.tabs .login {
border-right: 1px solid #FFFFF;
}
#form {
width: 300px;
margin: 150px auto;
background-color: #5C505A;
padding: 25px;
}
#form .field {
display: block;
padding: 10px;
font-size: 22px;
margin-top: 14px;
border: 3px solid #FFFFFF;
}
#form .button:focus,
#form .field:focus {
outline: none;
border-color:; #000000;
}
#form .field + label {
position: relative;
bottom:42px;
padding: 10px;
font-size: 22px;
color: #5C505A;
z-index: 999;
}
#form .field + .notEmpty,
#form .field:focus + label {
bottom: 88px;
color: #FFFFFF;
}
#form label:focus + label {
bottom: 0;
color: #5C505A;
}
#form .button,
#form .button:hover,
#form .field + label,
#form .field:focus + label {
transition: 0.5s bottom,
0.5s color,
0.5s border-color,
0.5s background-color;
}
#form .button {
display: block;
width: 294px;
padding: 10px;
font-size: 22px;
border: 3px solid #FFFFFF;
background:none;
color: #FFFFFF;
}
#form .button:hover {
color: #5C505A;
background:#FFFFFF;
}
<!-- #form container -->
<section id="form">
<ul class="tabs clear">
<li class="login">Login</li>
<li class="register">Register</li>
</ul>
<!-- #login container -->
<section id="login">
<!-- Login form -->
<form name="login" action="#">
<!-- Username field -->
<p>
<input type="text" name="username" id="username" class="field">
<label for="username">Username</label>
</p>
<div id="emailhere"></div>
<!-- Password field -->
<input type="password" name="password"id="password" class="field">
<label for="password">Password</label>
<!-- hidden value for validation -->
<input type="hidden" id="do" name="do" value="login">
<!-- submit button -->
<input type="submit" class="button" name="submit" value="Login">
</form><!-- /ends Login form -->
</section><!-- #login ends -->
<!-- #register container -->
<section id="register">
</section><!-- #register ends -->
</section><!-- #form ends -->