<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="//code.jquery.com/jquery-1.11.1.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">Karatê</div>
<div class="panel-body">
<div class="form-group">
<!-- FOTO -->
<!-- <div class="form-group"> -->
<div class="col-md-3 control-label">
<img id="logo" src="https://visafoto.com/img/docs/mn_visa_3x4cm.jpg"/>
</div>
<div class="col-md-5 control-label">
<h1>Ficha de Registro do Praticante</h1>
<br><br><br><br><br><br>
<p class="help-block"><h11>*</h11> Campo Obrigatório </p>
</div>
<!-- </div> -->
<!--
<div class="col-md-7 control-label">
<p class="help-block"><h11>*</h11> Campo Obrigatório </p>
</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>
<div class="form-group">
<label class="col-md-2 control-label" for="Cpf">CPF</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="Rg">RG <h11>*</h11></label>
<div class="col-md-2">
<input id="Rg" name="Rg" 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="Graduacao">Graduação <h11>*</h11></label>
<div class="col-md-2">
<select required id="Graduacao" name="Graduacao" class="form-control">
<option value=""></option>
<option value="7kyu">Branca (7º Kyu)</option>
<option value="6kyu">Amarela (6º Kyu)</option>
<option value="5kyu">Vermelha (5º Kyu)</option>
<option value="4kyu">Laranja (4º Kyu)</option>
<option value="3kyu">Verde (3º Kyu)</option>
<option value="2kyu">Roxa (2º Kyu)</option>
<option value="1kyu">Marrom (1º Kyu)</option>
<option value="1dan">Preta (1º Dan)</option>
<option value="2dan">Preta (2º Dan)</option>
<option value="3dan">Preta (3º Dan)</option>
<option value="4dan">Preta (4º Dan)</option>
<option value="5dan">Preta (5º Dan)</option>
</select>
</div>
</div>
<div class="form-group">
<!-- Multiple Radios (inline) -->
<label class="col-md-2 control-label" for="radios">Sexo <h11>*</h11></label>
<div class="col-md-2">
<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>
<label class="col-md-1 control-label" for="Nascimento">Nascimento<h11>*</h11></label>
<div class="col-md-2">
<input id="Nascimento" name="Nascimento" placeholder="DD/MM/AAAA" class="form-control input-md" required="" type="text" maxlength="10" OnKeyPress="formatar('##/##/####', this)" onBlur="showhide()">
</div>
<label class="col-md-1 control-label" for="Idade">idade</label>
<div class="col-md-1">
<input id="Idade" name="Idade" placeholder="" class="form-control input-md" required="" readonly="readonly" type="text">
</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>
<label class="col-md-1 control-label" for="Peso">Peso <h11>*</h11></label>
<div class="col-md-1">
<input id="Peso" name="Peso" placeholder="" class="form-control input-md" required="" type="text">
</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 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>
<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>
<div class="form-group">
<label class="col-md-2 control-label" for="Mae">Nome da Mãe <h11>*</h11></label>
<div class="col-md-3">
<input id="Mae" name="Mae" type="text" placeholder="" class="form-control input-md" required="">
</div>
<label class="col-md-1 control-label" for="Pai">Nome do Pai <h11>*</h11></label>
<div class="col-md-4">
<input id="Pai" name="Pai" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="Registro">Registro</label>
<div class="col-md-2">
<div class="input-group">
<span class="input-group-addon">FPK nº</span>
<input id="Fpk" name="Fpk" class="form-control" type="text" placeholder="Apenas números" >
</div>
</div>
<div class="col-md-2">
<div class="input-group">
<span class="input-group-addon">CBK nº</span>
<input id="Cbk" name="Cbk" class="form-control" type="text" placeholder="Apenas números" >
</div>
</div>
<label class="col-md-1 control-label" for="obs">Observação</label>
<div class="col-md-3">
<div class="input-group">
<input id="obs" name="obs" class="form-control" type="text" placeholder="">
</div>
</div>
</div>
<!-- Button -->
<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);
}else{
//CEP não Encontrado.
limpa_formulario_cep();
alert("CEP não encontrado.");
document.getElementById('Cep').value=("");
}
}
function pesquisacep(valor){
alert(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);
}else{
//cep é inválido.
limpa_formulario_cep();
alert("Formato de CEP inválido.");
}
}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("Nascimento").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(),
var mes_atual = d.getMonth() + 1,
var dia_atual = d.getDate();
ano =+ ano,
mes =+ mes,
dia =+ dia;
var idade = ano_atual - ano;
if(mes_atual < mes || mes_atual == mes && dia_atual < dia){
idade--;
}
document.getElementById("Idade").value = 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");
//alert(idade());
//document.getElementById("Idade").value = (idade());
if(idade() >= 18){
div.style.display = "none";
}else if(idade() < 18){
div.style.display = "inline";
}
}
