2

Como posso fazer com que meu formulário fique parecido com isso? inserir a descrição da imagem aqui

Tenho este código dele pronto (sem o CSS), mas não sei como posso fazer com que fique assim.

<form>
        <input type="hidden" name="form_input" value="FORM_COTACAO" />
    <div class="grid_1">
        <input type="text" name="name" placeholder="Nome" class="input watermark" />
    </div>
    <div class="grid_1">
        <input type="text" name="email" placeholder="Email" class="input watermark" />
    </div>
    <div class="grid_1">
        <input type="text" name="empresa" placeholder="Empresa" class="input watermark" />
    </div>
        <div class="grid_1">
            <div class="grid_1_1">
                <select name="state" class="custom" data-width="76" data-value="Funcionários">
                    <option value="">Funcionários</option>
                    <option value="">------</option>
                </select>
            </div>
        </div>
    <div class="grid_1">
        <input type="text" name="cidade" placeholder="Cidade" class="input watermark" />
    </div>

    <input type="hidden" name="form_input" value="FORM_COTACAO" />
        <div class="grid_1">
            <div class="grid_1_1">
                <select name="state" class="custom" data-width="76" data-value="UF*">
                    <option value="">UF*</option>
                    <option value="AC">AC</option>
                    <option value="AL">AL</option>
                    <option value="AP">AP</option>
                    <option value="AM">AM</option>
                    <option value="BA">BA</option>
                    <option value="CE">CE</option>
                    <option value="DF">DF</option>
                    <option value="ES">ES</option>
                    <option value="GO">GO</option>
                    <option value="MA">MA</option>
                    <option value="MT">MT</option>
                    <option value="MS">MS</option>
                    <option value="MG">MG</option>
                    <option value="PA">PA</option>
                    <option value="PB">PB</option>
                    <option value="PR">PR</option>
                    <option value="PE">PE</option>
                    <option value="PI">PI</option>
                    <option value="RJ">RJ</option>
                    <option value="RN">RN</option>
                    <option value="RS">RS</option>
                    <option value="RO">RO</option>
                    <option value="RR">RR</option>
                    <option value="SC">SC</option>
                    <option value="SP">SP</option>
                    <option value="SE">SE</option>
                    <option value="TO">TO</option>
                </select>
            </div>
    <div class="grid_1">
        <input type="text" name="telefone" placeholder="Telefone" class="input watermark" />
    </div>
</div>

PS: Não preciso do código inteiro, apenas de um exemplo em algum que fique parecido com esse para que possa aplicar aos outros.

5
  • Esta usando bootstrap?
    – Ricardo
    Commented 11/05/2015 às 14:09
  • @RicardoHenrique Não...
    – GWER
    Commented 11/05/2015 às 14:10
  • 1
    se fosse era muito facil de se fazer, tenho até os exemplos...
    – Ricardo
    Commented 11/05/2015 às 14:11
  • O que tens com bootstrap ficaria parecido com o exemplo?
    – GWER
    Commented 11/05/2015 às 14:12
  • .@GWER Sim identico
    – Ricardo
    Commented 11/05/2015 às 14:25

1 Resposta 1

2

Para ter um placeholder junto ao campo input:

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">Nome</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

para ter um placeholder ao lado esquerdo e um dropdown ao direito:

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">Nome</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
  <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
</div>

Para emprese e funcionário:

<div class="form-inline">
  <input type="text" class="form-control col-md-3" placeholder="Username">
  <div class="input-group-btn col-md-3">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
</div>

Copie e cole no bootply para ver o resultado.

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 .