<!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>
<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>Data de Nascimento:<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>Estado: <input type="text" name="" id=""></p>
<p>Cidade: <input type="text"></p>
</fieldset>
<fieldset id="mensagem">
<legend>Mensagem do Usuário</legend>
Grau de Urgência:
Mensagem:
</fieldset>
<fieldset id="pedido">
<legend>Quero um Google Glass</legend>
Gostaria de adquirir um Google Glass quando disponível
Cor:
Quantidade:
Preço Total: R$
</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> : é usada para criar um formulário web para entrada do usuário.<fieldset> : é usada para agrupar elementos relacionados em um formulário. Ela desenha uma caixa ao redor dos elementos relacionados.<legend> : é usada para definir um título para o grupo de elementos contidos na tag <fieldset>.<label> : é usada para definir um rótulo para um elemento <input>.A tag <label> é útil para melhorar a acessibilidade do seu formulário. Quando você clica no texto dentro da tag <label>, o navegador foca ou ativa o controle de formulário associado.
<label for=””> : é usado para associar o rótulo a um elemento de entrada específico. O valor do atributo for deve ser igual ao valor do atributo id do elemento de entrada ao qual o rótulo está associado.<input> : é usada para criar campos de entrada de dados que permitem aos usuários inserir dados. Esses dados podem ser, por exemplo, textos, senhas, números, e-mails, datas, entre outros.Subclasses para a tag <input> : *type*="text" type="password" type=”date” type="number" *name*="tNome" *id*="cNome" *size*="20" *maxlength*="30" *placeholder*="Nome Completo" checked min=”0” max=”99999”
type=”text” : tipo textoname=”” : é usado para especificar o nome de um elemento de entrada. Este atributo é usado para identificar campos de formulário quando os dados são enviados ao servidor.id=”” : define um identificador único para um elemento HTML.size=”” : tamanhomaxlength=”” : é usado para definir o número máximo de caracteres que um campo de entrada pode aceitar.placeholder=”” : ele vai colocar uma mensagem no campo de escrita do formuláriotype=”password” : tipo senhatype=”email” : tipo emailtype=”radio” : Uma atenção vc tem que ter nesse parâmetro, é que essa subteg tem um pequeno erro, ela serve para vc marcar um opção. No caso da aula do curso em vídeo, o professor Guanabara mostra que para que funcione esse sistema de marcação, vc tem que botar o nome na tag name iguais nas duas ou mais opções.checked : Ele especifica que um campo de entrada deve ser pré-selecionado (marcado) quando a página carrega.type=”date” : tipo datatype=”number” : tipo númeromin=”” : valor mínimo de caracteresmax=”” : valor máximo de caracteres