-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
149 lines (123 loc) · 6.16 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Style.css" media="screen">
<!– Incluso o direcionamento para o arquivo css do formulário –>
<title>Cadastro de Novos Usuários - ITAU</title>
</head>
<body>
<form action="#" method="GET" class="formulario">
<!– Apesar do metodo "post" nao ter limite de envios pela url e reduzir a exibição de dados potencialmente sensíveis de um cadastro,
foi definido o metodo GET devido a caracteristica desta pagina de nao coletar os dados e o direcionamento ao proprio formulario. –>
<header class="header">
<img src="/imagens/logo_itau.png" alt="logo itau" width=60 height=60>
<div class="titulo">
<h2>Cadastro de Usuários</h2>
<p>Insira abaixo as informações solicitadas</p>
</div>
<!– Header separado com classes distintas para facilitar a formatação em CSS –>
</header>
<fieldset class="grupo">
<div class="campo">
<label for="nome"><strong>Nome Completo:</strong><font color="#FF0000">*</font></label>
<input type="text" name="nome" id="nome" placeholder="Digite seu nome completo" maxlength="100" required>
</div>
<div class="campo">
<label for="CPF"><strong>CPF:</strong><font color="#FF0000">*</font></label>
<input type="text" name="cpf" id="nome" placeholder="___.___.___-__" maxlength="14" required>
</div>
<!– Foi incluso maxlenght em todos os campos, previnindo alguns dos erros do usuário durante a digitação de dados com números específicos de caracteres.
Para tanto, foi considerado o usuário que insere caracteres como "." e "-" durante a digitação de números como CPF –>
<div class="campo">
<label for="RG"><strong>RG:</strong></label>
<input type="text" name="rg" id="rg" placeholder="Digite seu RG" maxlength="14">
</div>
<div class="campo">
<label for="TelefoneCelular"><strong>Telefone Celular:</strong><font color="#FF0000">*</font></label>
<input type="text" name="telefonecelular" id="telefonecelular" placeholder="(DDD) _____-____" maxlength="16" required>
</div>
<div class="campo">
<label for="TelefoneFixo"><strong>Telefone fixo:</strong></label>
<input type="text" name="telefonefixo" id="telefonefixo" placeholder="(DDD) ____-____" maxlength="15">
</div>
<div class="campo">
<label for="Endereco"><strong>Endereço:</strong><font color="#FF0000">*</font></label>
<input type="text" name="endereco" id="endereco" placeholder="Digite seu endereço" maxlength="100" required>
</div>
<div class="campo">
<label for="Numero"><strong>Número:</strong><font color="#FF0000">*</font></label>
<input type="text" name="numero" id="numero" placeholder="Digite o número da sua residência" maxlength="6" required>
</div>
<div class="campo">
<label for="Bairro"><strong>Bairro:</strong></label>
<input type="text" name="bairro" id="bairro" placeholder="Digite seu bairro" maxlength="40">
</div>
<div class="campo">
<label for="Cidade"><strong>Cidade:</strong></label>
<input type="text" name="cidade" id="cidade" placeholder="Digite a sua cidade" maxlength="40">
</div>
</fieldset>
<fieldset class="grupo">
<div class="campo">
<!– Para o campo Estado foi escolhida a opção select por ser uma informação de baixa variabilidade (nao surgem estados constantemente) e um número
reduzido de federações. –>
<label for="estado"><strong>Estado:</strong></label>
<select id="estado">
<option selected disabled value="">Selecione</option>
<option>Acre</option>
<option>Alagoas</option>
<option>Amapá</option>
<option>Amazonas</option>
<option>Bahia</option>
<option>Ceará</option>
<option>Espírito Santo</option>
<option>Goiás</option>
<option>Maranhão</option>
<option>Mato Grosso</option>
<option>Mato Grosso do Sul</option>
<option>Minas Gerais</option>
<option>Pará</option>
<option>Paraíba</option>
<option>Paraná</option>
<option>Pernambuco</option>
<option>Piauí</option>
<option>Rio de Janeiro</option>
<option>Rio Grande do Norte</option>
<option>Rio Grande do Sul</option>
<option>Rondônia</option>
<option>Rorâima</option>
<option>Santa Cataria</option>
<option>São Paulo</option>
<option>Sergipe</option>
<option>Tocantins</option>
<option>Distrito Federal</option>
</select>
</div>
<div class="campo">
<label for=><strong>Qual o seu gênero? </strong></label>
<label>
<input type="radio" name="genero" value="Masculino">Masculino
</label>
<label>
<input type="radio" name="genero" value="Feminino">Feminino
</label>
<label>
<input type="radio" name="genero" value="outros">Outro
</label>
</div>
<div>
<button class="botao" id="submit" onclick="enviar()" class="enviar_form" >Enviar</button>
</div>
<div class="footer">
Autor: Andréia Paulina Michaelsen de Mendonça - 2021
</div>
</fieldset>
<!– Incluso javascript no documento anexo, onde o html realiza a validação se os campos obrigatorios foram preenchidos e,
caso positivo, é exibido um alert personalizado utilizando o nome de quem escreveu a mensagem, informando o envio. –>
</form>
<script src="script.js"></script>
</body>
</html>