Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » Ayuda con formulario Login HTML5

HTML - Ayuda con formulario Login HTML5

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Ayuda con formulario Login HTML5

Publicado por Rodrigo (3 intervenciones) el 01/06/2015 22:26:13
Hola, tengo una duda con un formulario ya que no consigo cambiarlo, necesito que el checkbox se quede en la mitad de altura del botón Enviar y las letras se separen un poco del checkbox.

Archivo HTML index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Form Flat Design</title>
	<link rel="stylesheet" href="style/index_style.css"
</head>
<body>
	<section id="form">
		<p id="title">Login</p>
 
		<form action="">
			<input type="text" id="user" name="user" placeholder="Usuario">
			<input type="password" id="pass" name="pass" placeholder="Contrase&ntilde;a">
			<div></div>
			<input type="checkbox">Recordar Contrase&ntilde;a</input>
			<button type="submit">Entrar</button>
		</form>
	</section>
</body>
</html>


Archivo CSS index_style.css
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
*{
	margin:0px;
	padding:0px;
	font-family: Helvetica;
	font-weight: lighter;
}
 
html,body{
	background-color: #e2e2e2;

}
 
section#form{

	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -200px;
	margin-top: -300px;
	width: 400px;
	min-height: 100px;
	background-color: white;
	overflow: hidden;
	border-radius: 5px;
}
 
p#title{

	font-size: 1.6em;
	text-align: center;
	margin-top: 20px;
}
 
input[type="text"], input[type="password"]{
	width: 350px;
	height: 35px;
	margin-left: 20px;
	margin-top: 10px;
	padding-left: 10px;
	outline: none;
	font-size: 1.1em;
	border: 0px;
	background-color: #dcdcdc;

	border-radius: 5px;
}
 
button[type="submit"]{
	margin-left: 280px;
	margin-top: -20px;
	margin-bottom: 20px;
	width: 100px;
	height: 40px;
	outline: none;
	border: 0px;
	background-color: #75b6dc;

	color: white;
	font-size: 1.2em;
	border-radius: 5px;
	cursor:pointer;
	-webkit-box-shadow: 0px 5px 0px #659dbf;

	-mox-box-shadow: 0px 5px 0px #659dbf;

	-o-box-shadow: 0px 5px 0px #659dbf;

	-ms-box-shadow: 0px 5px 0px #659dbf;

}
 
input[type="checkbox"]{
	margin-left: 20px;
	margin-top: 20px;
	cursor:pointer;
}

Haber si podeis echarme un cable con el código y os doy permiso a utilizarlo para lo que querais. Saludos.
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

Ayuda con formulario Login HTML5

Publicado por xve (1543 intervenciones) el 02/06/2015 07:26:29
Hola Rodrigo, aqui te he realizado un cambio rápido para que veas como hacerlo...
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Form Flat Design</title>
	<style>
		*{
			margin:0px;
			padding:0px;
			font-family: Helvetica;
			font-weight: lighter;
		}
 
		html,body{
			background-color: #e2e2e2;

		}
 
		section#form{

			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -200px;
			margin-top: -300px;
			width: 400px;
			min-height: 100px;
			background-color: white;
			overflow: hidden;
			border-radius: 5px;
		}
 
		p#title{

			font-size: 1.6em;
			text-align: center;
			margin-top: 20px;
		}
 
		input[type="text"], input[type="password"]{
			width: 350px;
			height: 35px;
			margin-left: 20px;
			margin-top: 10px;
			padding-left: 10px;
			outline: none;
			font-size: 1.1em;
			border: 0px;
			background-color: #dcdcdc;

			border-radius: 5px;
		}
 
		button[type="submit"]{
			margin:10px 20px 20px 0;
			width: 100px;
			height: 40px;
			outline: none;
			border: 0px;
			background-color: #75b6dc;

			color: white;
			font-size: 1.2em;
			border-radius: 5px;
			cursor:pointer;
			-webkit-box-shadow: 0px 5px 0px #659dbf;

			-mox-box-shadow: 0px 5px 0px #659dbf;

			-o-box-shadow: 0px 5px 0px #659dbf;

			-ms-box-shadow: 0px 5px 0px #659dbf;

		}
 
		input[type="checkbox"]{
			margin-left: 20px;
			margin-top: 25px;
			cursor:pointer;
		}
	</style>
</head>
<body>
	<section id="form">
		<p id="title">Login</p>
 
		<form action="">
			<input type="text" id="user" name="user" placeholder="Usuario">
			<input type="password" id="pass" name="pass" placeholder="Contrase&ntilde;a">
			<div>
				<div style="float:left">
					<input type="checkbox">Recordar Contrase&ntilde;a
				</div>
				<div style="float:right">
					<button type="submit">Entrar</button>
				</div>
			</div>
		</form>
	</section>
</body>
</html>

ventana-login
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil

Ayuda con formulario Login HTML5

Publicado por Rodrigo (3 intervenciones) el 02/06/2015 14:44:41
Muchas gracias por la contestación tan rápida y eficiente. Creé el div pero no metí los dos input dentro, igualmente no conocía esos estilo de los div, por lo que no hubiera podido solucionarlo. Una pregunta mas sobre esto, me gustaría meter en el header 6 banderas y según clickaras en una o en otra cambiara de idioma el formulario sin tener que hacer 6 formularios, se puede hacer? Supongo que con PHP o Javascript se podrá, no? Saludos.
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