0

Tengo un formulario al cual tiene como propiedad id="miformulario", en el cual pido los datos para acceder a una página web.

Quiero que aparezca en este formulario en la esquina superior izquierda un icono/imagen.

¿Qué propiedades debo utilizar, además de margin y padding? ¿Se puede agregar la imagen desde CSS o hay que incluirla en el HTML con <.img src="..." .../>

Imaginad que la imagen se llama "imagenes/prueba.jpg" con un tamaño height=12 y width=12

* {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	box-sizing: border-box;
}

body {
	/*background: #DEDEDE;*/
	display: flex; /*Centrado en la página tanto vertical como horizontal.*/
	min-height: 100vh;
	/*background-size: cover;*/
	background-repeat: no-repeat;
	background-size: 100%;
}

form{
	margin: auto;
	width: 50%;
	max-width: 500px;
	background: #F3F3F3;
	padding: 30px;
	border: 2px solid black;
}

h2{
	text-align: center;
	margin-bottom: 20px;
	color: rgba(0,0,0,0.5);
}

h4{
	text-align: center;
}

input{
	display: block;
	padding: 10px;
	width: 100%;
	margin: 30px 0;
	font-size: 14px;
}

input[type="submit"] {
	background: linear-gradient(#FFDA63, #FFB940);
	border: 0;
	width: 160px;
	color: brown;
	opacity: 0.8;
	cursor: pointer;
	border-radius: 20px;
	margin-bottom: 0;
}

.form-link{
	font-size: 14px;
}


a:hover  {
    color: red;
}
<!DOCTYPE html>
<html lang="es">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Formulario de Login - Cliente</title>
		<link rel="stylesheet" href="css/estilos_iniciar_sesion.css">
		<script type="text/javascript" src="js/validar_iniciar_sesion_cliente.js"></script>
	</head>
	
	<body background="imagenes/fondo_campo2.jpg">
		<form name="miformulario" id="miformulario" action="logueo_cliente.php" method="POST" class="form" onsubmit="return validar_iniciar_sesion_cliente();">
			<h2>CLIENTE</h2>
			<h4>INICIAR SESIÓN</h4>
			<input type="text" placeholder="&#128272; Usuario" name="email" id="email" tabindex="1">
			<input type="password" placeholder="&#128272; Contraseña" name="password" id="password" tabindex="2">
			<div id="mensaje" align="center">
                <?php if(isset($_GET['error']) && $_GET['error'] == 'true'): ?>
                    <h4><p style="color:red;">¡Sus datos no son correctos!</p></h4>
                <?php endif; ?>
            </div>
			<div id="iniciar" align="center">
				<input type="submit" value="Iniciar sesión"><br/>
				<p class="form-link">¿Aún no tienes una cuenta? <a href="registrar.php">Regístrate aquí</a></p><br/>
				<p class="form-link"><a href="recuperar_contrasena.php">He olvidado mi contraseña</a></p><br/><hr/><br/>
				<p class="form-link"><img src="imagenes/entrar.jpg" height="10px" width="10px" alt="invitado"/>&nbsp;<a href="reservar.php">Entrar como invitado</a></p>
			</div>
		</form>
	</body>
</html>

3 respuestas 3

4

Los estilos en linea en la imagen los puedes poner en el css, esto solo es un ejemplo.

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  box-sizing: border-box;
}

body {
  /*background: #DEDEDE;*/
  display: flex;
  /*Centrado en la página tanto vertical como horizontal.*/
  min-height: 100vh;
  /*background-size: cover;*/
  background-repeat: no-repeat;
  background-size: 100%;
}

form {
  margin: auto;
  width: 50%;
  max-width: 500px;
  background: #F3F3F3;
  padding: 30px;
  border: 2px solid black;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
  color: rgba(0, 0, 0, 0.5);
}

h4 {
  text-align: center;
}

input {
  display: block;
  padding: 10px;
  width: 100%;
  margin: 30px 0;
  font-size: 14px;
}

