0

estoy creando un formulario en HTML y CSS y tengo una serie de problemas que no consigo resolver.Este formulario forma parte de una página web por la cuál navego con un nav. No consigo realizar de la manera que busco.

*{
    margin: 0;
    padding: 0;
}

/* Div principal */

div#general {
    margin-bottom: 0;
    margin-left: 0;
    width: 100%;
    height: 100vh;

}

/* Imagen y letras del menú */
header {
    background-image: url(img/fondo_menu2.gif);   
    font-family: 'Arial';
    font-size: 1em;
}

/* Enlace pulsado */
.link:hover {
    font-weight: bold;
    font-style: italic;
    text-transform: capitalize;
}

/* Menú CSS */
nav ul {
    list-style: none;
    overflow: hidden;
}

nav ul li {
    float: left;
    font-family: Arial;
    font-size: 1em;
}

nav ul li a {
    font-weight: bold;
    display: block;
    padding: 10px;
    text-decoration: none;
}



/* Logo */
.logo {
    height: 60px;
    width: 150px;
}

/* Buscador */
.buscador {
    font-family: 'Arial';
    font-size: 1em;

}

/* Titulo */
.h2 {
    font-family: 'Arial';
    font-weight: bold;
    color: green;
}







/* Formulario */

form fieldset {
    float: left;
    width: 48%;
}


.formulario * {
    box-sizing: border-box;
}


.formulario {
    font-family: 'Arial';
    font-size: 1.2em;

}

.formulario label {
    padding: 0;
    font-weight: bold;
}

.formulario label.choice {
    font-size: 0.9em;
    font-weight: normal;
}

.formulario label {
    text-align: left;
    display: block;
}



.formulario textarea {
    height: 100px;

}
<!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>Pagina web</title>
    <link rel="stylesheet" href="formularios.css">
</head>

<!--Comienza el código de la página-->
<body>
<div id="general">
<!-- Botón de busqueda-->
<p class="buscador" align="right" style="font-weight: bold;">Buscar <input type="search"></p>

<!-- Imagen del logo-->
    <img class="logo" src="img/logo.png" alt="logo">

<!-- Menú-->
    <header>
        <div>
            <nav>
                <ul>
                    <li> <a class="link:hover" href="main.html" style="color: #FFF;">Inicio</a></li>
                    <li> <a class="link:hover" href="tablas.html" style="color: #FFF;">Tablas</a></li>
                    <li> <a class="link:hover" href="formularios.html" style="color: #FFF;">Formularios</a></li>
                    <li> <a class="link:hover" href="mipagina.html" style="color: #FFF;">Página Personal</a></li>
                </ul>
            </nav>

        </div>

    </header>


<!-- Espacios entre el menú y el título del cuerpo-->
<br>
<br>

<h2 class="h2">Formulario de recogida de datos</h2>

    <!-- Formulario 'Datos Personales' -->

   <form class="formulario" method="get">
    <fieldset>
        <legend>Datos Personales</legend>
        <p>
        <label>Nombre
            <input type="text" name="nombre" required>
        </label>
    </p>
    <br>
    <p>
        <label>Apellidos
            <input type="text" name="apellidos" required>
        </label>
    </p>
    <br>
    <p>
        <label>Fecha de nacimiento
            <input type="date" name="fec_nac" required>
        </label>
    </p>
    <br>
    <p>
        <label>Usuario
            <input type="text" name="usuario" required>
        </label>
    </p>
    <br>
    <p>
        <label>Contraseña
            <input type="password" name="contraseña" required>
        </label>
    </p>
    </fieldset>

</form> 


<!-- Formulario 'Datos laborales'-->

    <form class="formulario" method="get">
        <fieldset>
            <legend>Datos laborales</legend>
        <p>
            <label>Fecha de alta
                <input type="date" name="fec_alta" required>
            </label>
        </p>
        <br>
        <p>
            <label>Puesto
                <input type="text" name="puesto" required>
            </label>
        </p>
        <br>
        <p>
            <label>Nivel
                <input type="text" name="nivel" required>
            </label>
        </p>
        <br>
        <p>
            <label>Numero de hijos
                <input type="number" name="num_hijos" required>
            </label>
        </p>
        <br>
        <p>
            <label>Salario
                <input type="text" name="salario" required>
            </label>
        </p>
        </fieldset>

    </form> 



