1

Não sou designer, mas necessito de um formulário inline sem usar tabela e responsivo como o da imagem.

Estou a 2 dias tentando e nada, a <label>nome campo</label> sempre estraga o posicionamento dos campos.

Estou tentando fazer algo como na imagem em anexo.IMAGEM EXEMPLO

3

3 Respostas 3

1

Existe um exemplo de como fazer isso na documentação do bootstrap

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>
4
  • É interessante, mas o elemento label fica encima do campo de texto e eu não consigo coloca-lo em uma linha tipo: label campo --> label campo Commented 29/05/2015 às 16:26
  • Tem algum css no seu form além do bootstrap? Commented 29/05/2015 às 16:56
  • Erlon Charles somente o Bootstrap e mais nenhum css meu problema está sendo a Label exemplo no link. O texto fica acima do campo de texto e eu preciso ao lado esquerdo do campo. [link] codeply.com/go/bp/T2EgQDgbx1 Commented 29/05/2015 às 16:59
  • No link que você mandou você está usando a classe form-horizontal ao invés de usar form-inlinel. troca que funciona. Commented 29/05/2015 às 17:26
0

Com a biblioteca do bootstrap pode fazer assim:

<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>
3
  • Não deu certo, ficou abaixo um do outro.[link] codeply.com/go/bp/sSRMRGD0sf Commented 29/05/2015 às 14:56
  • Já actualizei o exemplo para a versão que está a utilizar.
    – Hélder
    Commented 29/05/2015 às 15:05
  • Isso solucionou em parte, agora possuo problema com o elemento label antes do elemento input. Necessito de um cadastro linear. Ex: Nome: campo de texto + espaço + E-mail: campo de texto. A label sempre fica acima do campo de texto, eu necessito ao lado [link] codeply.com/go/bp/T2EgQDgbx1 Commented 29/05/2015 às 16:28
0

Form simples para envio de mensagem em contato

 <form method="post"">
                                    <div class="row 50%">
                                        <div class="6u"><input type="text" name="nome" placeholder="Nome" /></div>
                                        <div class="6u"><input type="text" name="email" placeholder="Email" /></div>                                    
                                    </div>
                                    <div class="row 50%">
                                    <div class="12u"><input type="text" name="assunto" placeholder="Assunto" /></div>
                                    </div>
                                    <div class="row 50%">
                                        <div class="12u">
                                            <textarea name="mensagem" placeholder="Mensagem"></textarea>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="12u">
                                            <h2 id="aguarde"  style="display:none;" class="answer_list" >Aguarde...</h2>
                                            <input type="submit" value="Enviar/>                                    
                                        </div>                                  
                                    </div>                                                              
                                </form>

Aprendi, sobre bootstrap com um exemplo de sites super legais com HTML5 CSS3 e Bootstrap. CORRIGINDO: http://html5up.net/ baixa um site de exemplo e faz a festa.

3

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .