Formularios

  • 1,042 views
Uploaded on

apresentação

apresentação

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,042
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Formulários Desenvolvimento para Web I Denise Aristimunha de Lima | URCAMP | CCECA Técnico em Informática | 2010 1 Para que serve? Manipulação de forma avançada, de um conjunto de dados específicos; Estabelece contato; Podem conter vários tipos de dados; É um recurso indispensável em sites dinâmicos. 2 1
  • 2. 3 4 2
  • 3. Utilizando elementos estéticos através do CSS – Cascading Style Sheets 5 Comandos utilizados <form> </form> Determina início e o fim de um formulário. Parâmetros: Action - Define o endereço de recepção de dados. Method – Define o método de envio de dados que pode ser: Get ; Post. 6 3
  • 4. Sintaxe <form action=“mailto:denise@urcamp.tche.br” method=“post”> . . . </form> Entre o elemento form e seu fechamento /form vão todos os outros elementos que irão compor o formulário. 7 Formatações para entrada de dados: Em especial, colocamos dentro da marcação de <FORM> as formatações para campos de entrada de dados, que são três: <INPUT>, <SELECT> e <TEXTAREA> 8 4
  • 5. <input> (elemento vazio) Atributos name=“nome” define o nome do campo a ser utilizado para guardar um determinado dado; type=“tipo” define o tipo do elemento; que pode ser: text, submit, reset, radio, checkbox, password, file; value=“valor” define o valor básico do elemento. Aquele que é identificado como padrão para o momento; Maxlength=“número” define quantos caracteres o campo pode aceitar; size= “número” define o tamanho do campo a ser exibido. 9 Type= “text” <html> <head> <title>Aula - Formulário</title> </head> <body> <form action=“mailto:denisealima@gmail.com" method="post"> <input type="text" name=“formulário” size=“20” maxlength=“15” value="campo"> </form> </body> </html> 10 5
  • 6. Type=“radio” (permite escolher apenas uma opção em uma lista) <form action=“mailto:atendimento@urcamp.tche.br” method=“post”> <input type=“radio” name=“opção1”>Manhã <br> <input type=“radio” name=“opção2” >Tarde <br> <input type=“radio” name=“opção3” >Noite </form> 11 Com o rádio pode-se escolher só uma opção Type=“checkbox” (Com o checkbox pode-se escolher mais de uma opção) <form action=“mailto:atendimento@urcamp.tche.br” method=“post”> <input type=“checkbox” name=“opção1”>Manhã <input type=“checkbox” name=“opção2”>Tarde <input type=“checkbox” name=“opção3”>Noite </form> 12 6
  • 7. Type=“password” <form action=“mailto:atendimento@urcamp.tche.br” method=“post”> <input type=“password" name=“senha" size="10" maxlength="5"> </form> 13 Type=“submit” <form action="mailto:secretaria@urcamp.tche.br" method=“post”> <p>Comentários: <br><textarea name="obs" value="vazio" rows="5" cols="80"></textarea></p> <input type="submit" value="enviar"> </form> 14 7
  • 8. Select (elemento container - <select> </select>) Name=“nome” – indica um nome. Size=“valor” – define quantas opções aparecerão ex.: size=“5”; <Option> </option> – elemento usado para cada opção no combo. 15 Select/option <form action=“mailto:cadastro@urcamp.tche.br” method=“post” > <select name=“dia_semana”> <option>segunda</option> <option>terça </option> ... </select> </form> 16 8
  • 9. Textarea (elemento container - <textarea> </textarea> Name – define um nome. Rows – define a altura com base no número de linhas; Cols – define tamanho da largura com base em número de colunas. 17 Textarea Permite que o usuário escreva múltiplas linhas de texto <form method=“post” action=“mailto:denisealima@gmail.com"> <p>Comentários: <br><textarea name="observação" rows="5" cols="80"></textarea></p> </form> 18 9
  • 10. Elemento TEXTAREA com os botões de limpar campos e enviar atravé através do elemento INPUT <form action=“mailto:denisealima@gmail.com method=“post” > <p>Comentários: 19 < name="obs" value="vazio" ="obs <br><textarea name="obs" value="vazio" rows="5" cols="80"></textarea> ="80"></textarea rows="5" cols="80"></textarea></p> Exercício 20 10
  • 11. Bibliografia SILVA, Maurício Samy. Criando Sites com HTML. São Paulo: Novatec Editora, 2008. 21 11