Técnicas e 
processos de 
produção 
Profº Ritielle Souza
FORMULÁRIOS 
Formulários são utilizados para carregar informações cedidas 
pelo usuário. 
Ex: enviar uma mensagem através ...
FORMULÁRIOS 
Campos de Texto 
Os campos de texto são usados quando você quer que o usuário 
digite letras, números, etc. e...
FORMULÁRIOS 
Campos de Texto 
Os campos de texto são usados quando você quer que o usuário 
digite letras, números, etc. e...
FORMULÁRIOS 
Botões Radiais 
Botões Radiais são usados quando você quer que o usuário 
selecione uma entre uma quantidade ...
FORMULÁRIOS 
Caixas de Seleção 
As Caixas de Seleção são usadas quando você quer que o 
usuário selecione uma ou mais opçõ...
FORMULÁRIOS 
Caixa dropdown 
Caixas de seleção com diversas opções listadas. 
<form> 
<select name="cars"> 
<option value=...
FORMULÁRIOS 
Text multi-linhas 
Uma caixa de texto que suporta maior quantidade de caracteres. 
<form> 
<textarea name=“te...
FORMULÁRIOS 
Botão de envio 
Botão para disparar o envio do formulário 
<form> 
<input type="submit" value="Enviar"> 
</fo...
FORMULÁRIOS 
OUTROS 
Outros modelos de INPUT: 
type=“hidden” - Invisível (Não aparece na tela) 
type=“password” - Para sen...
FORMULÁRIOS 
<form > 
<Input type=“text” name=“email”> 
<input type=“password” name=“senha”> 
<select name=“dia-niver”> 
<...
FORMULÁRIOS 
- vamos testar - 
body{ 
background-color: LightSkyBlue; 
margin-left:100px; 
} 
legend{ 
font-family:verdana...
FORMULÁRIOS 
h2{ 
font-family:verdana; 
color:black; 
font-size:14px; 
} 
p.esq{ 
font-size:14px; 
font-family:verdana; 
m...
FORMULÁRIOS 
p.dir{ 
font-size:14px; 
font-family:verdana; 
margin: 0px 0px 0px 0px; 
width:300px; 
position:relative; 
to...
FORMULÁRIOS 
input.botao{ 
margin-left:100px; 
font-weight:bold; 
}
FORMULÁRIOS 
<html> 
<head> 
<title>Cadastro de usuários</title> 
<link rel="stylesheet" href="formulario.css" type="text/...
FORMULÁRIOS 
<h1>Cadastro de usuários</h1> 
<p class="tit"> Dados pessoais:</p> 
<p class="esq"> Nome:&nbsp;&nbsp;&nbsp;<i...
FORMULÁRIOS 
<p class="dir">CEP:&nbsp;&nbsp;<input type="text" name="cep" 
size=20 maxlenght="30" /></p> 
<h2> Dados para ...
Próximos SlideShares
Carregando em…5
×

Técnicas e processos - HTML / CSS - aula 8

278 visualizações

Publicada em

Aula para produção de html e css no curso de Design Anhanguera Unidade Brigadeiro

Publicada em: Design
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
278
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
4
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Técnicas e processos - HTML / CSS - aula 8

  1. 1. Técnicas e processos de produção Profº Ritielle Souza
  2. 2. FORMULÁRIOS Formulários são utilizados para carregar informações cedidas pelo usuário. Ex: enviar uma mensagem através do site, efetuar um cadastro e etc Formulários sempre estarão dentro da TAG <FORM></FORM> ENTRADA DE DADOS A entrada de dados dos usuários na maioria das vezes é feito através da TAG <INPUT>
  3. 3. FORMULÁRIOS Campos de Texto Os campos de texto são usados quando você quer que o usuário digite letras, números, etc. em um formulário. <form> Primeiro nome: <input type="text" name="firstname"> <br /> Último nome: <input type="text" name="lastname"> </form>
  4. 4. FORMULÁRIOS Campos de Texto Os campos de texto são usados quando você quer que o usuário digite letras, números, etc. em um formulário. <form> Primeiro nome: <input type="text" name="firstname"> <br /> Último nome: <input type="text" name="lastname"> </form>
  5. 5. FORMULÁRIOS Botões Radiais Botões Radiais são usados quando você quer que o usuário selecione uma entre uma quantidade limitada de escolhas. <form> <input type="radio" name="sex" value="male"> Masculino <br> <input type="radio" name="sex" value="female"> Feminino </form>
  6. 6. FORMULÁRIOS Caixas de Seleção As Caixas de Seleção são usadas quando você quer que o usuário selecione uma ou mais opções de uma quantidade limitada de escolhas. <form> <input type="checkbox" name="bike"> Eu tenho uma bicicleta <br> <input type="checkbox" name="car"> Eu tenho um carro </form>
  7. 7. FORMULÁRIOS Caixa dropdown Caixas de seleção com diversas opções listadas. <form> <select name="cars"> <option value="volvo">Volvo <option value="saab">Saab <option value="fiat">Fiat <option value="audi">Audi </select> </form>
  8. 8. FORMULÁRIOS Text multi-linhas Uma caixa de texto que suporta maior quantidade de caracteres. <form> <textarea name=“texto”>Digite aqui</texarea> </form> Digite aqui
  9. 9. FORMULÁRIOS Botão de envio Botão para disparar o envio do formulário <form> <input type="submit" value="Enviar"> </form>
  10. 10. FORMULÁRIOS OUTROS Outros modelos de INPUT: type=“hidden” - Invisível (Não aparece na tela) type=“password” - Para senhas [ ****** ] type=“reset” - Limpa os dados do formulário type=“submit” - Envia o formulário
  11. 11. FORMULÁRIOS <form > <Input type=“text” name=“email”> <input type=“password” name=“senha”> <select name=“dia-niver”> <option value=“Jan”> Janeiro</option> <option value=“Fev”> Fevereiro</option> </select> <input type=“radio” value=“Blue”>Blue <input type=“checkbox” name=“interesse” value=“news”> News <input type=“checkbox” name=“interesse” value=“sports”> Sports </form>
  12. 12. FORMULÁRIOS - vamos testar - body{ background-color: LightSkyBlue; margin-left:100px; } legend{ font-family:verdana; font-size:20px; background-color:navy; color:white; } h1{ font-family:verdana; color:white; font-size:20px; background-color:navy; }
  13. 13. FORMULÁRIOS h2{ font-family:verdana; color:black; font-size:14px; } p.esq{ font-size:14px; font-family:verdana; margin: 0px 0px 0px 0px; width:400px; position:relative; top:40px; left:10px; }
  14. 14. FORMULÁRIOS p.dir{ font-size:14px; font-family:verdana; margin: 0px 0px 0px 0px; width:300px; position:relative; top:14px; left:400px; } p.tit{ text-align:left; font-family:verdana; font-size:18px; font-weight:bold; }
  15. 15. FORMULÁRIOS input.botao{ margin-left:100px; font-weight:bold; }
  16. 16. FORMULÁRIOS <html> <head> <title>Cadastro de usuários</title> <link rel="stylesheet" href="formulario.css" type="text/css" /> </head> <body> <form action=“mailto:someone@somewhere.com” method="post" enctype="text/plain"> <fieldset>
  17. 17. FORMULÁRIOS <h1>Cadastro de usuários</h1> <p class="tit"> Dados pessoais:</p> <p class="esq"> Nome:&nbsp;&nbsp;&nbsp;<input type="text" name="nome" size="30" maxlenght="30" /></p> <p class="dir">E-mail:&nbsp;<input type="text" name="mail" size="20" maxlenght="30" /></p> <p class="esq">Fone:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="fone" size="30" maxlenght="30" /></p> <p class="dir"> Sexo:<input type="radio" name="sexo" value="feminino" />Feminino<input type="radio" name="sexo" value="masculino" />Masculino</p> <p class="esq">Rua:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="rua" size=30 maxlenght="30" /></p><br /> <p class="esq">Compl:&nbsp;&nbsp;<input type="text" name="compl" size=30 maxlenght="30" /></p> <p class="dir">Núm:&nbsp;<input type="text" name="num" size=20 maxlenght="30" /></p><br />
  18. 18. FORMULÁRIOS <p class="dir">CEP:&nbsp;&nbsp;<input type="text" name="cep" size=20 maxlenght="30" /></p> <h2> Dados para acessar o sistema</h2><br /> <p class="esq">Nome de usuário:&nbsp;<input type="text" name="usuario" size=30 maxlenght="30" /></p> <p class="dir">Senha:&nbsp;<input type="password" name="senha" size=30 maxlenght="30" /></p><br /><br /> <input type="submit" value="Enviar Dados" class="botao" /> <input type="reset" value="Limpar Dados" class="botao" /></p> </fieldset> </form> </body> </html>

×