</body>
</html>

Se vería de la siguiente manera: introducir la descripción de la imagen aquí

Mi objetivo, es que el formulario, este más clean pero no consigo realizarlo después de volver a checkear la teoría, ver vídeos resolutivos y volver a estudiarme y mirar detalladamente códigos de otros formularios. Este es mi objetivo

introducir la descripción de la imagen aquí

2
  • 1
    Aprende bootstrap, te ahorrarás quebraderos de cabeza con CSS, sobretodo cuando quieras gestionarlo con dispositivos de distintas resoluciones, como móviles y tablets.
    – masterguru
    Commented el 23 nov. 2022 a las 18:05
  • Hmmmm... ¿Borraste una pregunta? No olvides que tenés que agregar títulos relevantes a tu pregunta, y es innecesario que agregues en el título los lenguajes que utilizás, ya que para eso están las etiquetas.
    – padaleiana
    Commented el 23 nov. 2022 a las 18:21

2 respuestas 2

1

fijate que estaba checando tu codigo, al parecer se arregla todo esto poniendo en tu ultimo .formulario label los siguientes atributos

    .formulario label {
  display: inline-block;
  width: 190px;
  text-align: left;
}

pero no me daba y me di cuenta que pusiste entre los labels, el input, asi que los saque (de forma independiente) me quedo asi () , cambiale el tamaño del width como te guste, igual le pondria unos div en los formularios dependiendo de que tanto quieres hacer ya depende de cada uno. en bootstrap usan muchos divs para formularios . dale en ejecutar al codigo y ver en pantalla completa para apreciarlo bien introducir la descripción de la imagen aquí

*{
    margin: 0;
    padding: 0;
}

/* Div principal */

div#general {
    margin-bottom: 0;
    margin-left: 0;
    width: 100%;
    height: 100vh;
   
}

/* Imagen y letras del menú */
header {
    background-image: url(img/fondo_menu2.gif);   
    font-family: 'Arial';
    font-size: 1em;
}

/* Enlace pulsado */
.link:hover {
    font-weight: bold;
    font-style: italic;
    text-transform: capitalize;
}

/* Menú CSS */
nav ul {
    list-style: none;
    overflow: hidden;
}

nav ul li {
    float: left;
    font-family: Arial;
    font-size: 1em;
}

nav ul li a {
    font-weight: bold;
    display: block;
    padding: 10px;
    text-decoration: none;
}



/* Logo */
.logo {
    height: 60px;
    width: 150px;
}

/* Buscador */
.buscador {
    font-family: 'Arial';
    font-size: 1em;
    
}

/* Titulo */
.h2 {
    font-family: 'Arial';
    font-weight: bold;
    color: green;
}




    


/* Formulario */

form fieldset {
    float: left;
    width: 48%;
}


.formulario * {
    box-sizing: border-box;
}


.formulario {
    font-family: 'Arial';
    font-size: 1.2em;
    
}

.formulario label {
    padding: 0;
    font-weight: bold;
}

.formulario label.choice {
    font-size: 0.9em;
    font-weight: normal;
}

.formulario label {
  display: inline-block;
  width: 190px;
  text-align: left;
}


.formulario textarea {
    height: 100px;
    
}
<!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>Pagina web</title>
    <link rel="stylesheet" href="formularios.css">
</head>

<!--Comienza el código de la página-->
<body>
<div id="general">
<!-- Botón de busqueda-->
<p class="buscador" align="right" style="font-weight: bold;">Buscar <input type="search"></p>

<!-- Imagen del logo-->
    <img class="logo" src="img/logo.png" alt="logo">

<!-- Menú-->
    <header>
        <div>
            <nav>
                <ul>
                    <li> <a class="link:hover" href="main.html" style="color: #FFF;">Inicio</a></li>
                    <li> <a class="link:hover" href="tablas.html" style="color: #FFF;">Tablas</a></li>
                    <li> <a class="link:hover" href="formularios.html" style="color: #FFF;">Formularios</a></li>
                    <li> <a class="link:hover" href="mipagina.html" style="color: #FFF;">Página Personal</a></li>
                </ul>
            </nav>

        </div>
       
    </header>


