Colocar una imagen esquina superior izquierda formulario CSS

publicado por: Anonymous

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

_x000D_

_x000D_

* {_x000D_
	margin: 0;_x000D_
	padding: 0;_x000D_
	font-family: sans-serif;_x000D_
	box-sizing: border-box;_x000D_
}_x000D_
_x000D_
body {_x000D_
	/*background: #DEDEDE;*/_x000D_
	display: flex; /*Centrado en la página tanto vertical como horizontal.*/_x000D_
	min-height: 100vh;_x000D_
	/*background-size: cover;*/_x000D_
	background-repeat: no-repeat;_x000D_
	background-size: 100%;_x000D_
}_x000D_
_x000D_
form{_x000D_
	margin: auto;_x000D_
	width: 50%;_x000D_
	max-width: 500px;_x000D_
	background: #F3F3F3;_x000D_
	padding: 30px;_x000D_
	border: 2px solid black;_x000D_
}_x000D_
_x000D_
h2{_x000D_
	text-align: center;_x000D_
	margin-bottom: 20px;_x000D_
	color: rgba(0,0,0,0.5);_x000D_
}_x000D_
_x000D_
h4{_x000D_
	text-align: center;_x000D_
}_x000D_
_x000D_
input{_x000D_
	display: block;_x000D_
	padding: 10px;_x000D_
	width: 100%;_x000D_
	margin: 30px 0;_x000D_
	font-size: 14px;_x000D_
}_x000D_
_x000D_
input[type="submit"] {_x000D_
	background: linear-gradient(#FFDA63, #FFB940);_x000D_
	border: 0;_x000D_
	width: 160px;_x000D_
	color: brown;_x000D_
	opacity: 0.8;_x000D_
	cursor: pointer;_x000D_
	border-radius: 20px;_x000D_
	margin-bottom: 0;_x000D_
}_x000D_
_x000D_
.form-link{_x000D_
	font-size: 14px;_x000D_
}_x000D_
_x000D_
_x000D_
a:hover  {_x000D_
    color: red;_x000D_
}

_x000D_

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

_x000D_

_x000D_

_x000D_

solución

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

_x000D_

_x000D_

* {_x000D_
  margin: 0;_x000D_
  padding: 0;_x000D_
  font-family: sans-serif;_x000D_
  box-sizing: border-box;_x000D_
}_x000D_
_x000D_
body {_x000D_
  /*background: #DEDEDE;*/_x000D_
  display: flex;_x000D_
  /*Centrado en la página tanto vertical como horizontal.*/_x000D_
  min-height: 100vh;_x000D_
  /*background-size: cover;*/_x000D_
  background-repeat: no-repeat;_x000D_
  background-size: 100%;_x000D_
}_x000D_
_x000D_
form {_x000D_
  margin: auto;_x000D_
  width: 50%;_x000D_
  max-width: 500px;_x000D_
  background: #F3F3F3;_x000D_
  padding: 30px;_x000D_
  border: 2px solid black;_x000D_
}_x000D_
_x000D_
h2 {_x000D_
  text-align: center;_x000D_
  margin-bottom: 20px;_x000D_
  color: rgba(0, 0, 0, 0.5);_x000D_
}_x000D_
_x000D_
h4 {_x000D_
  text-align: center;_x000D_
}_x000D_
_x000D_
input {_x000D_
  display: block;_x000D_
  padding: 10px;_x000D_
  width: 100%;_x000D_
  margin: 30px 0;_x000D_
  font-size: 14px;_x000D_
}_x000D_
_x000D_
input[type="submit"] {_x000D_
  background: linear-gradient(#FFDA63, #FFB940);_x000D_
  border: 0;_x000D_
  width: 160px;_x000D_
  color: brown;_x000D_
  opacity: 0.8;_x000D_
  cursor: pointer;_x000D_
  border-radius: 20px;_x000D_
  margin-bottom: 0;_x000D_
}_x000D_
_x000D_
.form-link {_x000D_
  font-size: 14px;_x000D_
}_x000D_
_x000D_
a:hover {_x000D_
  color: red;_x000D_
}

_x000D_

<!DOCTYPE html>_x000D_
<html lang="es">_x000D_
_x000D_
<head>_x000D_
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />_x000D_
  <title>Formulario de Login - Cliente</title>_x000D_
  <link rel="stylesheet" href="css/estilos_iniciar_sesion.css">_x000D_
  <script type="text/javascript" src="js/validar_iniciar_sesion_cliente.js"></script>_x000D_
</head>_x000D_
_x000D_
<body background="imagenes/fondo_campo2.jpg">_x000D_
  <form name="miformulario" id="miformulario" action="logueo_cliente.php" method="POST" class="form" onsubmit="return validar_iniciar_sesion_cliente();">_x000D_
  <!--aqui coloco la imagen con sus estilos-->_x000D_
  <img src="https://placeimg.com/640/480/any" style="height:32px; width:32px; top:0; left=0; padding-top:0;" >_x000D_
    <h2>CLIENTE</h2>_x000D_
    <h4>INICIAR SESIÓN</h4>_x000D_
    <input type="text" placeholder="🔐 Usuario" name="email" id="email" tabindex="1">_x000D_
    <input type="password" placeholder="🔐 Contraseña" name="password" id="password" tabindex="2">_x000D_
    <div id="mensaje" align="center">_x000D_
      <?php if(isset($_GET['error']) && $_GET['error'] == 'true'): ?>_x000D_
      <h4>_x000D_
        <p style="color:red;">¡Sus datos no son correctos!</p>_x000D_
      </h4>_x000D_
      <?php endif; ?>_x000D_
    </div>_x000D_
    <div id="iniciar" align="center">_x000D_
      <input type="submit" value="Iniciar sesión"><br/>_x000D_
      <p class="form-link">¿Aún no tienes una cuenta? <a href="registrar.php">Regístrate aquí</a></p><br/>_x000D_
      <p class="form-link"><a href="recuperar_contrasena.php">He olvidado mi contraseña</a></p><br/>_x000D_
      <hr/><br/>_x000D_
      <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>_x000D_
    </div>_x000D_
  </form>_x000D_
</body>_x000D_
_x000D_
</html>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *