SlideShare uma empresa Scribd logo
1 de 20
Baixar para ler offline
Formulários
HTML

Evandro Manara Miletto
inf.poa.ifrs.edu.br/~evandro
Pra que serve e
quando vou usar
 um Formulário
     HTML?
Login




Cadastro
Formulários HTML

• Proporcionam interação com o
  internauta
• Selecionam diferentes tipos de
  entradas do usuário
• Usados para enviar dados ao servidor
• Contém elementos de entrada como
  texto, checkbox, botão-radio, botão
  enviar, menu drop-down, etc...
‘Anatomia’ do formulário

• Construído dentro do container <form>...
  </form>
• 2 atributos princiapis: action (define a URL
  que receberá o formulário) e method (define
  método usado para envio dos dados)
  <form action="URL para onde serão enviado os dados"


    method="método HTTP (GET ou POST)"
    enctype="formato de codificação"
    target="nome da janela que mostrará a resposta" >
            ... corpo do formulário (elementos)...
  </form>
‘Raio X’ do formulário
                                       Texto que aparece                         Nome na variável
                                       na página         Forma de envio               que receberá
        ação / url para onde vai                         (aberto /               como valor o que
                                                         empacotado)             estiver no campo
                                                                                             nome

                   <form action="envia.jsp"            method="post">
     Usado para      <label for="nome">Digite seu nome:</label>
      associar o
   rótulo com o      <input type="text" id="nome" size="20" name="nome"/>
  controle input
(acessibilidade)
                     <input type="submit" value="Enviar Nome" />

                   </form>

                                                                         Valor/texto que
                                                                         aparecerá no
     Renderiza diversos                                                  Botão
       tipos de controle     Usados juntos
           (entradas) do     para relacionar o       Diferentes tipos
              formulário     texto com o             da entrada Input
                             campo                   (texto e botão de
                                                     envio)
Envio de dados

• Os elementos de entrada de dados têm um
  nome e enviam um valor
• Exemplo de formulário simples
  <form action="/lib/envia.php" method="post">
    <label for="nome">Nome:</label>
    <input name="nome" type="text" id="nome" size="25"           />
    <input type="submit" value="ENVIAR Nome"/>
  </form>



                                 POST /lib/envia.php HTTP/1.0
                                 Content-type: text/x-www-form-urlencoded
                                 Content-length: 15

                                 nome=Carminha
Disparo de eventos
• Os elementos <input> com
  atributo type submit, reset e
  button servem para disparar
  eventos
    Envio do formulário (Submit)
    Reinicialização do

   
 formulário (Reset)
    Evento programado por

   
 JavaScript (Button)
• O value do botão define o texto
  que mostrará
• Apenas se o botão contiver um
  atributo

 name, o conteúdo de value será
  enviado ao servidor
Entrada de texto
Elementos <input> com         Com type="password" o
type="text" são usados para   texto digitado é ocultado na
entrada de texto              tela do browser
Campos ocultos

• Consistem de um par nome/valor embutido
  no HTML
• Usados para envio de dados ao servidor
       sobre configuração da aplicação
       comandos, para selecionar comportamentos
        diferentes da aplicação
       parâmetros especiais para controle da aplicação,
        sessão ou dados que pertencem ao contexto da
        aplicação
• Sintaxe

   <input type="hidden" name="nome" value="valor">
Chaves booleanas 1
Há dois tipos: checkboxes e radio buttons
Checkboxes permitem seleção múltipla
Chaves booleanas 2
Radio buttons, permite seleção única (marca um
desmarca o outro)
Upload de Arquivos

O elemento <input
  type="file"> cria

 um campo que permite

 o Upload de arquivos

 para o servidor

Sintaxe do formulário


<form action="envia.php" method="post" enctype="text/multipart-form-data">
        <label> Escolha um arquivo
                 <input type="file" />
        <label>
</form>
Área para entrada de texto

Possibilitam a entrada de texto de múltiplas linhas
tags <textarea> </textarea>
<form action="envia.php">
      <textarea rows="6" cols="40">Texto Inicial</textarea>
</form>
Menus de seleção
Geram requisições similares a checkboxes e radio
buttons
Consistem de um par de elementos
<select> define o nome da coleção
      <option> define o valor que será enviado




                                               <form action="envia.php">
  <form action="envia.php">                        <select name="dia">
      <select name="dias" size="4" multiple>           <option value="seg">Segunda</option>
          <option value="seg">Segunda</option>         <option value="ter">Terca</option>
          <option value="ter">Terca</option>           <option value="qua">Quarta</option>
          <option value="qua">Quarta</option>          <option value="qui">Quinta</option>
          <option value="qui">Quinta</option>          <option value="sex">Sexta</option>
          <option value="sex">Sexta</option>       </select>
      </select>                                </form>
  </form>
Grupos na seleção

Criando grupos no menu de seleção

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>
Formulário e acessibilidade

Favorecida pelo uso dos atributos
  fieldset: agrupa os itens do formulário com
  características comuns
  legend: usado em conjunto com o fieldset
  envolvendo os itens
  label: usado em conjunto com o for e id,
  associa o elemento ao seu rótulo
  optgroup: usado em conjunto com select para
  agrupar itens dentro do select
Formulário e acessibilidade
<form id="form" method="post" action="enviar.php">
      <fieldset><legend>Dados para Contato</legend>
              <label for="nome">Nome:<input type="text" name="nome" id="nome" value="*" /></label>
              <label for="email">E-mail:<input type="text" name="email" id="email" value="*" /></label>
              <label for="assunto">Assunto:<input type="text" name="assunto" id="assunto" value="*" /></label>
              <label for="msg">Mensagem:<br /><textarea rows="6" cols="50" name="msg" id="msg">*</textarea></label>
              <input type="submit" value="Enviar Mensagem" id="enviar" />
      </fieldset>
</form>
Exercícios

Crie um formulário Web HTML acessível que mostre campos e
controles para cadastro de usuário (inserção de dados), contendo:
    Nome, data de nascimento, e-mail, sexo, formação (ensino
    básico, técnico, superior, pós-graduaçao), cargo - select -
    (programador, analista, teste de Sw), Conhecimentos (Java,
    JSP, PHP, HTML, CSS, MySQL), area de texto para resumée,
    campo para envio de arquivo (indicaçao para “Clique para
    enviar seu CV” e botão de Enviar dados.
Referências

http://www.w3schools.com/html/html_forms.asp
http://acessibilidadelegal.com/13-formularios.php

Mais conteúdo relacionado

Mais procurados

Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAndré Constantino da Silva
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfCesar Braz
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a InternetLeonardo Soares
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxMarceloRosenbrock1
 
Prototipos de Baixa e Alta Fidelidade
Prototipos de Baixa e Alta FidelidadePrototipos de Baixa e Alta Fidelidade
Prototipos de Baixa e Alta FidelidadeErico Fileno
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento WebSérgio Souza Costa
 
Acesso a Banco de Dados em Java usando JDBC
Acesso a Banco de Dados em Java usando JDBCAcesso a Banco de Dados em Java usando JDBC
Acesso a Banco de Dados em Java usando JDBCLuiz Ricardo Silva
 
Javascript Orientado a Objeto
Javascript Orientado a ObjetoJavascript Orientado a Objeto
Javascript Orientado a ObjetoFábio Elísio
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSSledsifes
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao cssLéo Dias
 
Type Script Conceitos de ts para projetos front-end React - por ruben marcus
Type Script   Conceitos de ts para projetos front-end React - por ruben marcusType Script   Conceitos de ts para projetos front-end React - por ruben marcus
Type Script Conceitos de ts para projetos front-end React - por ruben marcusRuben Marcus Luz Paschoarelli
 
Programação Web - CSS
Programação Web - CSSProgramação Web - CSS
Programação Web - CSSMauro Pereira
 

Mais procurados (20)

Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
 
Html Básico
Html BásicoHtml Básico
Html Básico
 
Introdução a HTML5
Introdução a HTML5Introdução a HTML5
Introdução a HTML5
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
Prototipos de Baixa e Alta Fidelidade
Prototipos de Baixa e Alta FidelidadePrototipos de Baixa e Alta Fidelidade
Prototipos de Baixa e Alta Fidelidade
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
 
Curso de Node JS Básico
Curso de Node JS BásicoCurso de Node JS Básico
Curso de Node JS Básico
 
Introdução CSS
Introdução CSSIntrodução CSS
Introdução CSS
 
Acesso a Banco de Dados em Java usando JDBC
Acesso a Banco de Dados em Java usando JDBCAcesso a Banco de Dados em Java usando JDBC
Acesso a Banco de Dados em Java usando JDBC
 
Javascript aula 01 - visão geral
Javascript   aula 01 - visão geralJavascript   aula 01 - visão geral
Javascript aula 01 - visão geral
 
Javascript Orientado a Objeto
Javascript Orientado a ObjetoJavascript Orientado a Objeto
Javascript Orientado a Objeto
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao css
 
Type Script Conceitos de ts para projetos front-end React - por ruben marcus
Type Script   Conceitos de ts para projetos front-end React - por ruben marcusType Script   Conceitos de ts para projetos front-end React - por ruben marcus
Type Script Conceitos de ts para projetos front-end React - por ruben marcus
 
Programação Web - CSS
Programação Web - CSSProgramação Web - CSS
Programação Web - CSS
 

Destaque

Destaque (6)

OSM : Formulários
OSM : FormuláriosOSM : Formulários
OSM : Formulários
 
Formularios
FormulariosFormularios
Formularios
 
Formulário - Organização, Sistemas e Métodos
Formulário - Organização, Sistemas e MétodosFormulário - Organização, Sistemas e Métodos
Formulário - Organização, Sistemas e Métodos
 
Metodologia Trabalho Cientifico
Metodologia Trabalho CientificoMetodologia Trabalho Cientifico
Metodologia Trabalho Cientifico
 
ORGANIZAÇÃO, SISTEMAS E MÉTODOS – OSM
ORGANIZAÇÃO, SISTEMAS E MÉTODOS – OSMORGANIZAÇÃO, SISTEMAS E MÉTODOS – OSM
ORGANIZAÇÃO, SISTEMAS E MÉTODOS – OSM
 
Capítulo 5 instrumentos de pesquisa
Capítulo 5   instrumentos de pesquisaCapítulo 5   instrumentos de pesquisa
Capítulo 5 instrumentos de pesquisa
 

Semelhante a Formulário HTML

Programação web ii aulas 08 e 09
Programação web ii   aulas 08 e 09Programação web ii   aulas 08 e 09
Programação web ii aulas 08 e 09Yuri Bispo
 
Aula formularios 1
Aula formularios 1Aula formularios 1
Aula formularios 1Denise Lima
 
4 si introdução ao desenvolvimento web - formulários (pt 1)
4   si introdução ao desenvolvimento web - formulários (pt 1)4   si introdução ao desenvolvimento web - formulários (pt 1)
4 si introdução ao desenvolvimento web - formulários (pt 1)lucianoteixeirasgmail
 
Aula 03 - Layout e Integração de formulário com HTML e PHP
Aula 03  - Layout e Integração de formulário com HTML e PHPAula 03  - Layout e Integração de formulário com HTML e PHP
Aula 03 - Layout e Integração de formulário com HTML e PHPDalton Martins
 
4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)
4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)
4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)Mauro Duarte
 
Curso de html formularios
Curso de html formulariosCurso de html formularios
Curso de html formulariosErik Cunha
 
Aula 3 html (formulário)
Aula 3   html (formulário)Aula 3   html (formulário)
Aula 3 html (formulário)andreluizlc
 
Html (formulário)
Html (formulário)Html (formulário)
Html (formulário)andreluizlc
 
Html formulário
Html   formulárioHtml   formulário
Html formulárioandreluizlc
 
Internet I - Aula 06 - Formulários
Internet I - Aula 06 - FormuláriosInternet I - Aula 06 - Formulários
Internet I - Aula 06 - FormuláriosManoel Afonso
 

Semelhante a Formulário HTML (20)

Programação web ii aulas 08 e 09
Programação web ii   aulas 08 e 09Programação web ii   aulas 08 e 09
Programação web ii aulas 08 e 09
 
Aula formularios 1
Aula formularios 1Aula formularios 1
Aula formularios 1
 
4 si introdução ao desenvolvimento web - formulários (pt 1)
4   si introdução ao desenvolvimento web - formulários (pt 1)4   si introdução ao desenvolvimento web - formulários (pt 1)
4 si introdução ao desenvolvimento web - formulários (pt 1)
 
Aula 5 php
Aula 5 phpAula 5 php
Aula 5 php
 
Aula 03 - Layout e Integração de formulário com HTML e PHP
Aula 03  - Layout e Integração de formulário com HTML e PHPAula 03  - Layout e Integração de formulário com HTML e PHP
Aula 03 - Layout e Integração de formulário com HTML e PHP
 
Formularios
FormulariosFormularios
Formularios
 
4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)
4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)
4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)
 
Formulários
FormuláriosFormulários
Formulários
 
RCOM 11º Ano - HTML
RCOM 11º Ano - HTMLRCOM 11º Ano - HTML
RCOM 11º Ano - HTML
 
Curso de html formularios
Curso de html formulariosCurso de html formularios
Curso de html formularios
 
Aula 3 html (formulário)
Aula 3   html (formulário)Aula 3   html (formulário)
Aula 3 html (formulário)
 
Html (formulário)
Html (formulário)Html (formulário)
Html (formulário)
 
Php Básico - Parte 2
Php Básico - Parte 2Php Básico - Parte 2
Php Básico - Parte 2
 
Http Servlet
Http ServletHttp Servlet
Http Servlet
 
jQuery na Prática!
jQuery na Prática!jQuery na Prática!
jQuery na Prática!
 
Html formulário
Html   formulárioHtml   formulário
Html formulário
 
HTML
HTMLHTML
HTML
 
Internet I - Aula 06 - Formulários
Internet I - Aula 06 - FormuláriosInternet I - Aula 06 - Formulários
Internet I - Aula 06 - Formulários
 
Aplicativo aula05
Aplicativo aula05Aplicativo aula05
Aplicativo aula05
 
Java script aula 08 - formulários
Java script   aula 08 - formuláriosJava script   aula 08 - formulários
Java script aula 08 - formulários
 

Mais de Evandro Manara Miletto

Redes Sociais e Fabricação Digital na Construção de Objetos para Apoio a...
Redes Sociais e Fabricação Digital na Construção de Objetos para Apoio a...Redes Sociais e Fabricação Digital na Construção de Objetos para Apoio a...
Redes Sociais e Fabricação Digital na Construção de Objetos para Apoio a...Evandro Manara Miletto
 
Estágio de Pesquisa Aplicada e Inovação no Canadá
Estágio de Pesquisa Aplicada e Inovação no CanadáEstágio de Pesquisa Aplicada e Inovação no Canadá
Estágio de Pesquisa Aplicada e Inovação no CanadáEvandro Manara Miletto
 
Brazilian-Canada - Fellowship Exchange Program Debriefing
Brazilian-Canada - Fellowship Exchange Program DebriefingBrazilian-Canada - Fellowship Exchange Program Debriefing
Brazilian-Canada - Fellowship Exchange Program DebriefingEvandro Manara Miletto
 
Présentation CloudIA - coopération internationale Brésil - Canadá
Présentation CloudIA - coopération internationale Brésil - CanadáPrésentation CloudIA - coopération internationale Brésil - Canadá
Présentation CloudIA - coopération internationale Brésil - CanadáEvandro Manara Miletto
 
WAITS - Water Quality Information System - SBIE 2013 / UNICAMP
WAITS - Water Quality Information System - SBIE 2013 / UNICAMPWAITS - Water Quality Information System - SBIE 2013 / UNICAMP
WAITS - Water Quality Information System - SBIE 2013 / UNICAMPEvandro Manara Miletto
 
Mobilidade Acadêmica - experiências e considerações.
Mobilidade Acadêmica - experiências e considerações.Mobilidade Acadêmica - experiências e considerações.
Mobilidade Acadêmica - experiências e considerações.Evandro Manara Miletto
 
historia dos computadores e sistemas numéricos
historia dos computadores e sistemas numéricoshistoria dos computadores e sistemas numéricos
historia dos computadores e sistemas numéricosEvandro Manara Miletto
 

Mais de Evandro Manara Miletto (20)

Redes Sociais e Fabricação Digital na Construção de Objetos para Apoio a...
Redes Sociais e Fabricação Digital na Construção de Objetos para Apoio a...Redes Sociais e Fabricação Digital na Construção de Objetos para Apoio a...
Redes Sociais e Fabricação Digital na Construção de Objetos para Apoio a...
 
Estágio de Pesquisa Aplicada e Inovação no Canadá
Estágio de Pesquisa Aplicada e Inovação no CanadáEstágio de Pesquisa Aplicada e Inovação no Canadá
Estágio de Pesquisa Aplicada e Inovação no Canadá
 
Brazilian-Canada - Fellowship Exchange Program Debriefing
Brazilian-Canada - Fellowship Exchange Program DebriefingBrazilian-Canada - Fellowship Exchange Program Debriefing
Brazilian-Canada - Fellowship Exchange Program Debriefing
 
Présentation CloudIA - coopération internationale Brésil - Canadá
Présentation CloudIA - coopération internationale Brésil - CanadáPrésentation CloudIA - coopération internationale Brésil - Canadá
Présentation CloudIA - coopération internationale Brésil - Canadá
 
Noções de planejamento visual
Noções de planejamento visualNoções de planejamento visual
Noções de planejamento visual
 
WAITS - Water Quality Information System - SBIE 2013 / UNICAMP
WAITS - Water Quality Information System - SBIE 2013 / UNICAMPWAITS - Water Quality Information System - SBIE 2013 / UNICAMP
WAITS - Water Quality Information System - SBIE 2013 / UNICAMP
 
Mobilidade Acadêmica - experiências e considerações.
Mobilidade Acadêmica - experiências e considerações.Mobilidade Acadêmica - experiências e considerações.
Mobilidade Acadêmica - experiências e considerações.
 
Pure data - Introdução
Pure data - IntroduçãoPure data - Introdução
Pure data - Introdução
 
Equallizacao
EquallizacaoEquallizacao
Equallizacao
 
Compressao
CompressaoCompressao
Compressao
 
Logica Digital
Logica DigitalLogica Digital
Logica Digital
 
historia dos computadores e sistemas numéricos
historia dos computadores e sistemas numéricoshistoria dos computadores e sistemas numéricos
historia dos computadores e sistemas numéricos
 
Internacionalização do IFRS
Internacionalização do IFRSInternacionalização do IFRS
Internacionalização do IFRS
 
Navegando no @mbiente
Navegando no @mbienteNavegando no @mbiente
Navegando no @mbiente
 
HTTP - Visão geral
HTTP - Visão geralHTTP - Visão geral
HTTP - Visão geral
 
Php aula1
Php aula1Php aula1
Php aula1
 
Cores na Web
Cores na WebCores na Web
Cores na Web
 
Java script1
Java script1Java script1
Java script1
 
Java script2
Java script2Java script2
Java script2
 
Tipografia na Web
Tipografia na WebTipografia na Web
Tipografia na Web
 

Último

O que é uma Revolução Solar. tecnica preditiva
O que é uma Revolução Solar. tecnica preditivaO que é uma Revolução Solar. tecnica preditiva
O que é uma Revolução Solar. tecnica preditivaCludiaRodrigues693635
 
UFCD_9184_Saúde, nutrição, higiene, segurança, repouso e conforto da criança ...
UFCD_9184_Saúde, nutrição, higiene, segurança, repouso e conforto da criança ...UFCD_9184_Saúde, nutrição, higiene, segurança, repouso e conforto da criança ...
UFCD_9184_Saúde, nutrição, higiene, segurança, repouso e conforto da criança ...Manuais Formação
 
Meu corpo - Ruth Rocha e Anna Flora livro
Meu corpo - Ruth Rocha e Anna Flora livroMeu corpo - Ruth Rocha e Anna Flora livro
Meu corpo - Ruth Rocha e Anna Flora livroBrenda Fritz
 
Slides Lição 07, Central Gospel, As Duas Testemunhas Do Final Dos Tempos.pptx
Slides Lição 07, Central Gospel, As Duas Testemunhas Do Final Dos Tempos.pptxSlides Lição 07, Central Gospel, As Duas Testemunhas Do Final Dos Tempos.pptx
Slides Lição 07, Central Gospel, As Duas Testemunhas Do Final Dos Tempos.pptxLuizHenriquedeAlmeid6
 
Campanha 18 de. Maio laranja dds.pptx
Campanha 18 de.    Maio laranja dds.pptxCampanha 18 de.    Maio laranja dds.pptx
Campanha 18 de. Maio laranja dds.pptxlucioalmeida2702
 
Atividade do poema sobre mãe de mário quintana.pdf
Atividade do poema sobre mãe de mário quintana.pdfAtividade do poema sobre mãe de mário quintana.pdf
Atividade do poema sobre mãe de mário quintana.pdfmaria794949
 
APH- Avaliação de cena , analise geral do ambiente e paciente.
APH- Avaliação de cena , analise geral do ambiente e paciente.APH- Avaliação de cena , analise geral do ambiente e paciente.
APH- Avaliação de cena , analise geral do ambiente e paciente.HandersonFabio
 
MARCHA HUMANA. UM ESTUDO SOBRE AS MARCHAS
MARCHA HUMANA. UM ESTUDO SOBRE AS MARCHASMARCHA HUMANA. UM ESTUDO SOBRE AS MARCHAS
MARCHA HUMANA. UM ESTUDO SOBRE AS MARCHASyan1305goncalves
 
Unidade 4 (Texto poético) (Teste sem correção) (2).docx
Unidade 4 (Texto poético) (Teste sem correção) (2).docxUnidade 4 (Texto poético) (Teste sem correção) (2).docx
Unidade 4 (Texto poético) (Teste sem correção) (2).docxRaquelMartins389880
 
Aparatologia na estética - Cavitação, radiofrequência e lipolaser.pdf
Aparatologia na estética - Cavitação, radiofrequência e lipolaser.pdfAparatologia na estética - Cavitação, radiofrequência e lipolaser.pdf
Aparatologia na estética - Cavitação, radiofrequência e lipolaser.pdfAbdLuxemBourg
 
ufcd_9649_Educação Inclusiva e Necessidades Educativas Especificas_índice.pdf
ufcd_9649_Educação Inclusiva e Necessidades Educativas Especificas_índice.pdfufcd_9649_Educação Inclusiva e Necessidades Educativas Especificas_índice.pdf
ufcd_9649_Educação Inclusiva e Necessidades Educativas Especificas_índice.pdfManuais Formação
 
Conteúdo sobre a formação e expansão persa
Conteúdo sobre a formação e expansão persaConteúdo sobre a formação e expansão persa
Conteúdo sobre a formação e expansão persafelipescherner
 
Apresentação sobre Robots e processos educativos
Apresentação sobre Robots e processos educativosApresentação sobre Robots e processos educativos
Apresentação sobre Robots e processos educativosFernanda Ledesma
 
Alemanha vs União Soviética - Livro de Adolf Hitler
Alemanha vs União Soviética - Livro de Adolf HitlerAlemanha vs União Soviética - Livro de Adolf Hitler
Alemanha vs União Soviética - Livro de Adolf Hitlerhabiwo1978
 
Descrever e planear atividades imersivas estruturadamente
Descrever e planear atividades imersivas estruturadamenteDescrever e planear atividades imersivas estruturadamente
Descrever e planear atividades imersivas estruturadamenteLeonel Morgado
 
ROTINA DE ESTUDO-APOSTILA ESTUDO ORIENTADO.pdf
ROTINA DE ESTUDO-APOSTILA ESTUDO ORIENTADO.pdfROTINA DE ESTUDO-APOSTILA ESTUDO ORIENTADO.pdf
ROTINA DE ESTUDO-APOSTILA ESTUDO ORIENTADO.pdfMarcianaClaudioClaud
 
livro para educação infantil conceitos sensorial
livro para educação infantil conceitos sensoriallivro para educação infantil conceitos sensorial
livro para educação infantil conceitos sensorialNeuroppIsnayaLciaMar
 
PPP6_ciencias final 6 ano ano de 23/24 final
PPP6_ciencias final 6 ano ano de 23/24 finalPPP6_ciencias final 6 ano ano de 23/24 final
PPP6_ciencias final 6 ano ano de 23/24 finalcarlaOliveira438
 
Slides Lição 8, CPAD, Confessando e Abandonando o Pecado.pptx
Slides Lição 8, CPAD, Confessando e Abandonando o Pecado.pptxSlides Lição 8, CPAD, Confessando e Abandonando o Pecado.pptx
Slides Lição 8, CPAD, Confessando e Abandonando o Pecado.pptxLuizHenriquedeAlmeid6
 

Último (20)

Enunciado_da_Avaliacao_1__Sistemas_de_Informacoes_Gerenciais_(IL60106).pdf
Enunciado_da_Avaliacao_1__Sistemas_de_Informacoes_Gerenciais_(IL60106).pdfEnunciado_da_Avaliacao_1__Sistemas_de_Informacoes_Gerenciais_(IL60106).pdf
Enunciado_da_Avaliacao_1__Sistemas_de_Informacoes_Gerenciais_(IL60106).pdf
 
O que é uma Revolução Solar. tecnica preditiva
O que é uma Revolução Solar. tecnica preditivaO que é uma Revolução Solar. tecnica preditiva
O que é uma Revolução Solar. tecnica preditiva
 
UFCD_9184_Saúde, nutrição, higiene, segurança, repouso e conforto da criança ...
UFCD_9184_Saúde, nutrição, higiene, segurança, repouso e conforto da criança ...UFCD_9184_Saúde, nutrição, higiene, segurança, repouso e conforto da criança ...
UFCD_9184_Saúde, nutrição, higiene, segurança, repouso e conforto da criança ...
 
Meu corpo - Ruth Rocha e Anna Flora livro
Meu corpo - Ruth Rocha e Anna Flora livroMeu corpo - Ruth Rocha e Anna Flora livro
Meu corpo - Ruth Rocha e Anna Flora livro
 
Slides Lição 07, Central Gospel, As Duas Testemunhas Do Final Dos Tempos.pptx
Slides Lição 07, Central Gospel, As Duas Testemunhas Do Final Dos Tempos.pptxSlides Lição 07, Central Gospel, As Duas Testemunhas Do Final Dos Tempos.pptx
Slides Lição 07, Central Gospel, As Duas Testemunhas Do Final Dos Tempos.pptx
 
Campanha 18 de. Maio laranja dds.pptx
Campanha 18 de.    Maio laranja dds.pptxCampanha 18 de.    Maio laranja dds.pptx
Campanha 18 de. Maio laranja dds.pptx
 
Atividade do poema sobre mãe de mário quintana.pdf
Atividade do poema sobre mãe de mário quintana.pdfAtividade do poema sobre mãe de mário quintana.pdf
Atividade do poema sobre mãe de mário quintana.pdf
 
