Embed Size (px)
DESCRIPTION
Criando formulário em HTML e formatando usando folha de estilo (CSS)
Citation preview
Formulários HTML
Formulários HTML
1. <form id="form1" name="form1" method="post" action="">
2. </form>
2
Pro
fº S
idn
ey S
An
dra
de
Formulários HTML
1. <form id="form1" name="form1" method="post" action="">
2. <fieldset>
3. <legend>Contato</legend>
4. </fieldset>
5. </form>
3
Pro
fº S
idn
ey S
An
dra
de
Formulários HTML
1. <form id="form1" name="form1" method="post" action="">
2. <fieldset>
3. <legend>Contato</legend>
4. <p>
5. <label for="nome">Nome:</label>
6. <input type="text" name="nome" id="nome" />
7. </p>
8. </fieldset>
9. </form>
4
Pro
fº S
idn
ey S
An
dra
de
Formulários HTML
1. <form id="form1" name="form1" method="post" action="">
2. <fieldset>
3. <legend>Contato</legend>
4. <p>
5. <label for="nome">Nome:</label>
6. <input type="text" name="nome" id="nome" />
7. </p>
8. <p>
9. <label for="email">Email:</label>
10. <input type="text" name="email" id="email" />
11. </p>
12. </fieldset>
13. </form>
5
Pro
fº S
idn
ey S
An
dra
de
Formulários HTML
1. <form id="form1" name="form1" method="post" action="">
2. <fieldset>
3. <legend>Contato</legend>
4. .
5. .
6. .
7. <p>
8. <label for="senha">Senha:</label>
9. <input type="password" name="senha" id="senha" />
10. </p>
11. </fieldset>
12. </form> 6
Pro
fº S
idn
ey S
An
dra
de
Formulários HTML
1. <form id="form1" name="form1" method="post" action=""> 2. <fieldset> 3. <legend>Contato</legend> 4. . 5. . 6. . 7. <p> 8. <label> 9. <input type="radio" name="Sexo" value="Masculino" id="Sexo" /> 10. Masculino</label> 11. <br /> 12. <label> 13. <input type="radio" name="Sexo" value="Feminino" id="Sexo" /> 14. Feminino</label> 15. </p> 16. </fieldset> 17. </form> 7
Pro
fº S
idn
ey S
An
dra
de
Formulários HTML 1. <form id="form1" name="form1" method="post" action=""> 2. <fieldset> 3. <legend>Contato</legend> 4. . 5. . 6. . 7. <p><label>Esporte preferido</label> 8. <br /> 9. <input type="checkbox" name="futebol" id="futebol" /> 10. <label for="futebol">Futebol</label> 11. <br /> 12. <input type="checkbox" name="natacao" id="natacao" /> 13. <label for="natacao">Natação</label> 14. <br /> 15. <input type="checkbox" name="volei" id="volei" /> 16. <label for="volei">Volei</label> 17. <br /> 18. <input type="checkbox" name="artes_marciais" id="artes_marciais" /> 19. <label for="artes_marciais">Artes Marciais</label> 20. </p> 21. <fieldset> 22. </form>
8
Pro
fº S
idn
ey S
An
dra
de
Formulários HTML 1. <form id="form1" name="form1"
method="post" action="">
2. <fieldset>
3. <legend>Contato</legend>
4. .
5. .
6. .
7. <p>
8. <select name="uf" id="uf">
9. <option value="" selected>UF</option>
10. <option value="1">AC</option>
11. <option value="2">AL</option>
12. <option value="3">AM</option>
13. <option value="4">AP</option>
14. <option value="5">BA</option>
15. <option value="6">CE</option>
16. <option value="7">DF</option>
17. <option value="8">ES</option>
18. <option value="9">GO</option>
19. <option value="10">MA</option>
20. <option value="11">MG</option>
21. <option value="12">MS</option>
22. <option value="13">MT</option>
23. <option value="14">PA</option>
24. <option value="15">PB</option>
25. <option value="16">PE</option>
26. <option value="17">PI</option>
27. <option value="18">PR</option>
28. <option value="19">RJ</option>
29. <option value="20">RN</option>
30. <option value="21">RO</option>
31. <option value="22">RR</option>
32. <option value="23">RS</option>
33. <option value="24">SC</option>
34. <option value="25">SE</option>
35. <option value="26">SP</option>
36. <option value="27">TO</option>
37. </select>
38. </p><fieldset>
39. </form>
9
Pro
fº S
idn
ey S
An
dra
de
Formulários HTML
1. <form id="form1" name="form1" method="post" action="">
2. <fieldset>
3. <legend>Contato</legend>
4. .
5. .
6. .
7. <p>
8. <label for="mensagem">Mensagem</label>
9. <textarea name="mensagem" id="mensagem" cols="45" rows="5"></textarea>
10. </p>
11. <fieldset>
12. </form> 10
Pro
fº S
idn
ey S
An
dra
de
Formulários HTML
1. <form id="form1" name="form1" method="post" action="">
2. <fieldset>
3. <legend>Contato</legend>
4. .
5. .
6. .
7. <p>
8. <input type="submit" name="enviar" id="enviar" value="Enviar" />
9. <input type="reset" name="limpar" id="limpar" value="Limpar" />
10. </p>
11. <fieldset>
12. </form> 11
Pro
fº S
idn
ey S
An
dra
de
CSS
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>Formulário de contato</title>
6. <style type="text/css">
7. </style>
8. </head> 12
Pro
fº S
idn
ey S
An
dra
de
CSS
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml"> 3. <head> 4. <meta http-equiv="Content-Type" content="text/html;
charset=utf-8" /> 5. <title>Formulário de contato</title> 6. <style type="text/css"> 7. fieldset { 8. font-family: Verdana, Geneva, sans-serif; 9. font-size: 10px; 10. } 11. </style> 12. </head> 13
Pro
fº S
idn
ey S
An
dra
de
CSS
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml"> 3. <head> 4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5. <title>Formulário de contato</title> 6. <style type="text/css"> 7. fieldset { 8. font-family: Verdana, Geneva, sans-serif; 9. font-size: 10px; 10. } 11. input { 12. font-family: Verdana, Geneva, sans-serif; 13. font-size: 9px; 14. color: #00F; 15. } 16. </style> 17. </head>
14
Pro
fº S
idn
ey S
An
dra
de
CSS 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2. <html xmlns="http://www.w3.org/1999/xhtml"> 3. <head> 4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5. <title>Formulário de contato</title> 6. <style type="text/css"> 7. fieldset { 8. font-family: Verdana, Geneva, sans-serif; 9. font-size: 10px; 10. } 11. input { 12. font-family: Verdana, Geneva, sans-serif; 13. font-size: 9px; 14. color: #00F; 15. background-color: #CCC; 16. } 17. </style> 18. </head> 15
Pro
fº S
idn
ey S
An
dra
de
CSS 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2. <html xmlns="http://www.w3.org/1999/xhtml"> 3. <head> 4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5. <title>Formulário de contato</title> 6. <style type="text/css"> 7. . 8. . 9. . 10. input { 11. font-family: Verdana, Geneva, sans-serif; 12. font-size: 9px; 13. color: #00F; 14. background-color: #CCC; 15. height: 20px; 16. width: 300px; 17. } 18. </style> 19. </head>
16
Pro
fº S
idn
ey S
An
dra
de
CSS
1. #Sexo {
2. width: auto;
3. height: auto;
4. background-color: #FFF;
5. }
17
Pro
fº S
idn
ey S
An
dra
de
CSS
1. <style type="text/css">
2. .
3. .
4. .
5. #futebol {
6. height: auto;
7. width: auto;
8. background-color: #FFF;
9. }
10. </style>
18
Pro
fº S
idn
ey S
An
dra
de
CSS
1. <style type="text/css">
2. .
3. .
4. .
5. #futebol, #natacao, #volei, #artes_marciais {
6. height: auto;
7. width: auto;
8. background-color: #FFF;
9. }
10. </style>
19
Pro
fº S
idn
ey S
An
dra
de
CSS
1. <style type="text/css">
2. .
3. .
4. .
5. #enviar, #limpar {
6. font-size: 9px;
7. background-color: #FC9;
8. height: 30px;
9. width: 45px;
10. color: #F60;
11. font-family: Verdana, Geneva, sans-serif;
12. border: 1px solid #F60;
13. }
14. </style> 20
Pro
fº S
idn
ey S
An
dra
de
CSS
1. <style type="text/css"> 2. . 3. . 4. . 5. #enviar, #limpar { 6. font-size: 9px; 7. background-color: #FC9; 8. height: 30px; 9. width: 45px; 10. color: #F60; 11. font-family: Verdana, Geneva, sans-serif; 12. border: 1px solid #F60; 13. cursor: pointer; 14. } 15. </style> 21
Pro
fº S
idn
ey S
An
dra
de
Borda no input
1. input {
2. font-family: Verdana, Geneva, sans-serif;
3. font-size: 9px;
4. color: #00F;
5. background-color: #F0F0F0;
6. height: 20px;
7. width: 300px;
8. border: 1px solid #999;
9. }
22
Pro
fº S
idn
ey S
An
dra
de
Retirando borda...
1. #Sexo {
2. width: auto;
3. height: auto;
4. background-color: #FFF;
5. border: none;
6. }
23
Pro
fº S
idn
ey S
An
dra
de
Retirando borda...
1. #futebol, #natacao, #volei, #artes_marciais {
2. height: auto;
3. width: auto;
4. background-color: #FFF;
5. border: none;
6. }
24
Pro
fº S
idn
ey S
An
dra
de
CSS 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2. <html xmlns="http://www.w3.org/1999/xhtml"> 3. <head> 4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5. <title>Formulário de contato</title> 6. <style type="text/css"> 7. . 8. . 9. . 10. select { 11. font-family: Verdana, Geneva, sans-serif; 12. font-size: 10px; 13. color: #666; 14. background-color: #CCC; 15. width: 50px; 16. } 17. </style> 18. </head> 25
Pro
fº S
idn
ey S
An
dra
de
CSS 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2. <html xmlns="http://www.w3.org/1999/xhtml"> 3. <head> 4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5. <title>Formulário de contato</title> 6. <style type="text/css"> 7. . 8. . 9. . 10. textarea { 11. font-family: Verdana, Geneva, sans-serif; 12. font-style: italic; 13. color: #000; 14. background-color: #EBEBEB; 15. height: 200px; 16. width: 150px; 17. border: 1px solid #999; 18. } 19. </style> 20. </head>
26
Pro
fº S
idn
ey S
An
dra
de
CSS
1. fieldset {
2. font-family: Verdana, Geneva, sans-serif;
3. font-size: 10px;
4. width: 500px;
5. background-color: #CCF;
6. }
27
Pro
fº S
idn
ey S
An
dra
de
Retirando borda...
1. #Sexo {
2. width: auto;
3. height: auto;
4. background-color: # CCF;
5. border: none;
6. }
28
Pro
fº S
idn
ey S
An
dra
de
![Desenvolvimento e Design de Websitesdiatinf.ifrn.edu.br/prof/lib/exe/...design_tads:9-formularios_html5.pdf · Formulários –Recursos HTML 5 [9] 3 │Faça um formulário de pesquisa](https://img.document.onl/doc/110x75/6048e06588fbe118e10667fa/desenvolvimento-e-design-de-9-formularioshtml5pdf-formulrios-arecursos-html.jpg)