How do I apply CSS to my form?

Asked

Viewed 532 times

3

How can I make my form look like this? inserir a descrição da imagem aqui

I have this code ready (without CSS), but I don’t know how I can make it look like this. 

<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: I don’t need the entire code, just an example in one that looks like this one so I can apply it to others.

html css

  • You’re wearing a bootstrap?

  • @Ricardohenrique Não...

  • 1

    if it were it would be very easy to do, I have even the examples...

  • What you have with bootstrap would look like the example?

  • .@GWER Sim identico

1 answer

2


To have a placeholder next to the input field:

<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>

to have a placeholder on the left and a dropdown on the right:

<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>

For loan and employee:

<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>

Copy and paste into bootply to see the result.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.