APH- Avaliação de cena , analise geral do ambiente e paciente.
APH- Avaliação de cena , analise geral do ambiente e paciente.APH- Avaliação de cena , analise geral do ambiente e paciente.
APH- Avaliação de cena , analise geral do ambiente e paciente.
 
MARCHA HUMANA. UM ESTUDO SOBRE AS MARCHAS
MARCHA HUMANA. UM ESTUDO SOBRE AS MARCHASMARCHA HUMANA. UM ESTUDO SOBRE AS MARCHAS
MARCHA HUMANA. UM ESTUDO SOBRE AS MARCHAS
 
Unidade 4 (Texto poético) (Teste sem correção) (2).docx
Unidade 4 (Texto poético) (Teste sem correção) (2).docxUnidade 4 (Texto poético) (Teste sem correção) (2).docx
Unidade 4 (Texto poético) (Teste sem correção) (2).docx
 
Aparatologia na estética - Cavitação, radiofrequência e lipolaser.pdf
Aparatologia na estética - Cavitação, radiofrequência e lipolaser.pdfAparatologia na estética - Cavitação, radiofrequência e lipolaser.pdf
Aparatologia na estética - Cavitação, radiofrequência e lipolaser.pdf
 
ufcd_9649_Educação Inclusiva e Necessidades Educativas Especificas_índice.pdf
ufcd_9649_Educação Inclusiva e Necessidades Educativas Especificas_índice.pdfufcd_9649_Educação Inclusiva e Necessidades Educativas Especificas_índice.pdf
ufcd_9649_Educação Inclusiva e Necessidades Educativas Especificas_índice.pdf
 
Conteúdo sobre a formação e expansão persa
Conteúdo sobre a formação e expansão persaConteúdo sobre a formação e expansão persa
Conteúdo sobre a formação e expansão persa
 
Apresentação sobre Robots e processos educativos
Apresentação sobre Robots e processos educativosApresentação sobre Robots e processos educativos
Apresentação sobre Robots e processos educativos
 
Alemanha vs União Soviética - Livro de Adolf Hitler
Alemanha vs União Soviética - Livro de Adolf HitlerAlemanha vs União Soviética - Livro de Adolf Hitler
Alemanha vs União Soviética - Livro de Adolf Hitler
 
Descrever e planear atividades imersivas estruturadamente
Descrever e planear atividades imersivas estruturadamenteDescrever e planear atividades imersivas estruturadamente
Descrever e planear atividades imersivas estruturadamente
 
ROTINA DE ESTUDO-APOSTILA ESTUDO ORIENTADO.pdf
ROTINA DE ESTUDO-APOSTILA ESTUDO ORIENTADO.pdfROTINA DE ESTUDO-APOSTILA ESTUDO ORIENTADO.pdf
ROTINA DE ESTUDO-APOSTILA ESTUDO ORIENTADO.pdf
 
livro para educação infantil conceitos sensorial
livro para educação infantil conceitos sensoriallivro para educação infantil conceitos sensorial
livro para educação infantil conceitos sensorial
 
PPP6_ciencias final 6 ano ano de 23/24 final
PPP6_ciencias final 6 ano ano de 23/24 finalPPP6_ciencias final 6 ano ano de 23/24 final
PPP6_ciencias final 6 ano ano de 23/24 final
 
Slides Lição 8, CPAD, Confessando e Abandonando o Pecado.pptx
Slides Lição 8, CPAD, Confessando e Abandonando o Pecado.pptxSlides Lição 8, CPAD, Confessando e Abandonando o Pecado.pptx
Slides Lição 8, CPAD, Confessando e Abandonando o Pecado.pptx
 

