Você está na página 1de 5

<html>

<head>
<title>Formul&aacute;rio_3</title>
</head>
<body>
<form action="">
<fieldset>
<legend>Cadastro Geral</legend>
<fieldset id="dp1">
<legend>Dados Pessoais</legend>
<label for="nome">Nome Completo:</label>
<input name="nome" type="text" id="nome" />
<label for="prof">Profiss&atilde;o:</label>
<select id="prof">
<option selected="selected">Sua Profiss&atilde;o</option>
<optgroup label="Engenharia">
<option>Civil</option>
<option>De Minas</option>
<option>Metal&uacute;rgica</option>
<option>Naval</option>
<option>Mec&acirc;nica</option>
<option>El&eacute;trica</option>
<option>Qu&iacute;mica</option>
<option>T&ecirc;xtil</option>
<option>De Produ&ccedil;&atilde;o</option>
<option>De Materiais</option>
<option>De Agrimensura</option>
<option>Cartogr&aacute;fica</option>
<option>De Controle e Automa&ccedil;&atilde;o</option>
</optgroup>
<optgroup label="Ci&ecirc;ncias Exatas e da Terra">
<option>Astronomia</option>
<option>Ci&ecirc;ncia da Computa&ccedil;&atilde;o</option>
<option>Geof&iacute;sica</option>
<option>Geologia</option>
<option>Estat&iacute;stica</option>
<option>Ci&ecirc;ncias Aeron&aacute;uticas</option>
<option>F&iacute;sica</option>
<option>Qu&iacute;mica</option>
<option>Matem&aacute;tica</option>
<option>Sistemas de Informa&ccedil;&atilde;o</option>
</optgroup>
<optgroup label="Ci&ecirc;ncias Sociais Aplicadas">
<option>Administra&ccedil;&atilde;o</option>
<option>Ciencias Atuariais</option>
<option>Ciencias Contabeis</option>
<option>Direito</option>
<option>ciencias Economicas</option>
<option>Arqueologia</option>
<option>Ciencias Sociais</option>
<option>Relacoes Internacionais</option>
<option>Economia Domestica</option>
<option>Arquivologia</option>
<option>Museologia</option>

<option>Servico Social</option>
<option>Hotelaria</option>
<option>Comercio Exterior</option>
<option>Turismo</option>
<option>Secretariado Executivo</option>
<option>Biblioteconomia</option>
</optgroup>
<optgroup label="Comunicacao">
<option>Publicidade e Propaganda</option>
<option>Relacoes Publicas</option>
<option>Jornalismo</option>
<option>Radio e TV</option>
<option>Producao Cultural</option>
</optgroup>
</select>
</fieldset>
<fieldset id="dp2">
<legend>Localiza&ccedil;&atilde;o</legend>
<label for="email">E-Mail:</label>
<input type="text" id="email" />
<label for="email">Rua:</label>
<input type="text" id="rua" />
</fieldset>
<fieldset id="fe">
<legend>Faixa Et&aacute;ria</legend>
<div>
<p><input type="radio" name="idade" id="vinte"><label for="vinte">At&eacute; 20
anos</p>
</div>
<div>
<p><input type="radio" name="idade" id="trinta"><label for="trinta">Mais de 20 a
t&eacute; 30 anos</p>
</div>
<div>
<p><input type="radio" name="idade" id="quarenta"><label for="quarenta">Mais de
30 at&eacute; 40 anos</p>
</div>
<div>
<p><input type="radio" name="idade" id="cinquenta"><label for="cinquenta">Mais d
e 40 at&eacute; 50 anos</p>
</div>
<div>
<p><input type="radio" name="idade" id="sessenta"><label for="sessenta">Mais de
50 at&eacute; 60 anos</p>
</div>
<div>
<p><input type="radio" name="idade" id="sessenta"><label for="sessenta">Mais de
60 anos</p>
</div>
</fieldset>
<fieldset id="es">

<legend>Esportes que pratica</legend>


<ul>
<li><input type="checkbox"
<li><input type="checkbox"
li>
<li><input type="checkbox"
<li><input type="checkbox"
>
<li><input type="checkbox"
<li><input type="checkbox"
Piscina</li>
<li><input type="checkbox"
Mar Aberto</li>
</ul>

id="fca" /><label for="fca">Futebol de Campo</li>


id="fca" /><label for="fca">Futebol de Sal&atilde;o</
id="fca" /><label for="fca">Futebol Society</li>
id="fca" /><label for="fca">V&ocirc;lei de Quadra</li
id="fca" /><label for="fca">V&ocirc;lei de Praia</li>
id="fca" /><label for="fca">Nata&ccedil;&atilde;o em
id="fca" /><label for="fca">Nata&ccedil;&atilde;o em

</fieldset>
</fieldset>
<fieldset id="com">
<legend>Coment&aacute;rio</legend>
<label for="mensagem">Mensagem:</label>
<textarea id="mensagem" rows="5" cols="25"></textarea>
</fieldset>
<p><input type="submit" value="Enviar" id="enviar" /><input type="reset" value="
Limpar" id="limpar" /></p>
</form>
</body>
</html>
<style>
form
{
font: 0.7em Verdana, Arial, sans-serif;
width: 50em;
background: #F1FAF1;
border: 1px solid #009900;
padding: 2em 1.5em 2em 75px;
color: #009900;
}
fieldset
{
border: 1px solid #99EE99;
padding: 1em;
margin: 1em 0;
}
legend
{
border: 1px solid #99EE99;

}
label
{
display: block;
}
p label, li label
{
display: inline;
}
fieldset#dp1 input, fieldset#dp2 input, select
{
width: 90%;
}
textarea
{
width: 60%;
border: 1px solid #009900;
}
fieldset#dp1, fieldset#dp2
{
width: 44%;
float: left;
}
fieldset#dp2
{
float: right;
}
fieldset#fe
{
clear: both;
}
div
{
width: 49.9%;
float: left;
}
legend
{
border: 1px solid #9C9;
font-weight: bold;
padding: 2px 5px;
background: #FFFFFF;
}
div p
{
margin: 0 0.5em;
}
ul
{

list-style: none;
margin: 0;
padding: 0;
}
input, select
{
border: 1px solid #009900;
background: #FFFFFF;
}
input#enviar, input#limpar
{
background: #FFFFFF;
}
li input, div p input
{
border: none;
}
textarea
{
width: 60%;
background: #FFFFFF;
border: 1px solid #009900;
}
</style>

Você também pode gostar