SlideShare uma empresa Scribd logo
1 de 5
Baixar para ler offline
Universidade da Região da Campanha – Curso Técnico em Informática
Desenvolvimento para Web - Professora Denise A. de Lima / 2010


FORMULÁRIOS – PARTE 2
Relembrando...
Elemento FORM
É um elemento que marca o início e o fim de um formulário, as tags de abertura e
fechamento são obrigatórias.

ACTION                                          METHOD
Identifica o endereço na web, onde está         Este atributo destina-se a definir o
hospedada a aplicação script que irá            método a ser usado no envio dos dados
processar o formulário. Esse atributo é         do formulário. Pode ser GET ou POST.
obrigatório.

Exemplo
<form action=“http://maujor.com/prog/processa-form.php” method=“post”>
Campos do formulário…
</form>



ELEMENTO SELECT
Elemento seleção que se destina a criar         ALGUNS ATRIBUTOS
uma lista de opções. O elemento select é        ESPECÍFICOS
um controle de formulário. As tags de           Name | Size
abertura e fechamento são obrigatórias.


<select name=“frutas”>
<option>morango</option>
<option>banana</option>
<option>melão</option>
<option>abacaxi</option>
<option>amora</option>
</select>




O atributo name coloca um nome no formulário.
ATRIBUTO SIZE
Pode especificar o número de opções que estarão visíveis para o usuário.


                                                   <select name=“dia_semana” size=“3”>
<select name=“dia_semana” size=“5”>                <option>segunda</option>
<option>segunda</option>                           <option>terça </option>
<option>terça </option>                            <option>quarta </option>
<option>quarta </option>                           <option>quinta </option>
<option>quinta </option>                           <option>sexta </option>
<option>sexta </option>                            </select>
</select>




                                                   Neste outro possui menos opções visíveis e
Neste exemplo possui o mesmo                       acrescenta barra de rolagem.
número de opções.




ELEMENTO TEXTAREA
Elemento para área de texto. É um
campo que permite criar uma área                   Atributos
multilinhas para entrada de texto pelo             Name | Rows | Cols
usuário. As tags de abertura e
fechamento são obrigatórias.


ATRIBUTO NAME                                      <html>
Atribui um nome a área de texto.                   <head>
                                                   <title>Aula - Formulário</title>
                                                   </head>
ATRIBUTO ROWS                                      <body>
Define o número de linhas da área.                 <form method="post"
                                                   action="mailto:denisealima@gmail.com">
                                                   <p>Comentários:
ATRIBUTO COLS                                      <br><textarea name="obs" rows="5"
Define o número de colunas.                        cols="50"> </textarea></p>
                                                   </form>
                                                   </body>
                                                   </html>
Para deixar o formulário mais organizado:

FIELSET
Elemento conjunto de campos – destina-se a criar um container para um conjunto de
campos de um formulário. Por exemplo agrupar todos os campos que tenham por
objetivo colher dados pessoais do usuário. Tags de abertura e fechamento são
obrigatórias.

LEGEND
Se destina a criar uma legenda para o elemento Fielset de um formulário. As tags de
abertura e fechamento são obrigatórias.

LABEL
Elemento rótulo. Destina-se a criar uma etiqueta/rótulo para um campo de formulário
que não tenha um rótulo implícito. As tags de abertura e fechamento são obrigatórias.

Exemplo:

<form action=“mailto:cadastro@urcamp.tche.br” method=“post”>
<fieldset>
<legend> Dados pessoais</legend>
<label for=“nome”>Nome:</label><br>
<input type= "text" name="nome" size=”80” value="nome completo"><br>
<br>
<label for=“end”>Endereço:</label><br>
<input type="text" name="ender" size="50" >
<br>
<br>
<label for=“cep”>Cep:</label><br>
<input type="text" name="cep"><br>
<br>
</fielset>
</form>
Resultado:




Exemplo com select, textarea, fielset, legend e label:

<html>
<head>
<Title>Aula - Formulário</Title>
</head>
<body>
<form action=“mailto:cadastro@urcamp.tche.br” method=“post”>
<fieldset>
<legend> Dados pessoais</legend>
<label for=“nome”>Nome:</label><br>
<input type="text" name="nome" size=”80” value="nome completo"><br>
<br>
<label for=“end”>Endereço:</label><br>
<input type="text" name="ender" size="50">
<br>
<br>
<label for=“cep”>Cep:</label><br>
<input type="text" name="cep"><br>
<br>
<label for=“DDD”>DDD:</label><input type="text" name="DDD" size="3" maxlength="3"
id="ddd"><label for=“fone”>Fone:</label><input type="text" name="fone" size="6"
maxlength="6">
<br><br>
<label for=“DDD”>DDD:</label><input type="text" name="DDD" size="3" maxlength="3"
id="DDD"><label for=“fone”>Cel:</label><input type="text" name="cel" size="6"
maxlength="6">
<br><br>
<label for=“email”>E-mail:</label><br><input type="text" name="email" size="40"><br>
</fieldset>
<fieldset>
<legend>Cursos</legend>
<label for=“curso”>Escolha o curso:</label><br>
<select name=“curso”>
<option>HTML</option>
<option>CSS</option>
<option>PHP</option>
<option>DELPHI</option>
<option>JAVA</option>
</select>
</fieldset>
<br>
<input name="apaga" type="reset" value="Limpar Campos">
<input type="submit" value="Enviar Dados">
</form>
</body>
</html>


Resultado




Bibliografia
SILVA, Maurício Samy. Criando Sites com HTML. São Paulo: Novatec Editora,
2008.

Mais conteúdo relacionado

Destaque

Photojournalism Slideshow
Photojournalism SlideshowPhotojournalism Slideshow
Photojournalism Slideshow
jschnorr
 
Ingersoll Rand Overview Aug 2009
Ingersoll Rand Overview Aug 2009Ingersoll Rand Overview Aug 2009
Ingersoll Rand Overview Aug 2009
sgasche
 
