"Formulário - Lenize"
Bootstrap 4.1.1 Snippet by psd06t

<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/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 ----------> <!DOCTYPE html> <head> </head> <body> <form class="form-horizontal"> <fieldset> <div class="panel panel-primary"> <div class="panel-heading">Cadastro de Cliente</div> <div class="panel-body"> <div class="form-group"> <!-- <div class="form-group"> <div class="col-md-4 control-label"> <img id="logo" src="http://blogdoporao.com.br/wp-content/uploads/2016/12/Faculdade-pitagoras.png"/> </div> <div class="col-md-4 control-label"> <h1>Cadastro de Cliente</h1> </div> </div> --> <div class="col-md-11 control-label"> <p class="help-block"><h11>*</h11> Campo Obrigatório </p> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="Nome">Nome <h11>*</h11></label> <div class="col-md-8"> <input id="Nome" name="Nome" placeholder="" class="form-control input-md" required="" type="text"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="Nome">CPF <h11>*</h11></label> <div class="col-md-2"> <input id="cpf" name="cpf" placeholder="Apenas números" class="form-control input-md" required="" type="text" maxlength="11" pattern="[0-9]+$"> </div> <label class="col-md-1 control-label" for="Nome">Nascimento<h11>*</h11></label> <div class="col-md-2"> <input id="dtnasc" name="dtnasc" placeholder="DD/MM/AAAA" class="form-control input-md" required="" type="text" maxlength="10" OnKeyPress="formatar('##/##/####', this)" onBlur="showhide()"> </div> <!-- Multiple Radios (inline) --> <label class="col-md-1 control-label" for="radios">Sexo <h11>*</h11></label> <div class="col-md-4"> <label required="" class="radio-inline" for="radios-0" > <input name="sexo" id="sexo" value="feminino" type="radio" required> Feminino </label> <label class="radio-inline" for="radios-1"> <input name="sexo" id="sexo" value="masculino" type="radio"> Masculino </label> </div> </div> <!-- Prepended text--> <div class="form-group"> <label class="col-md-2 control-label" for="prependedtext">Telefone <h11>*</h11></label> <div class="col-md-2"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span> <input id="prependedtext" name="prependedtext" class="form-control" placeholder="XX XXXXX-XXXX" required="" type="text" maxlength="13" pattern="\[0-9]{2}\ [0-9]{4,6}-[0-9]{3,4}$" OnKeyPress="formatar('## #####-####', this)"> </div> </div> <label class="col-md-1 control-label" for="prependedtext">Telefone</label> <div class="col-md-2"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span> <input id="prependedtext" name="prependedtext" class="form-control" placeholder="XX XXXXX-XXXX" type="text" maxlength="13" pattern="\[0-9]{2}\ [0-9]{4,6}-[0-9]{3,4}$" OnKeyPress="formatar('## #####-####', this)"> </div> </div> </div> <!-- Prepended text--> <div class="form-group"> <label class="col-md-2 control-label" for="prependedtext">Email <h11>*</h11></label> <div class="col-md-5"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span> <input id="prependedtext" name="prependedtext" class="form-control" placeholder="email@email.com" required="" type="text" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" > </div> </div> </div> <!-- Search input--> <div class="form-group"> <label class="col-md-2 control-label" for="CEP">CEP <h11>*</h11></label> <div class="col-md-2"> <input id="cep" name="cep" placeholder="Apenas números" class="form-control input-md" required="" value="" type="search" maxlength="8" pattern="[0-9]+$"> </div> <div class="col-md-2"> <button type="button" class="btn btn-primary" onclick="pesquisacep(cep.value)">Pesquisar</button> </div> </div> <!-- Prepended text--> <div class="form-group"> <label class="col-md-2 control-label" for="prependedtext">Endereço</label> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon">Rua</span> <input id="rua" name="rua" class="form-control" placeholder="" required="" readonly="readonly" type="text"> </div> </div> <div class="col-md-2"> <div class="input-group"> <span class="input-group-addon">Nº <h11>*</h11></span> <input id="numero" name="numero" class="form-control" placeholder="" required="" type="text"> </div> </div> <div class="col-md-3"> <div class="input-group"> <span class="input-group-addon">Bairro</span> <input id="bairro" name="bairro" class="form-control" placeholder="" required="" readonly="readonly" type="text"> </div> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="prependedtext"></label> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon">Cidade</span> <input id="cidade" name="cidade" class="form-control" placeholder="" required="" readonly="readonly" type="text"> </div> </div> <div class="col-md-2"> <div class="input-group"> <span class="input-group-addon">Estado</span> <input id="estado" name="estado" class="form-control" placeholder="" required="" readonly="readonly" type="text"> </div> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-2 control-label" for="Estado Civil">Estado Civil <h11>*</h11></label> <div class="col-md-2"> <select required id="Estado Civil" name="Estado Civil" class="form-control"> <option value=""></option> <option value="Solteiro(a)">Solteiro(a)</option> <option value="Casado(a)">Casado(a)</option> <option value="Divorciado(a)">Divorciado(a)</option> <option value="Viuvo(a)">Viuvo(a)</option> </select> </div> <!-- Prepended checkbox --> <label class="col-md-1 control-label" for="Filhos">Filhos<h11>*</h11></label> <div class="col-md-3"> <div class="input-group"> <span class="input-group-addon"> <label class="radio-inline" for="radios-0"> <input type="radio" name="filhos" id="filhos" value="nao" onclick="desabilita('filhos_qtd')" required> Não </label> <label class="radio-inline" for="radios-1"> <input type="radio" name="filhos" id="filhos" value="sim" onclick="habilita('filhos_qtd')"> Sim </label> </span> <input id="filhos_qtd" name="filhos_qtd" class="form-control" type="text" placeholder="Quantos?" pattern="[0-9]+$" > </div> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-2 control-label" for="selectbasic">Escolaridade <h11>*</h11></label> <div class="col-md-3"> <select required id="escolaridade" name="escolaridade" class="form-control"> <option value=""></option> <option value="Analfabeto">Analfabeto</option> <option value="Fundamental Incompleto">Fundamental Incompleto</option> <option value="Fundamental Completo">Fundamental Completo</option> <option value="Médio Incompleto">Médio Incompleto</option> <option value="Médio Completo">Médio Completo</option> <option value="Superior Incompleto">Superior Incompleto</option> <option value="Superior Completo">Superior Completo</option> </select> </div> <!-- Text input--> <label class="col-md-1 control-label" for="profissao">Profissão<h11>*</h11></label> <div class="col-md-4"> <input id="profissao" name="profissao" type="text" placeholder="" class="form-control input-md" required=""> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="encaminhamento">Encaminhamento <h11>*</h11></label> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon"> <label class="radio-inline" for="radios-0"> <input type="radio" name="enc" id="enc" value="Nao" onclick="desabilita('enc_instituicao')" required> Não </label> <label class="radio-inline" for="radios-1"> <input type="radio" name="enc" id="enc" value="sim" onclick="habilita('enc_instituicao')"> Sim </label> </span> <input id="enc_instituicao" name="enc" class="form-control" type="text" placeholder="Instituição" > </div> </div> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="textinput">Como ficou sabendo da Clínica?</label> <div class="col-md-4"> <input id="textinput" name="textinput" placeholder="" class="form-control input-md" type="text"> </div> </div> <div id="newpost"> <div class="form-group"> <div class="col-md-2 control-label"> <h3>Responsável</h3> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="Nome">Nome <h11>*</h11></label> <div class="col-md-8"> <input id="Nome" name="Nome" placeholder="" class="form-control input-md" required="" type="text"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="vinculo">Vinculo com cliente <h11>*</h11></label> <div class="col-md-2"> <input id="vinculo" name="vinculo" placeholder="" class="form-control input-md" required="" type="text" pattern="/^[A-Za-záàâãéèêíïóôõöúçñÁÀÂÃÉÈÍÏÓÔÕÖÚÇÑ ]+$/"> </div> <label class="col-md-1 control-label" for="Nome">Nascimento<h11>*</h11></label> <div class="col-md-2"> <input id="dtnasc" name="dtnasc" placeholder="DD/MM/AAAA" class="form-control input-md" required="" type="text" maxlength="10" OnKeyPress="formatar('##/##/####', this)"> </div> <!-- Multiple Radios (inline) --> <label class="col-md-1 control-label" for="radios">Sexo <h11>*</h11></label> <div class="col-md-4"> <label required="" class="radio-inline" for="radios-0" > <input name="sexo" id="sexo" value="feminino" type="radio" required> Feminino </label> <label class="radio-inline" for="radios-1"> <input name="sexo" id="sexo" value="masculino" type="radio"> Masculino </label> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="Estado Civil">Estado Civil <h11>*</h11></label> <div class="col-md-2"> <select required id="Estado Civil" name="Estado Civil" class="form-control"> <option value=""></option> <option value="Solteiro(a)">Solteiro(a)</option> <option value="Casado(a)">Casado(a)</option> <option value="Divorciado(a)">Divorciado(a)</option> <option value="Viuvo(a)">Viuvo(a)</option> </select> </div> <label class="col-md-1 control-label" for="Filhos">Filhos<h11>*</h11></label> <div class="col-md-3"> <div class="input-group"> <span class="input-group-addon"> <label class="radio-inline" for="radios-0"> <input type="radio" name="ofilhos" id="ofilhos" value="nao" onclick="desabilita('ofilhos_qtd')" required> Não </label> <label class="radio-inline" for="radios-1"> <input type="radio" name="ofilhos" id="ofilhos" value="sim" onclick="habilita('ofilhos_qtd')"> Sim </label> </span> <input id="ofilhos_qtd" name="ofilhos_qtd" class="form-control" type="text" placeholder="Quantos?" pattern="[0-9]+$" > </div> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="selectbasic">Escolaridade <h11>*</h11></label> <div class="col-md-3"> <select required id="escolaridade" name="escolaridade" class="form-control"> <option value=""></option> <option value="Analfabeto">Analfabeto</option> <option value="Fundamental Incompleto">Fundamental Incompleto</option> <option value="Fundamental Completo">Fundamental Completo</option> <option value="Médio Incompleto">Médio Incompleto</option> <option value="Médio Completo">Médio Completo</option> <option value="Superior Incompleto">Superior Incompleto</option> <option value="Superior Completo">Superior Completo</option> </select> </div> <!-- Text input--> <label class="col-md-1 control-label" for="profissao">Profissão<h11>*</h11></label> <div class="col-md-4"> <input id="profissao" name="profissao" type="text" placeholder="" class="form-control input-md" required=""> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="prependedtext">Telefone <h11>*</h11></label> <div class="col-md-2"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span> <input id="prependedtext" name="prependedtext" class="form-control" placeholder="XX XXXXX-XXXX" required="" type="text" maxlength="13" pattern="\[0-9]{2}\ [0-9]{4,6}-[0-9]{3,4}$" OnKeyPress="formatar('## #####-####', this)"> </div> </div> <label class="col-md-1 control-label" for="prependedtext">Telefone</label> <div class="col-md-2"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span> <input id="prependedtext" name="prependedtext" class="form-control" placeholder="XX XXXXX-XXXX" type="text" maxlength="13" pattern="\[0-9]{2}\ [0-9]{4,6}-[0-9]{3,4}$" OnKeyPress="formatar('## #####-####', this)"> </div> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="prependedtext">Email <h11>*</h11></label> <div class="col-md-5"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span> <input id="prependedtext" name="prependedtext" class="form-control" placeholder="email@email.com" required="" type="text" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" > </div> </div> </div> </div> <!-- Button (Double) --> <div class="form-group"> <label class="col-md-2 control-label" for="Cadastrar"></label> <div class="col-md-8"> <button id="Cadastrar" name="Cadastrar" class="btn btn-success" type="Submit">Cadastrar</button> <button id="Cancelar" name="Cancelar" class="btn btn-danger" type="Reset">Cancelar</button> </div> </div> </div> </div> </fieldset> </form> </body> </html>
h11 { color:red; } #logo { width:50%; height:50%; } .panel-heading{ font-size:150%; }
function limpa_formulario_cep() { //Limpa valores do formulário de cep. document.getElementById('rua').value=(""); document.getElementById('bairro').value=(""); document.getElementById('cidade').value=(""); document.getElementById('estado').value=(""); } function meu_callback(conteudo) { if (!("erro" in conteudo)) { //Atualiza os campos com os valores. document.getElementById('rua').value=(conteudo.logradouro); document.getElementById('bairro').value=(conteudo.bairro); document.getElementById('cidade').value=(conteudo.localidade); document.getElementById('estado').value=(conteudo.uf); } //end if. else { //CEP não Encontrado. limpa_formulario_cep(); alert("CEP não encontrado."); document.getElementById('cep').value=(""); } } function pesquisacep(valor) { //Nova variável "cep" somente com dígitos. var cep = valor.replace(/\D/g, ''); //Verifica se campo cep possui valor informado. if (cep !== "") { //Expressão regular para validar o CEP. var validacep = /^[0-9]{8}$/; //Valida o formato do CEP. if(validacep.test(cep)) { //Preenche os campos com "..." enquanto consulta webservice. document.getElementById('rua').value="..."; document.getElementById('bairro').value="..."; document.getElementById('cidade').value="..."; document.getElementById('estado').value="..."; //Cria um elemento javascript. var script = document.createElement('script'); //Sincroniza com o callback. script.src = '//viacep.com.br/ws/'+ cep + '/json/?callback=meu_callback'; //Insere script no documento e carrega o conteúdo. document.body.appendChild(script); } //end if. else { //cep é inválido. limpa_formulario_cep(); alert("Formato de CEP inválido."); } } //end if. else { //cep sem valor, limpa formulário. limpa_formulario_cep(); } } function formatar(mascara, documento){ var i = documento.value.length; var saida = mascara.substring(0,1); var texto = mascara.substring(i); if (texto.substring(0,1) != saida){ documento.value += texto.substring(0,1); } } function idade (){ var data=document.getElementById("dtnasc").value; var dia=data.substr(0, 2); var mes=data.substr(3, 2); var ano=data.substr(6, 4); var d = new Date(); var ano_atual = d.getFullYear(), mes_atual = d.getMonth() + 1, dia_atual = d.getDate(); ano=+ano, mes=+mes, dia=+dia; var idade=ano_atual-ano; if (mes_atual < mes || mes_atual == mes_aniversario && dia_atual < dia) { idade--; } return idade; } function exibe(i) { document.getElementById(i).readOnly= true; } function desabilita(i){ document.getElementById(i).disabled = true; } function habilita(i) { document.getElementById(i).disabled = false; } function showhide() { var div = document.getElementById("newpost"); if(idade()>=18){ div.style.display = "none"; } else if(idade()<18) { div.style.display = "inline"; } }

Related: See More


Questions / Comments: