my code stock.com

Daniel Zas

Formulario de Login y Registro con validaciones HTML5
by Daniel Zas

Snippet options

Download: Download snippet as formulario-de-login-y-registro-con-validaciones-html5.html.
Copy snippet: For this you need a free my code stock.com account.
Embed code : You will find the embed code for this snippet at the end of the page, if you want to embed it into a website or a blog!

<div id="login" class="form">
  <form  action="mysuperscript.php" autocomplete="on"> 
    <h1>Login</h1> 
    <p> 
        <label for="username" class="uname" > Nombre de usuario: </label>
        <input id="username" name="username" required="required" type="text" placeholder="Tu nombre de usuario"/>
    </p>
    <p> 
        <label for="password" class="youpasswd"> Contraseña:</label>
        <input id="password" name="password" required="required" type="password" placeholder="Tu password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Debe contener al menos un número y una letra minúscula y mayúscula, y al menos 8 o más caracteres"/> 
    </p>

    <p class="login button"> 
        <input type="submit" value="Login" /> 
    </p>
    <p class="change_link">
        Aún no eres miembro
        <a href="#toregister" class="to_register">Regístrate</a>
    </p>
  </form>
</div>




<div id="register" class="form">
  <form  action="mysuperscript.php" autocomplete="on"> 
    <h1> Registro</h1> 
    <p> 
        <label for="usernamesignup" class="uname" >Tu nombre</label>
        <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="Nombre" />
    </p>
    <p> 
        <label for="emailsignup" class="youmail" > Tu email</label>
        <input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="[email protected]"/> 
    </p>
    <p> 
        <label for="passwordsignup" class="youpasswd" >Tu password </label>
        <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Debe contener al menos un número y una letra minúscula y mayúscula, y al menos 8 o más caracteres"/> 
    </p>
    <p> 
        <label for="passwordsignup_confirm" class="youpasswd" >Confirma tu password </label>
        <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/>
    </p>
    <p class="signin button"> 
        <input type="submit" value="Registro"/> 
    </p>
    <p class="change_link">  
        Ya eres miembro
        <a href="#tologin" class="to_register"> Loguéate </a>
    </p>
  </form>
</div>

Create a free my code stock.com account now.

my code stok.com is a free service, which allows you to save and manage code snippes of any kind and programming language. We provide many advantages for your daily work with code-snippets, also for your teamwork. Give it a try!

Find out more and register now

You can customize the height of iFrame-Codes as needed! You can find more infos in our API Reference for iframe Embeds.