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 elHTML
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="🔐 Usuario" name="email" id="email" tabindex="1">
<input type="password" placeholder="🔐 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"/> <a href="reservar.php">Entrar como invitado</a></p>
</div>
</form>
</body>
</html>