1

Estoy realizando un formulario de registro, el típico de páginas webs, pero tengo un problema en cuanto a la disposición de los elementos. Mi formulario debe contener los siguientes campos, los cuales se ven en la imagen, pero deben estar en la siguiente distribución:

Nombre - Apellidos (deben ocupar la mitad y mitad)
Email (debe ocupar todo el ancho)
DNI Teléfono (deben ocupar la mitad y mitad)
Contraseña1 Contraseña2 (deben ocupar la mitad y mitad)
Registrar (centrado)
¿Ya tienes una cuenta? Ingresa aquí. (centrado)

Os dejo el código HTML y CSS que he generado: (estoy sujeto a modificaciones siempre y cuando sea para mejorar y aprender).

*{
    	box-sizing: border-box;
    }
    
    body{
    	margin: 0;
    	font-family: sans-serif;
    	background: #204862;
    }
    
    h1{
    	color: #fff;
    	text-align: center;
    }
    
    .form-register{
    	width: 85%;
    	max-width: 600px;
    	margin: auto;
    	background: white;
    	border-radius: 4px;
    }
    
    .form-titulo{
    	background: deepskyblue;
    	color: #fff;
    	padding: 20px;
    	text-align: center;
    	font-weight: 100;
    	font-size: 30px;
    	border-top-left-radius: 7px;
    	border-top-right-radius: 7px;
    	border-bottom: 5px solid red;
    }
    
    .contenedor-inputs{
    	padding: 2px 20px;
    	display: flex;
    	flex-wrap: wrap;
    	justify-content: space-between;
    }
    
    .input{
    	margin-bottom: 8px;
    	padding: 8px;
    	font-size: 16px;
    	border-radius: 3px;
    	border: 1px solid darkgray;
    }
    
    .input-2{
    	width: 40%;
    }
    
    .input-1{
    	width: 100%;
    }
    
    .enviar{
    	background: crimson;
    	color: #fff;
    	margin: auto;
    	padding: 10px 40px;
    	cursor: pointer;
    	font-size: 12px;
    }
    
    .enviar:active{
    	transform: scale(1.05);
    }
    
    .form-link{
    	width: 100%;
    	margin: `px;
    	text-align: center;
    	font-size: 14px;
    }
<!DOCTYPE html>
    <html lang="es">
    	<head>
    		<meta charset="UTF-8">
    		<title>Formulario de registro</title>
    		<link rel="stylesheet" href="estilos.css">
    	</head>
    	<body>
    		<h1>Formulario de registro</h1>
    		<form action="registrar.php" method="POST" class="form-register">
    			<h2 class="form-titulo">CREA UNA CUENTA</h2>
    			<div class="contenedor-inputs">
    				<label for="nombre">Nombre: </label><input type="text" name="nombre" id="nombre" placeholder="Nombre" tabindex="1" class="input-2" required>
    				<label for="apellidos">Apellidos: </label><input type="text" name="apellidos" id="apellidos" placeholder="Apellidos" tabindex="2" class="input-2" required>
    				<br/>
    				<label for="email">Email: </label><input type="text" name="email" id="email" placeholder="Email" tabindex="3" class="input-1" required>
    				<br/>
    				<label for="dni">DNI: </label><input type="text" name="dni" id="dni" placeholder="DNI" tabindex="4" class="input-2" required>
    				<label for="telefono">Teléfono: </label><input type="text" name="telefono" id="telefono" placeholder="Teléfono" tabindex="5" class="input-2" required>
    				<br/>
    				<label for="password1">Contraseña: </label><input type="password" name="password1" id="password1" placeholder="Contraseña" tabindex="6" class="input-2" required>
    				<label for="password2">Repetir contraseña: </label><input type="password" name="password2" id="password2" placeholder="Repetir contraseña" tabindex="7" class="input-2" required>
    				<br/>
    				<input type="submit" value="Registrar" class="enviar" tabindex="8"/>
    				<p class="form-link">¿Ya tienes una cuenta? <a href="#">Ingresa aquí</a></p>
    			</div>
    		</form>
    	</body>
    </html>

4
  • Es posible que sea por el margin auto de la clase form-register Commented el 7 nov. 2017 a las 13:42
  • No, el margin: auto; de la clase form-register sirve para que el formulario quede centrado en el TOTAL de la pantalla.
    – omaza1990
    Commented el 7 nov. 2017 a las 13:43
  • Probaste usar .cols en divs? Commented el 7 nov. 2017 a las 14:23
  • Sí, pero realmente no quiero una "tabla" con columnas (.cols) desearía un formulario como el que tengo pero "centrado" y alineado. No sé por qué motivo se me descoloca.
    – omaza1990
    Commented el 7 nov. 2017 a las 19:25

2 respuestas 2

1

Aquí tienes un ejemplo de cómo podría quedar basándome en tu código

Ejemplo de solución

CSS:

*{
    box-sizing: border-box;
}

body{
    margin: 0;
    font-family: sans-serif;
    background: #204862;
}

h1{
    color: #fff;
    text-align: center;
}

.form-register{
    width: 85%;
    max-width: 600px;
    margin: auto;
    background: white;
    border-radius: 4px;
}

.form-titulo{
    background: deepskyblue;
    color: #fff;
    padding: 20px;
    text-align: center;
    font-weight: 100;
    font-size: 30px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-bottom: 5px solid red;
}

.contenedor-inputs{
    padding: 2px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.input{
  min-height: 25px;
    border-radius: 3px;
    border: 1px solid darkgray;
  padding-left:5px;
}

.input-2{
    width:35%;
  max-width:150px;
}

.input-1{
    width: 80%;
  max-width: 450px;
}

.enviar{
    background: crimson;
    color: #fff;
    margin: auto;
    padding: 10px 40px;
    cursor: pointer;
    font-size: 12px;
  border-radius: 5px;
}

.enviar:active{
    transform: scale(1.05);
}

.form-link{
    width: 100%;
    margin: `px;
    text-align: center;
    font-size: 14px;
}

/* Contianers */
.container{
  width: 100%;
  margin-bottom: 10px;
}

HTML:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Formulario de registro</title>
        <link rel="stylesheet" href="estilos.css">
    </head>
    <body>
        <h1>Formulario de registro</h1>
        <form action="registrar.php" method="POST" class="form-register">
            <h2 class="form-titulo">CREA UNA CUENTA</h2>
            <div class="contenedor-inputs">
        <div class="container">
                  <label for="nombre">Nombre: </label><input type="text" name="nombre" id="nombre" placeholder="Nombre" tabindex="1" class="input input-2" required>
          <label for="apellidos">Apellidos: </label><input type="text" name="apellidos" id="apellidos" placeholder="Apellidos" tabindex="2" class="input input-2" required>
        </div>
        <div class="container">
                  <label for="email">Email: </label><input type="text" name="email" id="email" placeholder="Email" tabindex="3" class="input input-1" required>
                </div>
        <div class="container">
                <label for="dni">DNI: </label><input type="text" name="dni" id="dni" placeholder="DNI" tabindex="4" class="input input-2" required>
                <label for="telefono">Teléfono: </label><input type="text" name="telefono" id="telefono" placeholder="Teléfono" tabindex="5" class="input input-2" required>
                </div>
        <div class="container">
                <label for="password1">Contraseña: </label><input type="password" name="password1" id="password1" placeholder="Contraseña" tabindex="6" class="input input-2" required>
                <label for="password2">Repetir contraseña: </label><input type="password" name="password2" id="password2" placeholder="Repetir contraseña" tabindex="7" class="input input-2" required>
                </div>
                <input type="submit" value="Registrar" class="enviar" tabindex="8"/>
                <p class="form-link">¿Ya tienes una cuenta? <a href="#">Ingresa aquí</a></p>
            </div>
        </form>
    </body>
</html>

Te sugiero aprendas a usar Frameworks como Bootstrap ya que esos ayudan mucho a hacer más rápido el trabajo

1

Introduce cada pareja label-input dentro de un div para que en cada fila solo exista una pareja de elementos:

<div class="contenedor-inputs">
    <div>
        <label for="nombre">Nombre: </label><input type="text" name="nombre" id="nombre" placeholder="Nombre" tabindex="1" class="input-2" required>
    </div>
    <div>
        <label for="apellidos">Apellidos: </label><input type="text" name="apellidos" id="apellidos" placeholder="Apellidos" tabindex="2" class="input-2" required>
    </div>
    <div>
        <label for="email">Email: </label><input type="text" name="email" id="email" placeholder="Email" tabindex="3" class="input-1" required>
    </div>
    <div>
        <label for="dni">DNI: </label><input type="text" name="dni" id="dni" placeholder="DNI" tabindex="4" class="input-2" required>
    </div>
    <div>
        <label for="telefono">Teléfono: </label><input type="text" name="telefono" id="telefono" placeholder="Teléfono" tabindex="5" class="input-2" required>
    </div>
    <div>
        <label for="password1">Contraseña: </label><input type="password" name="password1" id="password1" placeholder="Contraseña" tabindex="6" class="input-2" required>
    </div>
    <div>
        <label for="password2">Repetir contraseña: </label><input type="password" name="password2" id="password2" placeholder="Repetir contraseña" tabindex="7" class="input-2" required>
    </div>
    <div>
        <input type="submit" value="Registrar" class="enviar" tabindex="8"/>
        <p class="form-link">¿Ya tienes una cuenta? <a href="#">Ingresa aquí</a></p>
    </div>  
</div>

De esta forma solo te quedaría centrar el contenido de estos divs usando una clase con los estilos necesarios.

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.