Sua doação ajuda meio biente Deixando o planeta limpo #183
Description
<title>Cadastro</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f8f8f8;
}
form {
background: #fff;
padding: 24px;
border-radius: 6px;
max-width: 480px;
margin: 40px auto;
box-shadow: 0 0 8px #ccc;
}
fieldset {
margin-bottom: 18px;
border-radius: 6px;
border: 1px solid #ccc;
padding: 16px;
}
legend {
font-weight: bold;
}
label {
display: block;
margin-top: 10px;
}
input, select {
width: 100%;
padding: 6px;
margin-top: 3px;
box-sizing: border-box;
}
button {
margin-top: 18px;
padding: 10px 18px;
background: #0a7cff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
}
</style>
Dados Pessoais
Nome Completo:
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" required autocomplete="email">
<label for="cpf">CPF:</label>
<input type="text" id="cpf" name="cpf" required pattern="\d{3}\.\d{3}\.\d{3}-\d{2}" maxlength="14" autocomplete="off" placeholder="000.000.000-00">
<label for="telefone">Telefone:</label>
<input type="tel" id="telefone" name="telefone" required pattern="\(\d{2}\)\s\d{5}-\d{4}" maxlength="15" autocomplete="tel" placeholder="(00) 00000-0000">
<label for="data_nascimento">Data de Nascimento:</label>
<input type="date" id="data_nascimento" name="data_nascimento" required>
</fieldset>
<fieldset>
<legend>Endereço</legend>
<label for="endereco">Endereço:</label>
<input type="text" id="endereco" name="endereco" required autocomplete="street-address">
<label for="cep">CEP:</label>
<input type="text" id="cep" name="cep" required pattern="\d{5}-\d{3}" maxlength="9" autocomplete="postal-code" placeholder="00000-000">
<label for="cidade">Cidade:</label>
<input type="text" id="cidade" name="cidade" required autocomplete="address-level2">
<label for="estado">Estado:</label>
<select id="estado" name="estado" required autocomplete="address-level1">
<option value="">Selecione</option>
<option value="AC">Acre</option><option value="AL">Alagoas</option>
<option value="AP">Amapá</option><option value="AM">Amazonas</option>
<option value="BA">Bahia</option><option value="CE">Ceará</option>
<option value="DF">Distrito Federal</option><option value="ES">Espírito Santo</option>
<option value="GO">Goiás</option><option value="MA">Maranhão</option>
<option value="MT">Mato Grosso</option><option value="MS">Mato Grosso do Sul</option>
<option value="MG">Minas Gerais</option><option value="PA">Pará</option>
<option value="PB">Paraíba</option><option value="PR">Paraná</option>
<option value="PE">Pernambuco</option><option value="PI">Piauí</option>
<option value="RJ">Rio de Janeiro</option><option value="RN">Rio Grande do Norte</option>
<option value="RS">Rio Grande do Sul</option><option value="RO">Rondônia</option>
<option value="RR">Roraima</option><option value="SC">Santa Catarina</option>
<option value="SP">São Paulo</option><option value="SE">Sergipe</option>
<option value="TO">Tocantins</option>
</select>
</fieldset>
<button type="submit">Cadastrar</button>
</form>
<script>
// Máscara CPF
document.getElementById('cpf').addEventListener('input', function() {
let v = this.value.replace(/\D/g, '');
if (v.length > 3) v = v.replace(/^(\d{3})(\d)/, '$1.$2');
if (v.length > 6) v = v.replace(/^(\d{3})\.(\d{3})(\d)/, '$1.$2.$3');
if (v.length > 9) v = v.replace(/^(\d{3})\.(\d{3})\.(\d{3})(\d)/, '$1.$2.$3-$4');
this.value = v.slice(0,14);
});
// Máscara telefone
document.getElementById('telefone').addEventListener('input', function() {
let v = this.value.replace(/\D/g, '');
v = v.replace(/^(\d{2})(\d)/g, '($1) $2');
v = v.replace(/(\d{5})(\d)/, '$1-$2');
this.value = v.slice(0,15);
});
// Máscara CEP
document.getElementById('cep').addEventListener('input', function() {
let v = this.value.replace(/\D/g, '');
if (v.length > 5) v = v.replace(/^(\d{5})(\d)/, '$1-$2');
this.value = v.slice(0,9);
});
</script>