<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Formulário</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Código</label> <div class="col-md-4"> <input id="textinput" name="textinput" type="text" placeholder="000000" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Nome</label> <div class="col-md-4"> <input id="textinput" name="textinput" type="text" placeholder="Antonio Pereira" class="form-control input-md"> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="radios">Trabalha apenas com a produção de leite?</label> <div class="col-md-4"> <div class="radio"> <label for="radios-0"> <input type="radio" name="radios" id="radios-0" value="1" checked="checked"> Sim </label> </div> <div class="radio"> <label for="radios-1"> <input type="radio" name="radios" id="radios-1" value="2"> Não </label> </div> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="selectbasic">Não? Qual atividade? </label> <div class="col-md-4"> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="1">Suinocultura</option> </select> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="radios">A mão de obra é apenas familiar?</label> <div class="col-md-4"> <div class="radio"> <label for="radios-0"> <input type="radio" name="radios" id="radios-0" value="1" checked="checked"> Sim </label> </div> <div class="radio"> <label for="radios-1"> <input type="radio" name="radios" id="radios-1" value="2"> Não </label> </div> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Quantos empregados</label> <div class="col-md-4"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Qual a área da propriedade?</label> <div class="col-md-4"> <input id="textinput" name="textinput" type="text" placeholder="Hectares" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Quantos de pastagem? </label> <div class="col-md-4"> <input id="textinput" name="textinput" type="text" placeholder="Hectares" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Quantos de lavoura? </label> <div class="col-md-4"> <input id="textinput" name="textinput" type="text" placeholder="Hectares" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Quantas vacas em lactação?</label> <div class="col-md-4"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="radios">Qual a raça?</label> <div class="col-md-4"> <div class="radio"> <label for="radios-0"> <input type="radio" name="radios" id="radios-0" value="1" checked="checked"> Holandesa </label> </div> <div class="radio"> <label for="radios-1"> <input type="radio" name="radios" id="radios-1" value="2"> Jersey </label> </div> <div class="radio"> <label for="radios-2"> <input type="radio" name="radios" id="radios-2" value=""> Mista </label> </div> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Qual a média de produção por dia</label> <div class="col-md-4"> <input id="textinput" name="textinput" type="text" placeholder="Litros" class="form-control input-md"> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="radios">Realiza análise de solo nas pastagens?</label> <div class="col-md-4"> <div class="radio"> <label for="radios-0"> <input type="radio" name="radios" id="radios-0" value="1" checked="checked"> Sim </label> </div> <div class="radio"> <label for="radios-1"> <input type="radio" name="radios" id="radios-1" value="2"> Não </label> </div> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Mês e ano da última análise</label> <div class="col-md-4"> <input id="textinput" name="textinput" type="text" placeholder="00/0000" class="form-control input-md"> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="radios">Procura orientação de algum profissional da área para fazer a correção necessária? </label> <div class="col-md-4"> <div class="radio"> <label for="radios-0"> <input type="radio" name="radios" id="radios-0" value="1" checked="checked"> Sim Não </label> </div> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="radios">A área tem piquetes? </label> <div class="col-md-4"> <div class="radio"> <label for="radios-0"> <input type="radio" name="radios" id="radios-0" value="1" checked="checked"> Sim </label> </div> <div class="radio"> <label for="radios-1"> <input type="radio" name="radios" id="radios-1" value="2"> Não </label> </div> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="radios">Sim? Em toda a área de pastagem?</label> <div class="col-md-4"> <div class="radio"> <label for="radios-0"> <input type="radio" name="radios" id="radios-0" value="1" checked="checked"> Sim </label> </div> <div class="radio"> <label for="radios-1"> <input type="radio" name="radios" id="radios-1" value="2"> Não </label> </div> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="selectbasic">Qual a espécie de pastagem perene?</label> <div class="col-md-4"> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="1">Grama comum</option> </select> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="radios">Utiliza a técnica da sobressemeadura?</label> <div class="col-md-4"> <div class="radio"> <label for="radios-0"> <input type="radio" name="radios" id="radios-0" value="1" checked="checked"> Sim </label> </div> <div class="radio"> <label for="radios-1"> <input type="radio" name="radios" id="radios-1" value="2"> Não </label> </div> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="selectbasic">Qual espécie é utilizada para a sobressemeadura?</label> <div class="col-md-4"> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="1">Aveia</option> </select> </div> </div> <!-- Prepended checkbox --> <div class="form-group"> <label class="col-md-4 control-label" for="prependedcheckbox">Utiliza silo como suplemento?</label> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"> </span> <input id="prependedcheckbox" name="prependedcheckbox" class="form- control" type="text" placeholder="Toneladas"> </div> </div> </div> <!-- Prepended checkbox --> <div class="form-group"> <label class="col-md-4 control-label" for="prependedcheckbox">Utiliza ração como suplemento?</label> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"> </span> <input id="prependedcheckbox" name="prependedcheckbox" class="form- control" type="text" placeholder="Toneladas"> </div> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="radios">Recebe acompanhamento técnico frequente?</label> <div class="col-md-4"> <div class="radio"> <label for="radios-0"> <input type="radio" name="radios" id="radios-0" value="1" checked="checked"> Sim </label> </div> <div class="radio"> <label for="radios-1"> <input type="radio" name="radios" id="radios-1" value="2"> Não </label> </div> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="selectbasic">Qual?</label> <div class="col-md-4"> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="1">Epagri</option> </select> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="radios">Não? gostaria de receber orientação técnica?</label> <div class="col-md-4"> <div class="radio"> <label for="radios-0"> <input type="radio" name="radios" id="radios-0" value="1" checked="checked"> Sim </label> </div> <div class="radio"> <label for="radios-1"> <input type="radio" name="radios" id="radios-1" value="2"> Não </label> </div> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="radios">Seria interessante receber dados sobre a propriedade?</label> <div class="col-md-4"> <div class="radio"> <label for="radios-0"> <input type="radio" name="radios" id="radios-0" value="1" checked="checked"> Sim </label> </div> <div class="radio"> <label for="radios-1"> <input type="radio" name="radios" id="radios-1" value="2"> Não </label> </div> </div> </div> </fieldset> </form>

@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css); .spinner input { text-align: right; } .input-group-btn-vertical { position: relative; white-space: nowrap; width: 2%; vertical-align: middle; display: table-cell; } .input-group-btn-vertical > .btn { display: block; float: none; width: 100%; max-width: 100%; padding: 8px; margin-left: -1px; position: relative; border-radius: 0; } .input-group-btn-vertical > .btn:first-child { border-top-right-radius: 4px; } .input-group-btn-vertical > .btn:last-child { margin-top: -2px; border-bottom-right-radius: 4px; } .input-group-btn-vertical i { position: absolute; top: 0; left: 4px; }

$(function(){ $('.spinner .btn:first-of-type').on('click', function() { var btn = $(this); var input = btn.closest('.spinner').find('input'); if (input.attr('max') == undefined || parseInt(input.val()) < parseInt(input.attr('max'))) { input.val(parseInt(input.val(), 10) + 1); } else { btn.next("disabled", true); } }); $('.spinner .btn:last-of-type').on('click', function() { var btn = $(this); var input = btn.closest('.spinner').find('input'); if (input.attr('min') == undefined || parseInt(input.val()) > parseInt(input.attr('min'))) { input.val(parseInt(input.val(), 10) - 1); } else { btn.prev("disabled", true); } }); })