如何让表单变得敏感?

时间:2017-05-21 15:49:35

标签: html css responsive-design

任何人都可以给我一些帮助,让这种形式反应灵敏吗?我正在尝试一段时间而没有成功:(我正在尝试使用类似'col-md'的引导类,但其中任何一个都在为我工作。不能这样做。:(

<section id="Contato-Site">

        <div id="#FormularioAl">

            <div class="container">

                <div id="formulario"> 

                    <div id="formtext"> 
                        <h1 id="h1simplesrapido">              SIMPLES E RÁPIDO </h1>

                    </div>
             <h3 id="informedados">Informe seus dados abaixo e logo entraremos em contato.</h3><Br />
                    <div class="form-group">

                        <form>
                            <input id="formulario-Nome"   type="text" class="form-control" placeholder="Nome"><br>
                          <input id="formulario-Email"  type="email" class="form-control" placeholder="E-mail"><br>
                            <input id="formulario-Tel"    type="tel" class="form-control" placeholder="Telefone"><br>
                            <textarea  id="formulario-areatexto" class="btn-group-justified" rows="7" placeholder="Sua Mensagem"></textarea><br>
                          <input id="formulario-botaoEnviar"  type="submit" class="form-control">
                        </form>

                    </div>
                </div>
            </div>
        </div>

    </section>

CSS:

     #Contato-Site{
                border-top: 50px solid rgba(30,72,137,1.00);
            }

    #FormularioAl{ 

            padding: 0px 100px 0px 0px;
            margin: 0px 0px 0px 0px;


        }

#formulario-Nome,
        #formulario-Email,
        #formulario-Tel,
        #formulario-areatexto { 



        border: solid;
        border-color: rgba(30,72,137,1.00); 
        border-width: 2px;


        }

        #formulario-botaoEnviar {

            background-color: rgba(30,72,137,1.00);
            color: white;
            font-size: 20px;
            text-transform: uppercase;
            font-weight: 600;
            height: 50px;
         }

1 个答案:

答案 0 :(得分:0)

我没有看到任何问题来确定这些输入的响应方式。如您所见,一切正常,但是您在id属性中使用了哈希(#)的一个div容器。

&#13;
&#13;
#Contato-Site {
    border-top: 50px solid rgba(30, 72, 137, 1.00);
}

#FormularioAl {
    padding: 0 100px 0 0;
    margin: 0;
}

#informedados {
    margin-bottom: 20px;
}

#formulario-Nome,
#formulario-Email,
#formulario-Tel,
#formulario-areatexto {
    border: 2px solid rgba(30, 72, 137, 1.00);
}

#formulario-botaoEnviar {
    background-color: rgba(30, 72, 137, 1.00);
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 600;
    height: 50px;
}
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<section id="Contato-Site">
    <div id="FormularioAl">
        <div class="container">
            <div id="formulario">
                <div id="formtext">
                    <h1 id="h1simplesrapido">SIMPLES E RÁPIDO </h1>
                </div>
                <h3 id="informedados">Informe seus dados abaixo e logo entraremos em contato.</h3>
                <div class="form-group col-xs-6">
                    <form>
                        <input id="formulario-Nome" type="text" class="form-control" placeholder="Nome"><br>
                        <input id="formulario-Email" type="email" class="form-control" placeholder="E-mail"><br>
                        <input id="formulario-Tel" type="tel" class="form-control" placeholder="Telefone"><br>
                        <textarea id="formulario-areatexto" class="btn-group-justified" rows="7" placeholder="Sua Mensagem"></textarea><br>
                        <input id="formulario-botaoEnviar" type="submit" class="form-control">
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
&#13;
&#13;
&#13;