fale-conosco.html

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <title>Tudo sobre Google Glass</title>
    <link rel="stylesheet" href="_css/estilo.css">
    <link rel="stylesheet" href="_css/form.css">
    <script language="javascript" src="_javascript/funcoes.js"></script>
    <script>
        function calc_total() {

            var quant = parseInt(document.getElementById('cquant').value);
            prec = quant * 1500;
            document.getElementById('cprec').value = prec;
        }
    </script>
</head>


<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/contato.png" />
            <nav id="menu">
                <h1> Menu Principal</h1>
                <ul type="disc">
                    <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">
                <hgroup>
                    <header id="cabecalho-de-artigo">
                        <h3> Fale Conosco > Contato</h3>
                        <h1>Formulario de Contato</h1>
                        <h2> por João Matheus Cardoso Dias</h2>
                        <h3 class="direita "> Atualizado em Abril/2020</h3>
                    </header>
                </hgroup>
            </article>
        </section>
        <form method="post" id="fcontato" action="mailto:jm_matheus_20@hotmail.com" oninput="calc_total();">
            <fieldset id="usuario">
                <legend>Identificaçã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="8" maxlength="8" placeholder="8 digitos"></p>
                <p><label for="cemail">E-mail:</label> <input type="email" name="temail" id="cemail" size="20" maxlength="40" placeholder="E-mail valido"></p>
            </fieldset>
            <fieldset id="sexo">
                <legend>Sexo:</legend>
                <input type="radio" name="tsexo" id="cmasc" checked><label for="cmasc">Masculino</label></input>
                </br>
                <input type="radio" name="tsexo" id="cfem"><label for="cfem">Feminino</label></input>
                <p><label for="cdata">Data de Nascimento:</label> <input type="date" name="tdata" id="cdata"></p>
            </fieldset>
            <fieldset id="endereco">
                <legend>Endereço do Usuário</legend>
                <p><label name="crua">Logradouro:</label><input type="text" name="trua" id="crua" size="13" maxlength="80" placeholder="Rua, Av, Travessa..."></p>
                <p><label name="cnum">Número:</label><input type="number" name="tnum" id="cnum" min="0" max="99999"> </p>
                <p><label name="cest">Estado:</label>
                    <select name="test" id="cest">
                    <optgroup label="Região Sudeste">
                    <option value="RJ">Rio de Janeiro</option>
                    <option value="SP" selected >São Paulo</option>
                    <option value="MG">Minas Gerais</option>
                </optgroup>
                <optgroup label="Região Sul">
                    <option value="PR">Parana</option>
                    <option value="SC">Santa Catarina</option>
                    <option value="RS">Rio Grande do Sul</option>
                    </optgroup>
                </select></p>
                <p><label name="ccid">Cidade: </label>
                    <input type="text" name="tcid" id="ccid" maxlength="40" size="20" placeholder="Sua Cidade" list="cidades"> </p>
                <datalist id="cidades">
                    <option value="Rio de Janeiro"></option>
                    <option value="Nova Iguacu"></option>
                    <option value="Niteroi"></option>
                    <option value="Belford Roxo"></option>
                </datalist>

            </fieldset>
            <fieldset id="mensagem">
                <legend>Mensagem do Usuário</legend>
                <p><label for="curg">Grau de Urgência:</label> Min
                    <input type="range" name="turg" id="curg" min="0" max="10" step="2">Max </p>
                <p><label for="cmsg">Mensagem:</label>
                    <textarea name="tmsg" id="cmsg" cols="35" rows="5" placeholder="Deixe aqui sua mensagem"></textarea></p>
            </fieldset>
            <fieldset id="pedido">
                <legend>Quero um Google Glass</legend>
                <p><input type="checkbox" name="tped" id="cped" checked>
                    <label for="cped"> Gostaria de adquirir um Google Glass quando disponível</label> </p>
                <p><label for="ccor">Cor:</label>
                    <input type="color" name="tcor" id="ccor" value="#000FF"> </p>
                <p><label for="cquant">Quantidade:</label><input type="number" name="tquant" id="cquant" min="0" max="5" value="0"></p>
                <p><label for="cprec">Preço Total: R$</label>
                    <input type="text" name="tprec" id="cprec" placeholder="Total a Pagar" readonly></p>
            </fieldset>

            <input type="image" name="tenviar" id="cenviar" src="_imagens/botao-enviar.png">
        </form>
        <footer id="rodape">
            <p>Copyright &copy; 2020 - by João Dias <br/>
                <a href="http://facebook.com/cursoemvideo" target="blank">Facebook |</a>
                <a href="http://twitter.com/cursoemvideo" target="blank">Twitter</a></p>
        </footer>
    </div>
</body>

</html>