1

Necestio hacer un formulario que quede asi https://milq.github.io/cursos/psp/ud/6/formulario.png. Estoy usando boostramp y no soy capaz de poner el color de fondo blanco y el borde verde a la vez. Os dejo mi codigo

!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html xmlns:th="https://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <title>Getting Started: Handling Form Submission</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />       
    </head>
    <body style="background-color: black">
        </br>  </br>
        <div class="container">
            <div class="row">
                <div class="col">                    
                </div>
                <div class="col-6" style="border: 12px solid green">                    
                    <div class="well well-sm">
                        <form class="form-horizontal" method="post">
                            <fieldset>
                                <legend class="text-center header">Contact us</legend>

                                <div class="form-group">
                                    <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
                                    <div class="col-md-8">
                                        <input id="fname" name="name" type="text" placeholder="First Name" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
                                    <div class="col-md-8">
                                        <input id="lname" name="name" type="text" placeholder="Last Name" class="form-control">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-envelope-o bigicon"></i></span>
                                    <div class="col-md-8">
                                        <input id="email" name="email" type="text" placeholder="Email Address" class="form-control">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-phone-square bigicon"></i></span>
                                    <div class="col-md-8">
                                        <input id="phone" name="phone" type="text" placeholder="Phone" class="form-control">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-pencil-square-o bigicon"></i></span>
                                    <div class="col-md-8">
                                        <textarea class="form-control" id="message" name="message" placeholder="Enter your massage for us here. We will get back to you within 2 business days." rows="7"></textarea>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-md-12 text-center">
                                        <button type="submit" class="btn btn-primary btn-lg">Submit</button>
                                    </div>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div>              
                <div class="col">                    
                </div>
            </div>
        </div>
         </br>  </br>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
</html>

2 respuestas 2

3

Hola ya he visto que está resuelta, pero se puede hacer todo con bootstrap con sus propias clases CSS, hice un ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <title>Getting Started: Handling Form Submission</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body class="bg-dark">

  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-5 col-md-8 col-sm-12">
        <div class="border-success" style="border: 20px solid">
          <div class="card bg-light shadow-lg rounded-0 border-0">
            <div class="card-body">
              <form class="form-horizontal text-secondary" method="post">
                <fieldset>
                  <legend class="header">Formulario sencillo</legend>
                  <p>Rellene los campos y pulse Enviar.</p>
                  <div class="form-group">
                    <input id="fname" name="name" type="text" placeholder="First Name" class="form-control rounded-0">
                  </div>
                  <div class="form-group">
                    <input id="lname" name="name" type="text" placeholder="Last Name" class="form-control rounded-0">
                  </div>

                  <div class="form-group">
                    <input id="email" name="email" type="text" placeholder="Email Address" class="form-control rounded-0">
                  </div>

                  <div class="form-group">
                    <input id="phone" name="phone" type="text" placeholder="Phone" class="form-control rounded-0">
                  </div>

                  <div class="form-group">
                    <textarea class="form-control rounded-0" id="message" name="message" placeholder="Enter your massage for us here. We will get back to you within 2 business days." rows="7"></textarea>
                  </div>
                </fieldset>
                <button type="submit" class="btn btn-success text-center rounded-0 btn-block">Submit</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>

2

El formulario tiene fondo transparente, por lo que te pone fondo negro adentro del formulario, esta tomando el fondo del body. Le agregue background-color: #fff en el estilo del formulario (donde habias puesto el estilo del borde).

EDIT: Como bien marca @DjCrazy , lo mejor es colocar los estilos en un archivo aparte y de ahi llamarlo. Por lo que voy a editar la respuesta poniendo en un CSS aparte los estilos. Notar que le puse la clase formulario al div para apuntar desde el archivo css. No era necesario hacerlo con el body (le agregue una clase llamada body) pero lo hice porque el snipett de Stack Overflow no aplicaba el fondo negro. En tu compu tendria que andar sin ponerle una clase, solo usando body{ background-color: #000; }

.body{
background-color:black;
}

.formulario{
background-color:#fff;
border: 12px solid green;
}
!DOCTYPE html>
    <!--
    To change this license header, choose License Headers in Project Properties.
    To change this template file, choose Tools | Templates
    and open the template in the editor.
    -->
    <html xmlns:th="https://www.thymeleaf.org">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
            <title>Getting Started: Handling Form Submission</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />       
        </head>
        <body class="body">
            </br>  </br>
            <div class="container">
                <div class="row">
                    <div class="col">                    
                    </div>
                    <div class="col-6 formulario">                    
                        <div class="well well-sm">
                            <form class="form-horizontal" method="post">
                                <fieldset>
                                    <legend class="text-center header">Contact us</legend>

                                    <div class="form-group">
                                        <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
                                        <div class="col-md-8">
                                            <input id="fname" name="name" type="text" placeholder="First Name" class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
                                        <div class="col-md-8">
                                            <input id="lname" name="name" type="text" placeholder="Last Name" class="form-control">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-envelope-o bigicon"></i></span>
                                        <div class="col-md-8">
                                            <input id="email" name="email" type="text" placeholder="Email Address" class="form-control">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-phone-square bigicon"></i></span>
                                        <div class="col-md-8">
                                            <input id="phone" name="phone" type="text" placeholder="Phone" class="form-control">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-pencil-square-o bigicon"></i></span>
                                        <div class="col-md-8">
                                            <textarea class="form-control" id="message" name="message" placeholder="Enter your massage for us here. We will get back to you within 2 business days." rows="7"></textarea>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-md-12 text-center">
                                            <button type="submit" class="btn btn-primary btn-lg">Submit</button>
                                        </div>
                                    </div>
                                </fieldset>
                            </form>
                        </div>
                    </div>              
                    <div class="col">                    
                    </div>
                </div>
            </div>
             </br>  </br>
            <!-- Optional JavaScript -->
            <!-- jQuery first, then Popper.js, then Bootstrap JS -->
            <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
            <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
        </body>
    </html>

6
  • 1
    Gracias, lo intente poniendo las 2 cosas yo pero ago raro haria que no me salia
    – unknow
    el 13 abr. 2020 a las 12:12
  • Lo que me molesta de boostrap es la necesidad de crear un div tras otro para que funcione correctamente, es muy probable que hayas puesto el estilo en la caja equivocada, a mi me pasa todo el tiempo
    – Agustin G.
    el 13 abr. 2020 a las 12:13
  • 1
    La respuesta es válida, aunque no es recomendable usar estilos en línea. Trata de modificar la hoja de estilos de bootstrap o crea tu propia hoja de estilos para hacer los cambios necesarios. De este modo puedes usar esos estilos en todo el app y no tienes que estar haciendo cambios en cada formulario.
    – DjCrazy
    el 13 abr. 2020 a las 12:15
  • Edite la respuesta siguiendo tu consejo, no se porque el snippet de SO no me toma los estilos para la etiqueta body, asi que le tuve que agregar la clase llamada body para este caso. Gracias por la recomendación.
    – Agustin G.
    el 13 abr. 2020 a las 12:22
  • 1
    En este caso, bastaba con agregar la clase .bg-white dentro de la siguiente línea del código original <div class="col-6 bg-white" style="border: 12px solid green">, para no tener que añadir CSS adicional. @unknow como bien menciona DjCrazy, evita usar estilos en línea. el 13 abr. 2020 a las 12:51

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.