HTML - Formulario de login como el de facebook

   
Vista:

Formulario de login como el de facebook

Publicado por Juan Pablo (14 intervenciones) el 14/10/2013 15:06:43
Alguien sabe como puedo hacer un formulario como el que adjunto en la imagen de ejemplo, estilo facebook.



Lo he probado pero si hago que se ponga la etiqueta encima del text, no puedo poner mas controles a la derecha, se agregan uno debajo de otro.

Alguna sugerencia para hacer eso mismo?.

Un saludo
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Formulario de login como el de facebook

Publicado por xve (1178 intervenciones) el 14/10/2013 15:57:38
Hola Juan Pablo, aqui tienes un buen ejemplo... he intentado que quede lo mas parecido posible... haber que te parece:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <style>
        #login {
            padding:5px 0px;background-color:#3b5998;overflow:hidden;
            font-family:'lucida grande',tahoma,verdana,arial,sans-serif;font-size:11px;
        }
        #login input[type=text],#login input[type=password] {
            width:170px;border:1px solid #000;
        }
        #login input[type=checkbox] {
            margin:auto;vertical-align:top;
        }
        #login input[type=submit] {
            font-family:'lucida grande',tahoma,verdana,arial,sans-serif;font-size:11px;
            cursor:pointer;color:#fff;
            font-weight:bold;line-height:13px;background-color:#5b74a8;
            padding:3px 5px;border:1px solid;border-color: #29447e #29447e #1a356e;
        }
        .wrapper        {clear:both;}
        .wrapper>div    {float:left;width:170px;padding:0px 10px;}
        .wrapper .button{width:50px;}
        .titulo         {color:#fff;}
        .texto          {color:#98a9ca;}
        .texto a        {color:#98a9ca;text-decoration:none;}
    </style>
</head>
 
<body>
    <form id='login'>
        <div class='wrapper'>
            <div class="titulo">Correo o teléfono</div>
            <div class="titulo">Contraseña</div>
        </div>
        <div class='wrapper'>
            <div class="formulario"><input type="text" name="mail"></div>
            <div class="formulario"><input type="password" name="passwd"></div>
            <div class="button"><input type="submit" value="Entrar"></div>
        </div>
        <div class='wrapper'>
            <div class="texto"><input type="checkbox" name="session"> <span>No cerrar sesión</span></div>
            <div class="texto"><a href="#">¿Has olvidado tu contraseña?</div>
        </div>
    </form>
</body>
</html>

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Formulario de login como el de facebook

Publicado por Juan Pablo (14 intervenciones) el 14/10/2013 19:27:03
Perfecto, muchas gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Formulario de login como el de facebook

Publicado por Mauro (4 intervenciones) el 28/10/2013 00:16:36
Y alguien tiene un código para hacer el "Registro de usuarios"..... para registrarlos y poder acezar como lo hace "FACEBOOK"
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar