HTML - Problema para alinear un formulario

Problema para alinear un formulario

Publicado por Ana (5 intervenciones) el 17/04/2022 03:34:25

Buenas noches. No puedo alinear este formulario. El problema me lo está ocasionando el 2do button radio de "MALE". Si lo quito, se alinea todo, pero si lo agrego, se desajusta todo lo demás.
alguien me puede ayudar?

HTML5:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FORMULARIO</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="formulario">
<form action="" autocomplete="off">
<table>
<tr>
<td><input type="text" placeholder="Ingrese su nombre y apellido" name="nombre"></td>
</tr>
<tr>
<td><input type="password" placeholder="Ingrese su contraseña" name="password"></td>
</tr>
<tr>

<td><input type="radio" name="genero"> FEMALE
<td><input type="radio" name="genero"> MALE
</td>
</tr>
<tr>

<td><input type="mail" placeholder="tu correo electrónico" name="mail"></td>
</tr>
<tr>

<td>
<select class="seleccion" name="materia">
<option value="">CALCULO</option>
<option value="">FÍSICA</option>
<option value="">MATEMÁTICA</option>
<option value="">PROGRAMACIÓN</option>
<option value="">INGLÉS</option>
</select>
<input type="phone" placeholder="tu teléfono" name="telefono">
</td>
</tr>
<tr>
<td>
<input type="submit" value="ENVIAR" name="enviar">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

CSS:

* {
margin: 0;
padding: 0;
}
body {

background: #282140;
color: #282140;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

}
.formulario {

width: 250px;
background-color: #F29830 ;
padding: 40px 20px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
input[type = "text"]{

width: 100%;
background: none;
border: 1px solid #ffffff;
border-radius: 3px;
padding: 6px 15px;
box-sizing: border-box;
margin-bottom: 20px;
color: #282140;
}
input[type = "password"]{

width: 100%;
background: none;
border: 1px solid #ffffff;
border-radius: 3px;
padding: 6px 15px;
box-sizing: border-box;
margin-bottom: 20px;
color: #282140;
}
input[type = "mail"]{

width: 100%;
background: none;
border: 1px solid #ffffff;
border-radius: 3px;
padding: 6px 15px;
box-sizing: border-box;
margin-bottom: 20px;
color: #282140;
}
input[type = "radio"]{
padding: 6px 15px;
box-sizing: border-box;
margin-bottom: 20px;
}

select[class = "seleccion"]{
width: 100%;
background: #c52431;
border: 1px solid #ffffff;
border-radius: 3px;
padding: 6px 15px;
box-sizing: border-box;
margin-bottom: 20px;
color: #ffffff;
}

input[type = "phone"]{
width: 100%;
background: none;
border: 1px solid #ffffff;
border-radius: 3px;
padding: 6px 15px;
box-sizing: border-box;
margin-bottom: 20px;
color: #282140;
}
input[type ="submit"]{
background: #ffffff;
width: 100%;
border-radius: 3px;
padding: 6px 15px;
box-sizing: border-box;
cursor: pointer;
color: #000000;
font-size: 15px;
}
input[type ="submit"]:hover{
background: rgb(170, 255, 0);
transition: .6s;
}

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Problema para alinear un formulario

Publicado por antonio (19 intervenciones) el 17/04/2022 11:36:41

Hola buenas el problema estaba en estas líneas:
<td><input type="radio" name="genero"> FEMALE
<input type="radio" name="genero"> MALE
</td>

Habías puesto un td antes del male que no debía de estar. Un saludo.

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Problema para alinear un formulario

Publicado por Ana (5 intervenciones) el 18/04/2022 02:29:35

excelente! gracias Antonio

Valora esta respuesta

Comentar