<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tudo sobre o Google Glass</title>
<link rel="stylesheet" href="_css/estilo.css">
<link rel="stylesheet" href="_css/form.css">
</head>
<script src="_javascript/funcoes.js"></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="/curso-html5-pacote01/projeto-glass-html5/
_imagens/contato.png" alt="oculos preto do google glass">
<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">
<header id="cabecalho-artigo">
<hgroup>
<h3>Fale Conosco > Contato</h3>
<h1>Formulário de Contato</h1>
<h2>por Gustavo Guanabara</h2>
<h3 class="direita">Atualizado em 01/Maio/2013</h3>
</hgroup>
</header>
<form method="post" id="fContato" action="<mailto:contato@cursoemvideo>.
com">
<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 dígitos"></p>
<p><label for="cMail">E-mail:</label><input type="email"
name="tMail" id="cMail" size="20" maxlength="40"></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><label for="cNasc">Data de Nascimento:</label><input
type="date" name="tNasc" id="cNasc"></p>
</fieldset>
<fieldset id="endereco">
<legend>Endereço do Usuário</legend>
<p><label for="cRua">Logradouro:</label><input type="text"
name="tRua" id="cRua" size="13" maxlength="80"
placeholder="Rua, Av, Trav, ..."></p>
<p><label for="cNum">Número:</label><input type="number"
name="tNum" id="cNum" min="0" max="99999"></p>
<p><label for="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">Paraná</option>
<option value="SC">Santa Catarina</option>
<option value="RS">Rio Grnade do Sul</option>
</optgroup>
</select>
</p>
<p><label for="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 Iguaçu"></option>
<option value="Niterói"></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>
Mín<input type="range" name="tUrg" id="cUrg" min="0"
max="10" step="2">Máx</p>
<p><label for="cMsg">Mensagem:</label>
<textarea name="tMsg" id="cMsg" cols="45" rows="5"
placeholder="Deixe aqui sua mensagem"></textarea></p>
</fieldset>
<fieldset id="pedido">
<legend>Quero um Google Glass</legend>
<p><label for="cPed">Gostaria de adquirir um Google
Glass quando disponível</label></p>
<p><label for="cCor">Cor:</label></p>
<p><label for="cQtd">Quantidade:</label></p>
<p><label for="cTot">Preço Total: R$</label></p>
</fieldset>
[BOTÃO ENVIAR]
</form>
</article>
</section>
<footer id="rodape">
<p>Copyright © 2013 - by Gustavo Guanabara <br>
<a href="<https://facebook.com/cursosemvideo>" target="_blank">
Facebook</a> | <a href="<https://twitter.com/cursosemvideo>"
target="_blank">Twitter</a></p>
</footer>
</div>
</body>
</html>
<form method=”post”> : lento/mais seguro<form method=”get”> : rápido/menos seguro<form action=”mailto: email”> : action=”” Ela especifica para onde os dados do formulário devem ser enviados para processamento quando o formulário é submetido.”mailto: email” cria um link que, quando clicado, abre o cliente de email padrão do usuário com um novo email em branco. O endereço de email para o qual o email deve ser enviado é especificado após o mailto:.
<select> : é usada para criar uma caixa de seleção suspensa. Os elementos <option> dentro da tag <select> definem as opções na lista suspensa.<optgroup> : agrupamento de tags option<optgroup label=””> : é usado para agrupar opções relacionadas dentro de uma lista suspensa criada pela tag <select>. O valor do atributo label é exibido na lista como o título do grupo.<option> : opção<option value=””> : é usado para definir o valor que será enviado ao servidor quando um formulário for submetido.<input list=””> : é usado para vincular a tag <input> a uma tag <datalist>, que contém opções predefinidas para o campo de entrada.<datalist> : é usada para fornecer uma lista “autocompletar” de opções sugeridas para um campo de entrada. Ela funciona em conjunto com a tag <input> através do atributo list.<input *type*="range"> : o tipo range é usado para criar um controle deslizante (ou “slider”) que permite ao usuário selecionar um valor de uma faixa de valores.<input step="2"> : usado para especificar o intervalo entre os valores legais em um elemento de entrada.<textarea> : faz uma área de texto<textarea cols=””> : colunas<textarea rows=””> : linhas