<!-- Espacios entre el menú y el título del cuerpo-->
<br>
<br>

<h2 class="h2">Formulario de recogida de datos</h2>

    <!-- Formulario 'Datos Personales' -->

   <form class="formulario" method="get">
    <fieldset>
        <legend>Datos Personales</legend>
        <p>
        <label>Nombre</label>
            <input type="text" name="nombre" required>
        
    </p>
    <br>
    <p>
        <label>Apellidos</label>
            <input type="text" name="apellidos" required>
        
    </p>
    <br>
    <p>
        <label>Fecha de nacimiento</label>
            <input type="date" name="fec_nac" required>
        
    </p>
    <br>
    <p>
        <label>Usuario</label>
            <input type="text" name="usuario" required>
        
    </p>
    <br>
    <p>
        <label>Contraseña</label>
            <input type="password" name="contraseña" required>
        
    </p>
    </fieldset>
    
</form> 


<!-- Formulario 'Datos laborales'-->

    <form class="formulario" method="get">
        <fieldset>
            <legend>Datos laborales</legend>
        <p>
            <label>Fecha de alta</label>
                <input type="date" name="fec_alta" required>
            
        </p>
        <br>
        <p>
            <label>Puesto</label>
                <input type="text" name="puesto" required>
            
        </p>
        <br>
        <p>
            <label>Nivel</label>
                <input type="text" name="nivel" required>
            
        </p>
        <br>
        <p>
            <label>Numero de hijos</label>
                <input type="number" name="num_hijos" required>
            
        </p>
        <br>
        <p>
            <label>Salario</label>
                <input type="text" name="salario" required>
            
        </p>
        </fieldset>
        
    </form> 
    


</body>
</html>

1
  • Muchas gracias, me ha resuelto el problema tu respuesta! Un saludo!
    – user311569
    Commented el 23 nov. 2022 a las 19:09
0

Tu código tiene demasiados errores, deberías aprender a utilizar contenedores y observar el comportamiento que ejerce un contenedor padre hacia los elementos hijos, me tome el tiempo de corregir algunos de ellos utilizando display flex, te recomiendo leer Conceptos Básicos de flexbox te ayudara mucho a comprender las alineaciones y funciones que este tiene, tu código quedaría algo así.

/*ELIMINAMOS LOS ESTILOS POR DEFECTO*/
* {
  margin: 0;
  padding: 0;
}
/*CUERPO DE LA PAGINA*/
body{
  margin:5px;
}

/*ESTILOS DE LA CABECERA DE LA PAGINA, DONDE ESTA EL LOGO, MENU Y BUSCADOR, TODOS LOS ESTILOS SON CON DISPLAY FLEX*/
header {
  display:flex;
  /*ALINEAMOS LOS TRES DIVS EN FORMA HORIZONTAL*/
  flex-direction:row;
  /*DISTRIBUYE LOS ELEMENTOS SOBRE EL CONEDOR PADRE QUE ES EL HEADER*/
  justify-content:space-between;
  width:100%;
  height:100px;
}
  /* Logo */
  .logo {
    height: 60px;
    width: 150px;
  }
  /* Enlace pulsado */
  .link:hover {
    font-weight: bold;
    font-style: italic;
    text-transform: capitalize;
  }
/*ESTILOS DE LAS LISTAS O MENU*/
  ul {
    list-style-type: none;
  }

  li {
    background-color: #F6E3CA;
    float: left;
    text-align: center;
    width: 5em;
  }