Formulário HTML

  • 2. Pra que serve e quando vou usar um Formulário HTML?
  • 4. Formulários HTML • Proporcionam interação com o internauta • Selecionam diferentes tipos de entradas do usuário • Usados para enviar dados ao servidor • Contém elementos de entrada como texto, checkbox, botão-radio, botão enviar, menu drop-down, etc...
  • 5. ‘Anatomia’ do formulário • Construído dentro do container <form>... </form> • 2 atributos princiapis: action (define a URL que receberá o formulário) e method (define método usado para envio dos dados) <form action="URL para onde serão enviado os dados" method="método HTTP (GET ou POST)" enctype="formato de codificação" target="nome da janela que mostrará a resposta" > ... corpo do formulário (elementos)... </form>
  • 6. ‘Raio X’ do formulário Texto que aparece Nome na variável na página Forma de envio que receberá ação / url para onde vai (aberto / como valor o que empacotado) estiver no campo nome <form action="envia.jsp" method="post"> Usado para <label for="nome">Digite seu nome:</label> associar o rótulo com o <input type="text" id="nome" size="20" name="nome"/> controle input (acessibilidade) <input type="submit" value="Enviar Nome" /> </form> Valor/texto que aparecerá no Renderiza diversos Botão tipos de controle Usados juntos (entradas) do para relacionar o Diferentes tipos formulário texto com o da entrada Input campo (texto e botão de envio)
  • 7. Envio de dados • Os elementos de entrada de dados têm um nome e enviam um valor • Exemplo de formulário simples <form action="/lib/envia.php" method="post"> <label for="nome">Nome:</label> <input name="nome" type="text" id="nome" size="25" /> <input type="submit" value="ENVIAR Nome"/> </form> POST /lib/envia.php HTTP/1.0 Content-type: text/x-www-form-urlencoded Content-length: 15 nome=Carminha
  • 8. Disparo de eventos • Os elementos <input> com atributo type submit, reset e button servem para disparar eventos  Envio do formulário (Submit)  Reinicialização do formulário (Reset)  Evento programado por JavaScript (Button) • O value do botão define o texto que mostrará • Apenas se o botão contiver um atributo name, o conteúdo de value será enviado ao servidor
  • 9. Entrada de texto Elementos <input> com Com type="password" o type="text" são usados para texto digitado é ocultado na entrada de texto tela do browser
  • 10. Campos ocultos • Consistem de um par nome/valor embutido no HTML • Usados para envio de dados ao servidor  sobre configuração da aplicação  comandos, para selecionar comportamentos diferentes da aplicação  parâmetros especiais para controle da aplicação, sessão ou dados que pertencem ao contexto da aplicação • Sintaxe <input type="hidden" name="nome" value="valor">
  • 11. Chaves booleanas 1 Há dois tipos: checkboxes e radio buttons Checkboxes permitem seleção múltipla
  • 12. Chaves booleanas 2 Radio buttons, permite seleção única (marca um desmarca o outro)
  • 13. Upload de Arquivos O elemento <input type="file"> cria um campo que permite o Upload de arquivos para o servidor Sintaxe do formulário <form action="envia.php" method="post" enctype="text/multipart-form-data"> <label> Escolha um arquivo <input type="file" /> <label> </form>
  • 14. Área para entrada de texto Possibilitam a entrada de texto de múltiplas linhas tags <textarea> </textarea> <form action="envia.php"> <textarea rows="6" cols="40">Texto Inicial</textarea> </form>
  • 15. Menus de seleção Geram requisições similares a checkboxes e radio buttons Consistem de um par de elementos <select> define o nome da coleção <option> define o valor que será enviado <form action="envia.php"> <form action="envia.php"> <select name="dia"> <select name="dias" size="4" multiple> <option value="seg">Segunda</option> <option value="seg">Segunda</option> <option value="ter">Terca</option> <option value="ter">Terca</option> <option value="qua">Quarta</option> <option value="qua">Quarta</option> <option value="qui">Quinta</option> <option value="qui">Quinta</option> <option value="sex">Sexta</option> <option value="sex">Sexta</option> </select> </select> </form> </form>
  • 16. Grupos na seleção Criando grupos no menu de seleção <select> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select>
  • 17. Formulário e acessibilidade Favorecida pelo uso dos atributos fieldset: agrupa os itens do formulário com características comuns legend: usado em conjunto com o fieldset envolvendo os itens label: usado em conjunto com o for e id, associa o elemento ao seu rótulo optgroup: usado em conjunto com select para agrupar itens dentro do select
  • 18. Formulário e acessibilidade <form id="form" method="post" action="enviar.php"> <fieldset><legend>Dados para Contato</legend> <label for="nome">Nome:<input type="text" name="nome" id="nome" value="*" /></label> <label for="email">E-mail:<input type="text" name="email" id="email" value="*" /></label> <label for="assunto">Assunto:<input type="text" name="assunto" id="assunto" value="*" /></label> <label for="msg">Mensagem:<br /><textarea rows="6" cols="50" name="msg" id="msg">*</textarea></label> <input type="submit" value="Enviar Mensagem" id="enviar" /> </fieldset> </form>
  • 19. Exercícios Crie um formulário Web HTML acessível que mostre campos e controles para cadastro de usuário (inserção de dados), contendo: Nome, data de nascimento, e-mail, sexo, formação (ensino básico, técnico, superior, pós-graduaçao), cargo - select - (programador, analista, teste de Sw), Conhecimentos (Java, JSP, PHP, HTML, CSS, MySQL), area de texto para resumée, campo para envio de arquivo (indicaçao para “Clique para enviar seu CV” e botão de Enviar dados.