"Geisilene Exercício 1"
Bootstrap 4.1.1 Snippet by psd06t

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>PSD-06t-Seu Nome</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel='stylesheet' type='text/css' media='screen' href='main.css'> <script src='main.js'></script> <head> <title> Parasala Formulario </title> <script src="../lib/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"> <script src="../src/jquery.maskedinput.js" type="text/javascript"> </script> </head> <body> <h1>Formulário de Cadastro</h1> <form class="formulario" method="post"> <hr> <p> Dados da Empresa</p> <div class="field"> <label for="nome_empresa"> Nome da Empresa:</label> <input type="text" name="nome_empresa" placeholder="Digite o nome da empresa" required> </div> <div class="field"> <label for="endereco_empresa"> Endereço :</label> <input type="text" name="endereco_empresa" placeholder="Digite o endereço" required> </div> <div class="field"> <label for="telefone_empresa"> Telefone :</label> <input type="tel" name="telefone_empresa" placeholder="(000)0000-0000" required> </div> <hr> <p> Dados do Cliente</p> <div class="field"> <label for="nome_cliente"> Digite o nome do Cliente :</label> <input type="text" name="nome_cliente" placeholder="Digite o nome do cliente"required> </div> <div class="field"> <label for="data_nascimento">Digite a data de Nascimento :</label> <input type="date" name="data_nascimento"required> </div> <div class="field"> <label for="rua_cliente">Informe a Rua :</label> <input type="text" name="rua_cliente" placeholder="Rua, Av.,"required> </div> <div class="field"> <label for="numero_cliente">Informe o numero: </label> <input type="num" name="numero_cliente" placeholder="123"required> </div> <div class="field"> <label for="bairro_cliente">Informe o Bairro: </label> <input type="text" name="bairro_cliente" placeholder="Digite o bairro"required> </div> <div class="field"> <label for="cidade_cliente"> Informe a Cidade :</label> <input type="text" name="cidade_cliente" placeholder="Digite a cidade "required> </div> <div class="field"> <label for="telefone_cliente"> Telefone :</label> <input type="tel" name="telefone_cliente" placeholder="(000)0000-0000"required> </div> <div class="field"> <label for="cpf_cliente"> Informe o CPF:</label> <input type="num" name="cpf_cliente" placeholder="000.000.000-00 "required> </div> <div class="field"> <label for="identidade_cliente">Informe a Identidade :</label> <input type="num" name="identidade_cliente" placeholder="Digite o numero da identidade"required> </div> <hr> <p >Dados do Produto</p> <div class="field"> <label for="nome_mercadoria"> Digite o nome da produto :</label> <input type="text" name="nome_mercadoria" placeholder="Digite o nome da mercadoria"required> </div> <div class="field"> <label for="quantidade"> Digite a quantidade:</label> <input type="num" name="quantidade" required> </div> <div class="field"> <label>Informa a quantidade de parcelas</label><br /> <input type="number" name="numero_parcelas" min="0" max="20" value="1" required="" placeholder="Número de parcelas" /> <br /><br /> </div> <hr> <fieldset> <legend>Cálculo da Venda</legend> <label>parcela 1:</label> <input id="s1" type="text"/> <label>parcela 2: </label> <input id="s2" type="text" onblur="somarValores()"/> <button id="somar" onclick="somarValores()">Somar</button> <input id="resultado" onfocusout="somarValores(s3)"/> </fieldset> </div> </form> <input type="submit" name="Salvar" onclick="return somarValores()" class="btn btn-primary" > </body> </html>
.formulario p { width: 100%; font-size: 1.5em; } .field{ width: 100%; margin: 15px 0; } input[type=submit]{ display: block; background-color: #ccc; height: 35px; border: none; outline: 0; cursor: pointer; width: 100px; margin: 0 auto; text-align: center; border-radius: 15px; } h1{ text-align: center; font-size: 1.5em; width: 100%; font-family: 'sans-serif', ; color: DodgerBlue; font-weight: bold; font-variant: small-caps; } legend{ color: DodgerBlue; font-family: Arial, Helvetica, sans-serif; font-weight: bold; } p{ color: DodgerBlue; font-family: Arial, Helvetica, sans-serif; font-weight: bold; }
var s3=0; function somarValores(){ var s1 = document.getElementById("s1").value; var s2 = document.getElementById("s2").value; s3 = +s1 + +s2; document.getElementById('resultado').value = s3; }

Related: See More

Material Dashboard Dark Edition

Questions / Comments: