<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <h1> <img style=" width: 300px; padding: 5px;"src="https://www.webmotors.com.br/assets/img/webmotors.svg?t=694images/logo.png" alt="webmotors" width=300% height=200%> </h1> <h2> GScar</h2> </div> </div> </div> <div class="container"> <div class="row mb-3"> <div class="col-md-12"> <img src="https://spncr.s3.amazonaws.com/img/VcPQ8Wc7RSmmnMJVqe9OAQ/file.jpg"> </div> </div> </div> <div class="container"> <div class="row mb-2"> <div class="col-md-8"> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-md-12"> <h4 class="text-danger">CARACTERISTICAS</h4> <hr> </div> </div> <div class="row mb-4"> <div class="col-md-3"> <h5 class="text-secondary">COMBUSTIVÉL</h5> <h6> <script> document.write(cars[0]); </script> </h6> </div> <div class="col-md-3"> <h5 class="text-secondary">MARCA</h5> <h6> <script> document.write(cars[1]); </script> </h6> </div> <div class="col-md-3"> <h5 class="text-secondary">MODELO</h5> <h6> <script> document.write(cars[2]); </script> </h6> </div> <div class="col-md-3"> <h5 class="text-secondary">COR</h5> <h6> <script> document.write(cars[3]); </script> </h6> </div> </div> <div class="row mb-4"> <div class="col-md-3"> <h5 class="text-secondary">DIREÇÃO</h5> <h6> <script> document.write(cars[4]); </script> </h6> </div> <div class="col-md-3"> <h5 class="text-secondary">ANO DE FABRICAÇÃO</h5> <h6> <script> document.write(cars[5]); </script> </h6> </div> <div class="col-md-3"> <h5 class="text-secondary">AR CONDICIONADO</h5> <h6> <script> document.write(cars[6]); </script> </h6> </div> <div class="col-md-3"> <h5 class="text-secondary">VALOR</h5> <h6> <script> document.write(cars[7]); </script> </div> <div class="row mb-4"> <div class="col-md-12"> <h5 class="text-secondary">IPVA</h5> <h6> <script> document.write(cars[8]); </script> </div> <div class="col-md-12"> <h5 class="text-secondary">LOCALIZAÇÃO DO VEICULO</h5> <h6> <script> document.write(cars[9]); </script> </h6> </div> </div> </div> </div> </div> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Formulário</legend> <!-- Search input--> <div class="form-group"> <label class="col-md-4 control-label" for="searchinput">FABRICANTE</label> <div class="col-md-4"> <input id="fabricante" name="fabform" type="search" placeholder="Fabricante" class="form-control input-md" required=""> </div> </div> <!-- Search input--> <div class="form-group"> <label class="col-md-4 control-label" for="searchinput">MODELO</label> <div class="col-md-4"> <input id="modelo" name="modeloform" type="search" placeholder="Modelo" class="form-control input-md" required=""> </div> </div> <!-- Select Multiple --> <div class="form-group"> <label class="col-md-4 control-label" for="Ano de Fabricação">ANO DE FABRICAÇÃO</label> <div class="col-md-4"> <select id="anofabricação" name="anofab" class="form-control" multiple="multiple"> <option value="1">2020</option> <option value="2">2019</option> <option value="3">2018</option> <option value="4">2017</option> <option value="5">2016</option> <option value="6">2015</option> <option value="7">2014</option> </select> </div> </div> <!-- Select Multiple --> <div class="form-group"> <label class="col-md-4 control-label" for="Localização do Carro">LOCALIZAÇÃO DO VEÍCULO</label> <div class="col-md-4"> <select id="Localizacao" name="Localizacao do veiculo" class="form-control" multiple="multiple"> <option value="1">Belo Horizonte</option> <option value="2">Betim</option> <option value="3">Contagem</option> <option value="4">Nova Lima</option> </select> </div> </div> <!-- Select Multiple --> <div class="form-group"> <label class="col-md-4 control-label" for="Cor">COR</label> <div class="col-md-4"> <select id="cor" name="cor" class="form-control" multiple="multiple"> <option value="1">Preto</option> <option value="2">Prata</option> <option value="3">Branco</option> <option value="4">Vermelho</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="Ar Condicionado">AR CONDICIONADO</label> <div class="col-md-4"> <select id="arcond" name="ar condicionado" class="form-control"> <option value="1">Sim</option> <option value="2">Não</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="IPVA">IPVA</label> <div class="col-md-4"> <select id="ipva" name="ipva" class="form-control"> <option value="1">Pago</option> <option value="2">A pagar</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Preço">PREÇO</label> <div class="col-md-4"> <input id="resultado" onfocusout="somarValores(s3)"/> </div> </div> <input class="btn-primary" type="submit" value="Enviar"> </fieldset> </form> </body> </html>

img {width:100%;} h5 {font-size:16px;} body {background:#f2f2f2;} .text-danger{text-align: center;} legend{text-align: center; background:#f2f2f2;} .form-group{background:#f2f2f2;}

var cars = ["Flex""Fiat","Uno","Prata","Hidraulica","2015","Sim","R$ 28.000,00","Pago","Belo Horizonte - MG"] //car[0] var form = ["fabricante","modelo" "ano", "localizacao","cor"] var empresa= document.getElementById('resultado').value = s3;