HTML Input Required is messing up my input

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Colorful Drop-Down Menu in HTML CSS | Drop-Down Menu in HTML CSS

Download File: https://drive.google.com/file/d/1PpbVEw_mSvUPfA0WqdgcKWSoc-VnqgqW/view?usp=sharing Want to create a Drop-Down Menu with HTML & CSS? Check out ...

HTML5 Canvas Text Animation Tutorial [HTML, CSS, JavaScript]

Website header text made out entirely of interactive bubble particles? Why not :) In today's HTML5 canvas text animation tutorial we will build it together using nothing but plain HTML, CSS and pure vanilla JavaScript. No frameworks and no libraries. Let's improve our understanding of these 3 fundamental web development technologies and create something cool in the process. HTML5 Canvas Text Animation Tutorial [HTML, CSS, JavaScript]

Know Everything About HTML With HTML Experts

HTML Assignment Help Australia @30% OFF from Sample Assignment, with Our Best HTML assignment help experts. Get HTML homework help online at affordable price. 100% Plag free assignment solution.

An Introduction to HTML & CSS

At the heart of any general website or web page are lines of code in HTML and CSS. HTML, the web development language to render content and CSS, which styles the content.

HTML 5 Tutorial: How to create a table using HTML tags and Stylesheet (CSS)

In this article, we want to show you how to create a table using HTML tags and Stylesheet (CSS). HTML table may vary depends on data and style requirements. Sometimes, in the real application, we use an HTML table as a layout of the Email template in HTML format.