/*ESTILOS DEL CUEPO DE LA PAGINA, CON DISPLAY FLEX*/
section{
  display:flex;
  /*ALINEAMOS LOS DOS DIVS DE FORMA VERTICAL, QUE ES EL DEL TITULO Y EL CONTENEDOR DE LOS DOS FORMULARIOS*/
  flex-direction:column;
  width:100%;
  heigth:600px;
}
/*CONTENEDOR DE LOS FORMULARIOS*/
#formsContainer{
  display:flex;
  /*ALINEAMOS DE FORMA HORIZONTAL PARA QUE LOS DOS FORMULARIOS ESTEN UNO DEL LADO DEL OTRO*/
  flex-direction:row;
  /*CENTRAMOS LOS ELEMNTOS HIJOS DE ETS CONTENEDOR*/
  justify-content:center;
  align-items:center;
  width:100%;
  heigth:500px;
}


/* Titulo */
.h2 {
  font-family: "Arial";
  font-weight: bold;
  color: green;
  margin:5px 5px 15px 5px;
}

/* Formulario */

fieldset {
  display:flex;
  flex-direction:column;
  width: 70%;
  padding:25px;
}

.formulario * {
  box-sizing: border-box;
}

.formulario {
  font-family: "Arial";
  width:45%;
}

.formulario label {
  padding: 0;
  font-weight: bold;
}

.formulario label.choice {
  font-size: 0.9em;
  font-weight: normal;
}

.formulario label {
  text-align: left;
  display: block;
}

.formulario textarea {
  height: 100px;
}
<!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>Pagina web</title>
</head>

<body>
  <!--cabecera de la pagina, observa la estructura, en la cabecera van los menus o navs, se divide por secciones y contenedores para tener mejor control sobre ellos-->
  <header>
    <!--contenedor del logo-->
    <div class="logo">
      <!-- Imagen del logo-->
      <img class="logo" src="img/logo.png" alt="logo">
    </div>

    <!--contenedor del menu, estructuramos bien el menu de listas, solo agrega la ruta de direccion y nombre-->
    <div id="navegador">
      <ul>
        <li><a href="#">Elemento 1</a></li>
        <li><a href="#">Elemento 2</a></li>
        <li><a href="#">Elemento 3</a></li>
        <li><a href="#">Elemento 4</a></li>
      </ul>
    </div>

    <!--contenedor del buscador-->
    <div class="buscador">
      <!-- Botón de busqueda-->
      <span class="buscador" align="right" style="font-weight: bold;">Buscar </span>
      <input type="search">
    </div>
  </header>
  <!--seccion o cuerpo de la pagina-->
  <section>
    <!--titulo-->
    <div>
      <h2 class="h2">Formularios de captura de datos</h2>
    </div>
    <!-- contenedor de los dos formularios-->
    <div id="formsContainer">

      <!-- Formulario1 'Datos Personales' -->
      <form class="formulario" method="get">
        <fieldset>
          <legend>Datos Personales</legend>
          <p>
            <label>Nombre
            <input type="text" name="nombre" required>
          </label>
          </p>
          <br>
          <p>
            <label>Apellidos
            <input type="text" name="apellidos" required>
          </label>
          </p>
          <br>
          <p>
            <label>Fecha de nacimiento
            <input type="date" name="fec_nac" required>
          </label>
          </p>
          <br>
          <p>
            <label>Usuario
            <input type="text" name="usuario" required>
          </label>
          </p>
          <br>
          <p>
            <label>Contraseña
            <input type="password" name="contraseña" required>
          </label>
          </p>
        </fieldset>
      </form>

      <!-- Formulario2 'Datos laborales'-->

      <form class="formulario" method="get">
        <fieldset>
          <legend>Datos laborales</legend>
          <p>
            <label>Fecha de alta
            <input type="date" name="fec_alta" required>
          </label>
          </p>
          <br>
          <p>
            <label>Puesto
            <input type="text" name="puesto" required>
          </label>
          </p>
          <br>
          <p>
            <label>Nivel
            <input type="text" name="nivel" required>
          </label>
          </p>
          <br>
          <p>
            <label>Numero de hijos
            <input type="number" name="num_hijos" required>
          </label>
          </p>
          <br>
          <p>
            <label>Salario
            <input type="text" name="salario" required>
          </label>
          </p>
        </fieldset>
      </form>
    </div>
  </section>
</body>

</html>

Deje comentado tanto HTML como el CSS para que comprendas mejor.

Tu Respuesta

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