-
Notifications
You must be signed in to change notification settings - Fork 0
/
fale-conosco.html
134 lines (123 loc) · 6.14 KB
/
fale-conosco.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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8"/>
<title>Tudo sobre o Google Glass</title>
<link rel="stylesheet" href="estilo.css">
<link rel="stylesheet" href="_css/form.css">
</head>
<script src="_javascript/funcoes.js"></script>
<script>
function calc_total(){
var qtd = parseInt(document.getElementById('cQtd').value)
var tot = qtd * 1500
document.getElementById('cTot').value = tot
}
</script>
<body >
<div id ="interface">
<header id ="cabecalho">
<hgroup>
<h1>Google Glass</h1>
<h2>A revolução do Google está chegando </h2>
</hgroup>
<img id="icone" src="_imagens/glass-oculos-preto-peq.png">
<nav id ="menu">
<h1>Menu Principal</h1>
<ul type="square">
<li onmouseover="mudaFoto('_imagens/home.png')" onmouseout="mudaFoto('_imagens/contato.png')"><a href="index.html">Home</a></li>
<li onmouseover="mudaFoto('_imagens/especificacoes.png')" onmouseout="mudaFoto('_imagens/contato.png')"><a href="specs.html">Especificações</a></li>
<li onmouseover="mudaFoto('_imagens/fotos.png')" onmouseout="mudaFoto('_imagens/contato.png')"><a href="fotos.html">Fotos</a></li>
<li onmouseover="mudaFoto('_imagens/multimidia.png')" onmouseout="mudaFoto('_imagens/contato.png')"><a href="multimidia.html">Multimídia</a></li>
<li onmouseover="mudaFoto('_imagens/contato.png')" onmouseout="mudaFoto('_imagens/contato.png')"><a href="fale-conosco.html">Fale conosco</a></li>
</ul>
</nav>
</header>
<section id = "corpo-full">
<article id="noticia-principal">
<header id="cabecalho-artigo">
<hgroup>
<h3>Fale Conosco > Contato</h3>
<h1>Formulario de Contato</h1>
<h2>por Leonardo Dias </h2>
<h3 class="direita"> em 23/abril/2022 </h3>
</hgroup>
</header>
</article>
</section>
<form method="post" id="fContato" action="mailto:[email protected]" oninput="calc_total();">
<fieldset id="usuario"><legend>Identifição do Usuário</legend>
<p><label for="cNome">Nome:</label><input type="text" name="tNome" id="cNome" size="20" maxlength="30" placeholder="Nome Completo"></p>
<p><label for="cSenha">Senha:</label><input type="password" name="tSenha" id="cSenha" size="12" maxlength="8" placeholder="Digite a sua senha"></p>
<p><label for="cMail">E-mail:</label> <input type="email" name="tMail" id="cMail" size="20" maxlength="40" placeholder="Digite seu email"></p>
<fieldset id="sexo"><legend>Sexo:</legend>
<input type="radio" name="tSexo" id="cMasc" checked><label for="cMasc"> Masculino </label></br>
<input type="radio" name="tSexo" id="cFem"><label for="cFem"> Feminino </label></fieldset>
<p>Data de Nascimento: <input type="date" name="tNasc" id="cNasc"></p>
</fieldset>
<fieldset id="endereco"><legend>Endereço</legend>
<p><label for="cRua">Logradouro:</label> <input type="text" name="tRua" id="cRua" size="20" maxlength="80" placeholder="Rua, Av, Travessa ..."></p>
<p><label for="cNum">Número:</labe> <input type="number" name="tNum" id="cNum" min="0" max="99999" placeholder="Seu número"></p>
<p><label for="cEst">Estado:</label><select name="tEst" id="cEst">
<optgroup label="Região Sudeste">
<option>Minas Gerais</option>
<option selected>São Paulo</option>
<option>Rio de Janeiro</option>
<option>Espírito Santo</option>
</optgroup>
<optgroup label="Região Sul">
<option>Paraná</option>
<option>Rio Grande do Sul</option>
<option>Santa Catarina</option>
</optgroup>
<optgroup label="Região Centro Oeste">
<option>Distrito Federal</option>
<option>Goias</option>
<option>Mato Grosso</option>
<option>Mato Grosso do Sul</option>
</optgroup>
<optgroup label="Região Nordeste">
<option>Alagoas</option>
<option>Bahia</option>
<option>Ceará</option>
<option>Maranhão</option>
<option>Paraíba</option>
<option>Pernambuco</option>
<option>Piaui</option>
<option>Rio Grande do Norte</option>
<option>Sergipe</option>
</optgroup>
<optgroup label="Região Norte">
<option >Acre</option>
<option>Amapá</option>
<option>Amazonas</option>
<option>Pará</option>
<option>Roraima</option>
<option>Tocantins</option>
</optgroup>
</select></p>
<p><label for="cCid">Cidade:</label><input type="text" name="tCidade" id="cCid" placeholder="Digite sua cidade"> </p>
</fieldset>
<fieldset id="mensagem"><legend>Mensagem do Usuário</legend>
<p><label for="cGrau">Grau de Urgência: </label>Min<input type="range" name="tGrau" id="cGrau" min="0" max="10"> Max</p>
<p><label for="cMensagem">Mensagem:</label>
<textarea name="tMsg" id="cMsg" cols="45" rows="5" placeholder="Deixe aqui sua mensagem">
</textarea>
</p>
<fieldset><legend>Quero um Google Glass</legend>
<input type="checkbox" checked name="tPed" id="cPed">
<label for="cPed">Gostaria de adquirir um Google Glass quando disponível</label>
<p><label for="cCor">Cor:</label>
<input type="color" name="tCor" id="cCor" value="#0000ff"></p>
<p><label for="cQtd">Quantidade:</label>
<input type="number" name="tQtd" id="cQtd" min="0" max="5" size="5"></p>
<p><label for="cTot">Preço Total: R$</label><input type="number" name="tTot" id="cTot" placeholder="Total a pagar" readonly></p>
</fieldset>
<input type="submit" value="Enviar">
</form>
<footer id="rodape">
<p>Copyright© 2022 by Leonardo Dias <br/> </p>
<p><a href="http://facebook.com/leonardo.dias.52643" target="blank">Facebook </a>| <a href="http://twitter.com/LeonardoDiasmo6" target="blank">Twitter <a>| <a href="http://nstagram.com/leodias2204/" target="blank">Instagram</p>
</footer>
</body>
</html>