HTML Input Required is messing up my input

So I dont want to use the "Required" attribute, but in my if I dont put it in there it completely messes up the way I want my form to look.

So why does removing this change it? Its setup so when you click Email it will then move out of the way and look like the one that says password.

here is my html for this:

    <form action="./includes/login.inc.php" method="post">
        <div class="group">
            <input type="text" name="emailuid" required=""/><span class="highlight"></span><span class="bar"></span>
            <label>Email</label>
        </div>
        <div class="group">
            <input type="password" name="pwduid"/><span class="highlight"></span><span class="bar"></span>
            <label>Password</label>
        </div>
        <div class="btn-box">
            <button class="btn btn-submit" type="submit" name="login-submit">Sign in</button>
        </div>
    </form>

And here is my CSS styling (Just for the forms!)

form {
  width: 320px;
  margin: 45px auto;
}
form h1 {
  font-size: 3em;
  font-weight: 300;
  text-align: center;
  color: #2196F3;
}
form h5 {
  text-align: center;
  text-transform: uppercase;
  color: #c6c6c6;
}
form hr.sep {
  background: #2196F3;
  box-shadow: none;
  border: none;
  height: 2px;
  width: 25%;
  margin: 0px auto 45px auto;
}
form .emoji {
  font-size: 1.2em;
}
.group {

position: relative;

margin: 45px 0;

}
textarea {

resize: none;

}
input,

textarea {

background: none;

color: #4F4F4F;

font-size: 18px;

padding: 10px 10px 10px 5px;

display: block;

width: 320px;

border: none;

border-radius: 0;

border-bottom: 1px solid #4F4F4F;

}

input:focus,

textarea:focus {

outline: none;

}

input:focus ~ label, input:valid ~ label,

textarea:focus ~ label,

textarea:valid ~ label {

top: -14px;

font-size: 12px;

color: #FF3B3F;

}

input:focus ~ .bar:before,

textarea:focus ~ .bar:before {

width: 335px;

}
input[type=“password”] {

letter-spacing: 0.3em;

}
label {

color: #4F4F4F;

font-size: 16px;

font-weight: normal;

position: absolute;

pointer-events: none;

left: 5px;

top: 10px;

-webkit-transition: 300ms ease all;

transition: 300ms ease all;

}
.bar {

position: relative;

display: block;

width: 320px;

}

.bar:before {

content: ‘’;

height: 2px;

width: 0;

bottom: 0px;

position: absolute;

background: #FF3B3F;

-webkit-transition: 300ms ease all;

transition: 300ms ease all;

left: 0%;

}
.btn {

background: #fff;

color: #959595;

border: none;

padding: 10px 20px;

border-radius: 3px;

letter-spacing: 0.06em;

text-transform: uppercase;

text-decoration: none;

outline: none;

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

-webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

}

.btn:hover {

color: #752021;

box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12);

}

.btn.btn-link {

background: #FF3B3F;

color: #d3eafd;

}

.btn.btn-link:hover {

background: #0d8aee;

color: #deeffd;

}

.btn.btn-submit {

background: #FF3B3F;

color: white;

}

.btn.btn-submit:hover {

background: #752021;

color: white;

}

.btn.btn-cancel {

background: #eee;

}

.btn.btn-cancel:hover {

background: #e1e1e1;

color: #8b8b8b;

}
.btn-box {

text-align: center;

margin: 50px 0;

}

I’m just so confused why its forcing my use the required attribute, I don’t want to use it as I made a php checker to see if the fields are empty. And this is messing with my styling of how I want it to look.

Thanks for any help.

#html5 #html #css