input[type="submit"] {
  background: linear-gradient(#FFDA63, #FFB940);
  border: 0;
  width: 160px;
  color: brown;
  opacity: 0.8;
  cursor: pointer;
  border-radius: 20px;
  margin-bottom: 0;
}

.form-link {
  font-size: 14px;
}

a:hover {
  color: red;
}
<!DOCTYPE html>
<html lang="es">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Formulario de Login - Cliente</title>
  <link rel="stylesheet" href="css/estilos_iniciar_sesion.css">
  <script type="text/javascript" src="js/validar_iniciar_sesion_cliente.js"></script>
</head>

<body background="imagenes/fondo_campo2.jpg">
  <form name="miformulario" id="miformulario" action="logueo_cliente.php" method="POST" class="form" onsubmit="return validar_iniciar_sesion_cliente();">
  <!--aqui coloco la imagen con sus estilos-->
  <img src="https://placeimg.com/640/480/any" style="height:32px; width:32px; top:0; left=0; padding-top:0;" >
    <h2>CLIENTE</h2>
    <h4>INICIAR SESIÓN</h4>
    <input type="text" placeholder="&#128272; Usuario" name="email" id="email" tabindex="1">
    <input type="password" placeholder="&#128272; Contraseña" name="password" id="password" tabindex="2">
    <div id="mensaje" align="center">
      <?php if(isset($_GET['error']) && $_GET['error'] == 'true'): ?>
      <h4>
        <p style="color:red;">¡Sus datos no son correctos!</p>
      </h4>
      <?php endif; ?>
    </div>
    <div id="iniciar" align="center">
      <input type="submit" value="Iniciar sesión"><br/>
      <p class="form-link">¿Aún no tienes una cuenta? <a href="registrar.php">Regístrate aquí</a></p><br/>
      <p class="form-link"><a href="recuperar_contrasena.php">He olvidado mi contraseña</a></p><br/>
      <hr/><br/>
      <p class="form-link"><img src="imagenes/entrar.jpg" height="10px" width="10px" alt="invitado" />&nbsp;<a href="reservar.php">Entrar como invitado</a></p>
    </div>
  </form>
</body>

</html>

2

Desde los estilos puedes traer la imagen así:

.idImagen {
   background-image: url("paper.gif");
   background-color: #cccccc;
}

y así puedes ponerla en la ezquina:

.idImagen {
   background-image: url("paper.gif");
   position: absolute; 
   top: 0; 
   left: 0;
}

y si trabajas con modelo de cajas es mas sencillo. http://www.ite.educacion.es/formacion/materiales/182/cd/once/el_modelo_de_caja.html

2

para hacerlo te puedes ayudar de los pseudoelementos ::before o ::after.

Simplemente a #miformulario, le añadimos un position: relative y luego agregamos el seudo así:

#miformulario::before{
  /*lo dejamos vacio, pero lo ponemos, es importante.*/
  content: ''; 
  /*para que se comporte como un div*/
  display: block; 
  /*O la medida que quieras para el icono*/
  width: 50px; height: 50px; 
  /*la imagen del icono*/
  background-image: url('imagen.png'); 
  /*Toma todo el ancho del pseudoelemento y 
  * automáticamente la altura por defecto de la imagen*/
  background-size: 100% auto; 
  /*para posicionarlo en donde queramos*/
  position: absolute; 
  top: 0; left: 0; 
  /*para posicionarlo en la esquina superior izquierda*/
  /*Puedes cambiar left por right y top por bottom, 
  *depende de donde lo quieras poner*/
}

De esta manera si agregar o modificar el html, puedes agregar una imagen con solamente fines estéticos. Lo otro es que si la imagen ya está estará recortada al tamaño final, puedes desechar las propiedades background-image y background-size y reemplazar la propiedad content: ''; que dejamos vacío antes y añadirle la imagen de una vez: content: url('imagen.png');

Te dejo un ejemplo con tu mismo código. Los nuevos estilos están debajo de los tuyos.

* {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	box-sizing: border-box;
}

body {
	/*background: #DEDEDE;*/
	display: flex; /*Centrado en la página tanto vertical como horizontal.*/
	min-height: 100vh;
	/*background-size: cover;*/
	background-repeat: no-repeat;
	background-size: 100%;
}

form{
	margin: auto;
	width: 50%;
	max-width: 500px;
	background: #F3F3F3;
	padding: 30px;
	border: 2px solid black;
}

h2{
	text-align: center;
	margin-bottom: 20px;
	color: rgba(0,0,0,0.5);
}

h4{
	text-align: center;
}

input{
	display: block;
	padding: 10px;
	width: 100%;
	margin: 30px 0;
	font-size: 14px;
}

input[type="submit"] {
	background: linear-gradient(#FFDA63, #FFB940);
	border: 0;
	width: 160px;
	color: brown;
	opacity: 0.8;
	cursor: pointer;
	border-radius: 20px;
	margin-bottom: 0;
}

.form-link{
	font-size: 14px;
}


a:hover  {
    color: red;
}

#miformulario{
  position: relative;
}

#miformulario::before{
  content: '';
  display: inline-block;
  background-image: url('https://resnickscity.files.wordpress.com/2009/06/firefox-habemus-icon.jpg');
  background-size: 100% auto;
  width: 50px;
  height: 50px;  
  position: absolute;
  top: 0;
  right: 0;
}
<!DOCTYPE html>
<html lang="es">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Formulario de Login - Cliente</title>
		<link rel="stylesheet" href="css/estilos_iniciar_sesion.css">
		<script type="text/javascript" src="js/validar_iniciar_sesion_cliente.js"></script>
	</head>
	
	<body background="imagenes/fondo_campo2.jpg">
		<form name="miformulario" id="miformulario" action="logueo_cliente.php" method="POST" class="form" onsubmit="return validar_iniciar_sesion_cliente();">
			<h2>CLIENTE</h2>
			<h4>INICIAR SESIÓN</h4>
			<input type="text" placeholder="&#128272; Usuario" name="email" id="email" tabindex="1">
			<input type="password" placeholder="&#128272; Contraseña" name="password" id="password" tabindex="2">
			<div id="mensaje" align="center">
                <?php if(isset($_GET['error']) && $_GET['error'] == 'true'): ?>
                    <h4><p style="color:red;">¡Sus datos no son correctos!</p></h4>
                <?php endif; ?>
            </div>
			<div id="iniciar" align="center">
				<input type="submit" value="Iniciar sesión"><br/>
				<p class="form-link">¿Aún no tienes una cuenta? <a href="registrar.php">Regístrate aquí</a></p><br/>
				<p class="form-link"><a href="recuperar_contrasena.php">He olvidado mi contraseña</a></p><br/><hr/><br/>
				<p class="form-link"><img src="imagenes/entrar.jpg" height="10px" width="10px" alt="invitado"/>&nbsp;<a href="reservar.php">Entrar como invitado</a></p>
			</div>
		</form>
	</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.