Final Evaluation =[
Final Evaluation =[Final Evaluation =[
Final Evaluation =[
stevenpwells
 
Marketingpresentation
MarketingpresentationMarketingpresentation
Marketingpresentation
Sara Brown
 
さよならmobylet~携帯デバイスはスマートフォンの時代へ~
さよならmobylet~携帯デバイスはスマートフォンの時代へ~さよならmobylet~携帯デバイスはスマートフォンの時代へ~
さよならmobylet~携帯デバイスはスマートフォンの時代へ~
Shin Takeuchi
 

Destaque (20)

Photojournalism Slideshow
Photojournalism SlideshowPhotojournalism Slideshow
Photojournalism Slideshow
 
Manual Segmentation and semantic-based hierarchical tagginf od 3d models
Manual Segmentation and semantic-based hierarchical tagginf od 3d modelsManual Segmentation and semantic-based hierarchical tagginf od 3d models
Manual Segmentation and semantic-based hierarchical tagginf od 3d models
 
Ingersoll Rand Overview Aug 2009
Ingersoll Rand Overview Aug 2009Ingersoll Rand Overview Aug 2009
Ingersoll Rand Overview Aug 2009
 
Social Media Seven North Web
Social Media Seven North WebSocial Media Seven North Web
Social Media Seven North Web
 
Presentatie webinar e facturatie 22 maart 2011
Presentatie webinar e facturatie 22 maart 2011Presentatie webinar e facturatie 22 maart 2011
Presentatie webinar e facturatie 22 maart 2011
 
Final Evaluation =[
Final Evaluation =[Final Evaluation =[
Final Evaluation =[
 
E 1-new kingdom - class one - The Highlights of the New Kingdom 1550 BC to 10...
E 1-new kingdom - class one - The Highlights of the New Kingdom 1550 BC to 10...E 1-new kingdom - class one - The Highlights of the New Kingdom 1550 BC to 10...
E 1-new kingdom - class one - The Highlights of the New Kingdom 1550 BC to 10...
 
Playgrounds Interface Concept
Playgrounds Interface ConceptPlaygrounds Interface Concept
Playgrounds Interface Concept
 
Marketingpresentation
MarketingpresentationMarketingpresentation
Marketingpresentation
 
Practically Realising Prosperity - John Savage
Practically Realising Prosperity - John SavagePractically Realising Prosperity - John Savage
Practically Realising Prosperity - John Savage
 
A2 Pitch
A2 PitchA2 Pitch
A2 Pitch
 
MA Oil Tank Upgrade Law
MA Oil Tank Upgrade LawMA Oil Tank Upgrade Law
MA Oil Tank Upgrade Law
 
Chap 5 ppt chemistry 2016
Chap 5 ppt chemistry 2016Chap 5 ppt chemistry 2016
Chap 5 ppt chemistry 2016
 
Synergy Lms Training
Synergy Lms TrainingSynergy Lms Training
Synergy Lms Training
 
Russian History Class 3 Fall - Spring 09 updated
Russian History Class 3 Fall - Spring 09 updatedRussian History Class 3 Fall - Spring 09 updated
Russian History Class 3 Fall - Spring 09 updated
 
2.0 @ The #CSULib
2.0 @ The #CSULib2.0 @ The #CSULib
2.0 @ The #CSULib
 
さよならmobylet~携帯デバイスはスマートフォンの時代へ~
さよならmobylet~携帯デバイスはスマートフォンの時代へ~さよならmobylet~携帯デバイスはスマートフォンの時代へ~
さよならmobylet~携帯デバイスはスマートフォンの時代へ~
 
Opleiding seu uitzendmedewerker
Opleiding seu uitzendmedewerkerOpleiding seu uitzendmedewerker
Opleiding seu uitzendmedewerker
 
SWO Annual Report 2010-11
SWO Annual Report 2010-11SWO Annual Report 2010-11
SWO Annual Report 2010-11
 
The Internet and Mobility - Paradigm Shift Sept09
The Internet and Mobility - Paradigm Shift   Sept09The Internet and Mobility - Paradigm Shift   Sept09
The Internet and Mobility - Paradigm Shift Sept09
 

Mais de Denise Lima

Orientação para o projeto de pesquisa
Orientação para o projeto de pesquisaOrientação para o projeto de pesquisa
Orientação para o projeto de pesquisa
Denise Lima
 
Alternativas ao estilo internacional
Alternativas ao estilo internacionalAlternativas ao estilo internacional
Alternativas ao estilo internacional
Denise Lima
 
CSS parte II pdf...
CSS parte II pdf...CSS parte II pdf...
CSS parte II pdf...
Denise Lima
 

Mais de Denise Lima (20)

Alfabetismo visual elementos_sintaticos2
Alfabetismo visual elementos_sintaticos2Alfabetismo visual elementos_sintaticos2
Alfabetismo visual elementos_sintaticos2
 
Movimentos artísticos início século XX
Movimentos artísticos início século XXMovimentos artísticos início século XX
Movimentos artísticos início século XX
 
Pós modernismo
Pós modernismoPós modernismo
Pós modernismo
 
Pop art
Pop artPop art
Pop art
 
Pop art
Pop artPop art
Pop art
 
Bauhaus & Estilo Internacional
Bauhaus & Estilo InternacionalBauhaus & Estilo Internacional
Bauhaus & Estilo Internacional
 
Artigo cientifico
Artigo cientificoArtigo cientifico
Artigo cientifico
 
Orientação para o projeto de pesquisa
Orientação para o projeto de pesquisaOrientação para o projeto de pesquisa
Orientação para o projeto de pesquisa
 
Tecnicas para composição.
Tecnicas para composição.Tecnicas para composição.
Tecnicas para composição.
 
Classificacao tipografia
Classificacao tipografiaClassificacao tipografia
Classificacao tipografia
 
Dicas assombrosas
Dicas assombrosasDicas assombrosas
Dicas assombrosas
 
Raizes design
Raizes designRaizes design
Raizes design
 
Alternativas ao estilo internacional
Alternativas ao estilo internacionalAlternativas ao estilo internacional
Alternativas ao estilo internacional
 
Design antes do design
Design antes do designDesign antes do design
Design antes do design
 
Dreamweaver - configurando o servidor remoto
Dreamweaver - configurando o servidor remotoDreamweaver - configurando o servidor remoto
Dreamweaver - configurando o servidor remoto
 
Trabalho layout elastico
Trabalho layout elasticoTrabalho layout elastico
Trabalho layout elastico
 
Css parte iii_b
Css parte iii_bCss parte iii_b
Css parte iii_b
 
Css parte iii_a
Css parte iii_aCss parte iii_a
Css parte iii_a
 
CSS parte II pdf...
CSS parte II pdf...CSS parte II pdf...
CSS parte II pdf...
 
Css parte II
Css parte IICss parte II
Css parte II
 

Aula formularios 2

  • 1. Universidade da Região da Campanha – Curso Técnico em Informática Desenvolvimento para Web - Professora Denise A. de Lima / 2010 FORMULÁRIOS – PARTE 2 Relembrando... Elemento FORM É um elemento que marca o início e o fim de um formulário, as tags de abertura e fechamento são obrigatórias. ACTION METHOD Identifica o endereço na web, onde está Este atributo destina-se a definir o hospedada a aplicação script que irá método a ser usado no envio dos dados processar o formulário. Esse atributo é do formulário. Pode ser GET ou POST. obrigatório. Exemplo <form action=“http://maujor.com/prog/processa-form.php” method=“post”> Campos do formulário… </form> ELEMENTO SELECT Elemento seleção que se destina a criar ALGUNS ATRIBUTOS uma lista de opções. O elemento select é ESPECÍFICOS um controle de formulário. As tags de Name | Size abertura e fechamento são obrigatórias. <select name=“frutas”> <option>morango</option> <option>banana</option> <option>melão</option> <option>abacaxi</option> <option>amora</option> </select> O atributo name coloca um nome no formulário.
  • 2. ATRIBUTO SIZE Pode especificar o número de opções que estarão visíveis para o usuário. <select name=“dia_semana” size=“3”> <select name=“dia_semana” size=“5”> <option>segunda</option> <option>segunda</option> <option>terça </option> <option>terça </option> <option>quarta </option> <option>quarta </option> <option>quinta </option> <option>quinta </option> <option>sexta </option> <option>sexta </option> </select> </select> Neste outro possui menos opções visíveis e Neste exemplo possui o mesmo acrescenta barra de rolagem. número de opções. ELEMENTO TEXTAREA Elemento para área de texto. É um campo que permite criar uma área Atributos multilinhas para entrada de texto pelo Name | Rows | Cols usuário. As tags de abertura e fechamento são obrigatórias. ATRIBUTO NAME <html> Atribui um nome a área de texto. <head> <title>Aula - Formulário</title> </head> ATRIBUTO ROWS <body> Define o número de linhas da área. <form method="post" action="mailto:denisealima@gmail.com"> <p>Comentários: ATRIBUTO COLS <br><textarea name="obs" rows="5" Define o número de colunas. cols="50"> </textarea></p> </form> </body> </html>
  • 3. Para deixar o formulário mais organizado: FIELSET Elemento conjunto de campos – destina-se a criar um container para um conjunto de campos de um formulário. Por exemplo agrupar todos os campos que tenham por objetivo colher dados pessoais do usuário. Tags de abertura e fechamento são obrigatórias. LEGEND Se destina a criar uma legenda para o elemento Fielset de um formulário. As tags de abertura e fechamento são obrigatórias. LABEL Elemento rótulo. Destina-se a criar uma etiqueta/rótulo para um campo de formulário que não tenha um rótulo implícito. As tags de abertura e fechamento são obrigatórias. Exemplo: <form action=“mailto:cadastro@urcamp.tche.br” method=“post”> <fieldset> <legend> Dados pessoais</legend> <label for=“nome”>Nome:</label><br> <input type= "text" name="nome" size=”80” value="nome completo"><br> <br> <label for=“end”>Endereço:</label><br> <input type="text" name="ender" size="50" > <br> <br> <label for=“cep”>Cep:</label><br> <input type="text" name="cep"><br> <br> </fielset> </form>
  • 4. Resultado: Exemplo com select, textarea, fielset, legend e label: <html> <head> <Title>Aula - Formulário</Title> </head> <body> <form action=“mailto:cadastro@urcamp.tche.br” method=“post”> <fieldset> <legend> Dados pessoais</legend> <label for=“nome”>Nome:</label><br> <input type="text" name="nome" size=”80” value="nome completo"><br> <br> <label for=“end”>Endereço:</label><br> <input type="text" name="ender" size="50"> <br> <br> <label for=“cep”>Cep:</label><br> <input type="text" name="cep"><br> <br> <label for=“DDD”>DDD:</label><input type="text" name="DDD" size="3" maxlength="3" id="ddd"><label for=“fone”>Fone:</label><input type="text" name="fone" size="6" maxlength="6"> <br><br> <label for=“DDD”>DDD:</label><input type="text" name="DDD" size="3" maxlength="3" id="DDD"><label for=“fone”>Cel:</label><input type="text" name="cel" size="6" maxlength="6"> <br><br> <label for=“email”>E-mail:</label><br><input type="text" name="email" size="40"><br> </fieldset> <fieldset> <legend>Cursos</legend> <label for=“curso”>Escolha o curso:</label><br> <select name=“curso”> <option>HTML</option> <option>CSS</option> <option>PHP</option> <option>DELPHI</option> <option>JAVA</option> </select> </fieldset> <br> <input name="apaga" type="reset" value="Limpar Campos">
  • 5. <input type="submit" value="Enviar Dados"> </form> </body> </html> Resultado Bibliografia SILVA, Maurício Samy. Criando Sites com HTML. São Paulo: Novatec Editora, 2008.