How can I apply CSS to my form?

Question

How can I apply CSS to my form?

Navigation

#1 by (2 votes)

3

How can I make my form look like this?

Ihavethiscodeready(withouttheCSS),butIdonotknowhowIcanmakeitlooklikethis.

<form><inputtype="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 do not need the whole code, just an example in some that looks similar to what I can apply to others.

html css

asked by anonymous 11.05.2015 / 16:08

1 answer

Enable button event when pressing key on keyboard Error Connecting to Bluetooth Printer Windows Phone 8.1 Silverlight

score 2 · Accepted Answer

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 side 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 company 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 in the bootply to see the result.