HTML - Formulario de login como el de facebook

 
Vista:
sin imagen de perfil

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
Val: 1.144
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Formulario de login como el de facebook

Publicado por xve (1543 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
sin imagen de perfil

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
sin imagen de perfil

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

Formulario de login como el de facebook

Publicado por Jefferson (1 intervención) el 04/07/2023 19:10:52
puedes pasar el css tambien por favor?
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
sin imagen de perfil
Val: 2
Ha aumentado su posición en 16 puestos en HTML (en relación al último mes)
Gráfica de HTML

Formulario de login como el de facebook

Publicado por iniciar (1 intervención) el 09/10/2018 15:35:20
Actualmente hay herramientas más cómodas que te permiten iniciar sesion con facebook en una web, deberías probarla. Si usas wordpress hay cientos de plugins para login con 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