untitled.html

<h2>
    Login Form </h2>
<form class="myForm" method="get" enctype="application/x-www-form-urlencoded" action="/html/codes/html_form_handler.cfm">

    <label class="aud
ioOnly" for="user_email">Email</label>
    <input type="email" name="user_email" required placeholder="Email">

    <label class="audioOnly" for="user_pwd">Password</label>
    <input type="password" name="user_pwd" required placeholder="Password">

    <label>
<input type="checkbox"> Remember me
</label>

    <button>Log In</button>

</form>


<style>
    .myForm {
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        font-size: 0.8em;
        padding: 1em;
        border: 1px solid #ccc;
        border-radius: 3px;
    }
    
    .myForm * {
        box-sizing: border-box;
    }
    
    .myForm label {
        font-size: 0.9em;
    }
    
    .myForm .audioOnly {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }
    
    .myForm input {
        border: 1px solid #ccc;
        border-radius: 3px;
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        font-size: 0.9em;
        padding: 0.5em;
    }
    
    .myForm input[type="email"],
    .myForm input[type="password"] {
        width: 12em;
    }
    
    .myForm button {
        padding: 0.7em;
        border-radius: 0.5em;
        background: #eee;
        border: none;
        font-weight: bold;
        margin-left: 1.5em;
    }
    
    .myForm button:hover {
        background: #ccc;
        cursor: pointer;
    }
</style>