Solução item 30. OBS.: a melhor maneira de estudar este código é criar os arquivos (2 x html e o css) abrir o arquivo
formulário.html no navegador ver a formatação e depois alterar valores de algumas propriedades CSS para ver o
efeito. OBSERVE SEMPRE A FIGURA COLORIDA NO ENUNCIADO DO EXERCÍCIO PARA ENTENDER.
ATENÇÃO! A PROVA É SEM CONSULTA E NÃO HAVERÁ HELP. VOCÊ PRECISA ENTENDER E LEMBRAR DOS
PRINCIPAIS SELETORES\PROPRIEDADES CSS e TAGS XHTML.
O código abaixo se refere ao conteúdo do arquivo formulario.html (note na linha 5 a indicação do arquivo .css que
será usado para definição do layout).
Atenção: não deixe de estudar class , id , span
<!DOCTYPE html>
(presentes no exercício 28). E os outros
<html>
<head>
exercícios de html e css. Não deixe de estudar
<title> Formulário de Inscrição</title>
outras TAGS HTML (criar link, etc.)
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
CONTEUDO DA PROVA: A PARTIR DO ITEM 16
<body>
DO SITE. ATENÇÃO PARA O ITEM 25 TAMBÉM.
<div id="principal">
<div id="conteudoEsq">
<form action="enviado.html" method="post" name="cadastro" id="cadastro">
<fieldset>
<legend>Cadastro</legend>
<p>
Atenção: INPUT pode ser do tipo (type): text,
<label for="nome">Nome: </label>
checkbox ou radio. Estude.
<input type="text" name="nome" id="nome" />
</p>
<p>
<label for="endereço">Endereço: </label>
<input type="text" name="endereco" id="endereco" />
</p>
<p>
<label for="série">Série: </label>
<select name="serie" id="serie">
Criação do combo de itens para seleção.
<option>escolha a série</option>
Usamos as tags SELECT e OPTION.
<option value="s1">1a série</option>
<option value="s2">2a série</option>
<option value="s3">3a série</option>
Usamos para associar (através do for) o
</select>
LABEL “Manhã” ao checkbox de id =”manha”
</p>
<p>
Disponibilidade: <br />
<input type="checkbox" name="manha" value="sim" id="manha" />
LABEL ajuda na
<label for="manha">Manhã</label>
<br />
acessibilidade. Ao lado, por
<input type="checkbox" name="tarde" value="sim" id="tarde" />
exemplo, poderia usar
<label for="tarde">Tarde</label>
apenas as palavras manha,
<br />
tarde e noite (soltas) antes
<input type="checkbox" name="noite" value="sim" id="noite" />
de cada input, mas não seria
<label for="noite">Noite</label>
possível acessar o campo
</p>
</fieldset>
\checkbox\radio a partir de
<p> </p>
um clique nestas palavras no
<input type="reset" name="Submit2" value="Limpar dados" />
formulário.
</p>
<input type="submit" name="Submit1" value="Enviar formulário" />
Texto que aparece
</p>
sobre o botão.
</form>
</div> <!—fechamento da div "conteudoEsq" -->
<div id="logo">
<p> </p>
</div> <!—fechamento da div "logo". Note que a div “logo” está fora da div “conteudoEsq” -->
<div id="conteudoDir">
<h4> Empresas Associadas</h4>
Note que a caixa (div logo) NÃO está
<ol>
dentro da caixa branca (conteudoEsq) que
<li> Petróleo Limpo SA</li>
já foi fechada. Se estivesse, a coruja
<li> Ouro e Prata SA</li>
apareceria no meio do formulário.
<li> Prefeitura de Pirapora</li>
<li> Maicrousofiti Ltda</li>
<li> Outras</li>
</ol>
<p> <span id=realceMSG>Entraremos em contato </span>logo que volgus rectum videt, est ubi peccat. Si veteres ita
miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure
dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo.Non equidem insector
delendave carmina Livi esse reor, ve multa fatetur, et sapit et mecum facit et Iova iudicat aequo.Non equidem
insector delendave carm memini quae plagosum mihi parvo Orbilium dictare ignave multa fatetur etc nimis antique.
</p>
</div> <!—fechamento da div "conteudoDir" -->
</div>
<!—fechamento da div "principal" -->
</body>
</html>
O código abaixo se refere ao conteúdo do arquivo enviado.html (apenas uma msg de agradecimento) que é a página
chamada quando o usuário clica no botão submit ("Enviar formulário"). Veja a linha marcada com
acima.
<!DOCTYPE html>
<html>
<head>
<title> Agradecimento</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="principal">
<p> </p>
<h1>Obrigado</h1>
</div>
</body>
</html>
O código abaixo se refere ao conteúdo do arquivo estilo.css (note a indicação deste arquivo na linha 5 do arquivo
formulario.html).
/* corpo da página com atribuições genéricas */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
background-color: blue;
background-image: url(logoPrincipal.jpg);
background-repeat: no-repeat;
}
/* caixa principal */
#principal {
position:relative;
margin: 3%;
width: 965px;
}
Para que a caixa branca (div conteudoEsq) não
apareça sobre a figura “Organizacao Estagio Facil”.
Obs.: lembrando que margin trata da distância em
relação aos elementos ao redor.
/* caixa conteúdo lado Esq */
#conteudoEsq {
position:absolute;
width: 700px;
margin-top: 30px;
padding-top: 70px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: white;
}
Para que o conteúdo colocado na caixa branca
(chamada conteudoEsq) não fique sobre a caixa com
o logo da coruja (caixa logo), colocamos este
espaçamento INTERNO no topo para que o início do
formulário não fique sobre a caixa logo (coruja).
/* caixa do logo */
#logo {
position:absolute;
width: 60px;
height: 50px;
margin-top: 45px;
margin-left: 10px;
background-image: url(logo.jpg);
background-repeat: no-repeat;
background-color: red;
}
Já sabemos que margin funciona em relação aos
elementos ao redor, então, com esta margem de
45px, a caixa da logo não ficará sobre a figura
“Organizacao Estagio Facil” no elemento body.
Esta é a caixa amarela que fica no lado direito
(conteudoDir). Para que ela fique na mesma altura da
caixa branca (conteudoEsq), foi definida a mesma
margem em relação ao elemento body.
/* conteúdo do lado direito */
#conteudoDir {
position:absolute;
width: 245px;
margin-top: 30px;
height: 457px;
margin-left: 722px;
background-color: yellow;
padding: 10px;
overflow: auto;
}
#realceMSG {
background-color: #fff;
color: #92171A;
font-weight: bolder
}
Esta caixa (logo) tem apenas a figura do coruja. Ela serve
para posicionar a “coruja”, de forma precisa, no local
desejado. Como a figura da coruja tem um pouco menos de
50px de altura, definimos a altura da caixa logo com 50px.
Esta margem esquerda é grande para que a caixa
amarela (conteudoDir) fique posicionada após a caixa
branca. Veja a imagem colorida no enunciado.
Aparece a barra de
rolagem se o conteúdo
não couber (overflow)
/* estilos para elementos do formulário */
fieldset {
border: solid #666;
}
O espaçamento INTERNO de 10px será dado para TOP,
BOTTOM, LEFT e RIGHT já que não foram especificados. O
valor 10px é para que o espaçamento interno seja o
mesmo da caixa da esquerda.
ATENÇÃO. Este é o realce que será dado ao texto “Entraremos em
contato” (veja a figura colorida no enunciado do exercício). Usamos a
tag SPAN com um ID qualquer (neste exercício usamos realceMSG)
para delimitar o texto que será formatado de modo diferente. Veja em
formulário.html o código <span id=realceMSG>Entraremos em
contato </span> ....
Formatação da linha ao redor dos elementos do
formulário (agrupamento). Note que a linha foi criada no
arquivo formulario.html usando a tag <fieldset>, com
</fieldset> após o último elemento que se deseja
envolver.
legend {
font-size: 11px;
font-weight: bolder;
color: #666;
}
Formatação do texto “Cadastro” (legenda) usado na linha
que envolve os elementos (<fieldset>).
label {
color: #900;
}
#nome, #endereco {
border-top-style: none;
border-right-style: none;
border-left-style: none;
border-bottom-color: #666;
width: 400px;
}
input[type="submit"], input[type="reset"] {
background-color: #CCC;
width: 150px;
border: 3px solid #666;
cursor: pointer;
}
Modo de indicar seletores css para formatação dos
botões submit e reset.
Troca a seta do mouse pela mão apontando.
Download
