Escolar Documentos
Profissional Documentos
Cultura Documentos
<head>
<title>Formulá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ão:</label>
<select id="prof">
<option selected="selected">Sua Profissão</option>
<optgroup label="Engenharia">
<option>Civil</option>
<option>De Minas</option>
<option>Metalúrgica</option>
<option>Naval</option>
<option>Mecânica</option>
<option>Elétrica</option>
<option>Química</option>
<option>Têxtil</option>
<option>De Produção</option>
<option>De Materiais</option>
<option>De Agrimensura</option>
<option>Cartográfica</option>
<option>De Controle e Automação</option>
</optgroup>
<optgroup label="Ciências Exatas e da Terra">
<option>Astronomia</option>
<option>Ciência da Computação</option>
<option>Geofísica</option>
<option>Geologia</option>
<option>Estatística</option>
<option>Ciências Aeronáuticas</option>
<option>Física</option>
<option>Química</option>
<option>Matemática</option>
<option>Sistemas de Informação</option>
</optgroup>
<optgroup label="Ciências Sociais Aplicadas">
<option>Administraçã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çã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ária</legend>
<div>
<p><input type="radio" name="idade" id="vinte"><label for="vinte">Até 20
anos</p>
</div>
<div>
<p><input type="radio" name="idade" id="trinta"><label for="trinta">Mais de 20 a
té 30 anos</p>
</div>
<div>
<p><input type="radio" name="idade" id="quarenta"><label for="quarenta">Mais de
30 até 40 anos</p>
</div>
<div>
<p><input type="radio" name="idade" id="cinquenta"><label for="cinquenta">Mais d
e 40 até 50 anos</p>
</div>
<div>
<p><input type="radio" name="idade" id="sessenta"><label for="sessenta">Mais de
50 até 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">
</fieldset>
</fieldset>
<fieldset id="com">
<legend>Comentá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>