• HTML
• CSS

HTML

<form method="POST" action="">
    <h3>Ingresar ➭</h3>
    <input 
        type        = "text" 
        name        = "usuario" 
        placeholder = "Nombre de usuario" 
        pattern     = "[a-z]{1,5}" 
        title       = "Para validar su  nombre de usuario  se recomienda de 1 y 6 caracteres en minúsculas"
        required
    >
    
    <input
        type        = "password"
        name        = "contrasena"
        placeholder = "Contraseña"
        pattern     = "[a-zA-Z0-9!@#\$%\^&\*\?_~\/]{7,28}"
        title       = "Para que su contraseña sea segura se recomienda entre 7 y 28 caracteres,si es posible incluya mayúsculas y minúsculas ,y también puede utilizar números y carácteres especiales (! @ # $ % ^ & * ? _ ~ /)."
        required
    >
    
    <input type="submit" value="Enviar">
</form>

CSS

body{
    font-family:sans-serif;
}
form{
    background:#8e44ad;
    padding:10px;
    float:right;
}
form h3{
    color:#fff;
    margin:5px 0px;
}
form input{
    background:#f7dc6f;
    border:0px;
    padding:10px;
    margin:5px;
}
form input[type="submit"]{
    background:#fff;
    cursor:pointer;
}