SlideShare a Scribd company logo
1 of 21
Download to read offline
HTML
A alma da internet
Prof. Mauro DuarteProf. Mauro Duarte
Formulários
 Formulários em HTML tem uma estrutura
básica a tag <form> inicia o formulário,
<input> recebe informações do usuário, envia
ou limpa o formulário de acordo o tipo.
 Veja um exemplo
Formulários
<form>
<label>Primeiro nome: </label>
<input type="text" name="firstname">
<br>
<label>Segundo nome:</label>
<input type="text" name="lastname">
</form>
Formulários
<form action="acao.php" method="POST">
●
A tag <form> recebe no mínimo 2 parâmetros,
●
action que define quem tratará o formulário
●
method que define como será enviado as
informações.
Formulários
<label>Seu nome</label>
<input type="text" name="nome" >
●
A tag <input> recebe no mínimo 2 parâmetros,
●
type que define o tipo.
●
name que define como esta tag será lida.
Tipos de input - “text”
<label>Seu nome</label>
<input type="text" name="nome" >
●
Text é um campo de texto, aceita tudo.
Tipos de input - “password”
<label>Senha</label>
<input type="password" name="pwd">
●
Password é um campo de texto, aceita tudo,
entretanto esconde a digitação.
– html5
Tipos de input - “radio”
<input type="radio" name="sexo"
value="male">Macho<br>
<input type="radio" name="sexo"
value="female">Fêmea
Radio cria botões de opção, o name deve ser o
mesmo para todos os seletores iguais.
– html5
Tipos de input - “checkbox”
<input type="checkbox" name="vehicle"
value="Bike">Eu tenho uma Bike<br>
<input type="checkbox" name="vehicle"
value="Car">Eu tenho um carro
●
Checkbox cria botões de marcação.
– html5
Tipos de input - “submit”
<input type="submit" value="Enviar">
submit cria um botão para enviar o formulário.
Value define o texto do botão.
Tipos de input - “reset”
<input type="reset" value="Limpar">
Reset cria um botão para limpar o formulário.
Value define o texto do botão.
Tipos de input - “textarea”
<textarea rows="4" cols="50">
</textarea>
Textarea cria um campo “grande” para
escrever um parágrafo.
Tipos de input - “textarea”
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="wv">WV</option>
<option value="audi">Audi</option>
 </select>
select cria um campo “menu” drop-down para escolher uma
opção.
A tag option recebe value para criar as opções do menu.
– html5
Tipos de input - “email”
E-mail: <input type="email" name="email">
Filtra a entrada para e-mail solicitando “@” e
“.”.
– Html5
Tipos de input - “range”
<input type="range" id="a" value="50">
Range cria um seletor numérico.
– html5
Tipos de input - “color”
Escolha sua cor favorita: <input type="color"
name="favcolor">
Color cria um seletor de cores.
– Html5
– Sem suporte completo
Tipos de input - “date”
Aniversário: <input type="date" name="niver">
Filtra a entrada para datas
– Html5
– Sem suporte completo.
Tipos de input - “datetime-local”
Data e hora atual: <input type="datetime-local"
name="time">
Filtra a entrada para data e hora atual
– Html5
– Sem suporte completo.
Tipos de input - “range”
<input type="range" name="points" min="1" max="10">
Filtra a entrada para número dentro de um
limite máximo e mínimo.
– Html5
– Sem suporte completo
Tipos de input - “button”
<button type="button" onclick="alert('Olá Mundo!')">Me
clique</button>
Button cria um botão clicavel que executa
uma tarefa.
– html5
Tipos de input - “operadores”
<form oninput="x.value=parseInt(a.value)
+parseInt(b.value)">
<input type="number" id="a" value="50">
 +<input type="number" id="b" value="50">
 =<output name="x" for="a b"></output>
 </form>
O HTML5 tem suporte lógico e matemático,
sumulando uma linguagem de programação.
– html5

More Related Content

What's hot

Tutorial: como elaborar um questionário online
Tutorial: como elaborar um questionário onlineTutorial: como elaborar um questionário online
Tutorial: como elaborar um questionário onlinekatv
 
Tutorial: Como elaborar um questionário no Google Docs
Tutorial: Como elaborar um questionário no Google DocsTutorial: Como elaborar um questionário no Google Docs
Tutorial: Como elaborar um questionário no Google Docskatv
 
10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticosCentro Paula Souza
 
11 Java Script - Exemplos com eventos
11 Java Script - Exemplos com eventos11 Java Script - Exemplos com eventos
11 Java Script - Exemplos com eventosCentro Paula Souza
 
Tutorial Sobre Flogs
Tutorial Sobre FlogsTutorial Sobre Flogs
Tutorial Sobre Flogsneuza
 

What's hot (11)

Tutorial: como elaborar um questionário online
Tutorial: como elaborar um questionário onlineTutorial: como elaborar um questionário online
Tutorial: como elaborar um questionário online
 
Tutorial: Como elaborar um questionário no Google Docs
Tutorial: Como elaborar um questionário no Google DocsTutorial: Como elaborar um questionário no Google Docs
Tutorial: Como elaborar um questionário no Google Docs
 
10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos
 
11 Java Script - Exemplos com eventos
11 Java Script - Exemplos com eventos11 Java Script - Exemplos com eventos
11 Java Script - Exemplos com eventos
 
Html e css para formulários
Html e css para formuláriosHtml e css para formulários
Html e css para formulários
 
Html e css para formulários
Html e css para formuláriosHtml e css para formulários
Html e css para formulários
 
Tutorial Sobre Flogs
Tutorial Sobre FlogsTutorial Sobre Flogs
Tutorial Sobre Flogs
 
Oficina Blog
Oficina BlogOficina Blog
Oficina Blog
 
Tutorial sobre-flogs-12848
Tutorial sobre-flogs-12848Tutorial sobre-flogs-12848
Tutorial sobre-flogs-12848
 
Facelets
FaceletsFacelets
Facelets
 
RCOM 11º Ano - HTML
RCOM 11º Ano - HTMLRCOM 11º Ano - HTML
RCOM 11º Ano - HTML
 

Viewers also liked

0 Introdução ao Desenvolvimento Web - Apresentação
0   Introdução ao Desenvolvimento Web - Apresentação0   Introdução ao Desenvolvimento Web - Apresentação
0 Introdução ao Desenvolvimento Web - ApresentaçãoMauro Duarte
 
7 - Introdução ao desenvolvimento web - mídias
7 - Introdução ao desenvolvimento web - mídias7 - Introdução ao desenvolvimento web - mídias
7 - Introdução ao desenvolvimento web - mídiasMauro Duarte
 
0 apresentação de introdução web
0   apresentação de introdução web 0   apresentação de introdução web
0 apresentação de introdução web Mauro Duarte
 

Viewers also liked (9)

8 layout
8   layout8   layout
8 layout
 
6 link tag aa
6   link tag aa6   link tag aa
6 link tag aa
 
0 Introdução ao Desenvolvimento Web - Apresentação
0   Introdução ao Desenvolvimento Web - Apresentação0   Introdução ao Desenvolvimento Web - Apresentação
0 Introdução ao Desenvolvimento Web - Apresentação
 
6 link tag a
6   link tag a6   link tag a
6 link tag a
 
7 - Introdução ao desenvolvimento web - mídias
7 - Introdução ao desenvolvimento web - mídias7 - Introdução ao desenvolvimento web - mídias
7 - Introdução ao desenvolvimento web - mídias
 
Requsitos
RequsitosRequsitos
Requsitos
 
0 apresentação de introdução web
0   apresentação de introdução web 0   apresentação de introdução web
0 apresentação de introdução web
 
Web form
Web formWeb form
Web form
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
 

Similar to 4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

Similar to 4 - Introdução ao Desenvolvimento Web - Formulários (pt 1) (20)

07 html formulários
07 html   formulários07 html   formulários
07 html formulários
 
Aula3 xhtml
Aula3 xhtmlAula3 xhtml
Aula3 xhtml
 
Formulário HTML
Formulário HTMLFormulário HTML
Formulário HTML
 
Html (formulário)
Html (formulário)Html (formulário)
Html (formulário)
 
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árioHtml   formulário
Html formulário
 
Curso de html formularios
Curso de html formulariosCurso de html formularios
Curso de html formularios
 
Aula 5 php
Aula 5 phpAula 5 php
Aula 5 php
 
1ª aula php
1ª aula php1ª aula php
1ª aula php
 
Formularios
FormulariosFormularios
Formularios
 
Introdução ao PHP Parte 1
Introdução ao PHP Parte 1Introdução ao PHP Parte 1
Introdução ao PHP Parte 1
 
Básico PHP: Introdução HTML
Básico PHP: Introdução HTMLBásico PHP: Introdução HTML
Básico PHP: Introdução 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 09
 
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e Vídeo
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e VídeoCurso HTML 5 - Aula com Formulários, Imagens, Áudio e Vídeo
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e Vídeo
 
Formulários
FormuláriosFormulários
Formulários
 
HTML
HTMLHTML
HTML
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
 
Php Básico - Parte 2
Php Básico - Parte 2Php Básico - Parte 2
Php Básico - Parte 2
 
Aula formularios 1
Aula formularios 1Aula formularios 1
Aula formularios 1
 
Ambiente web 12
Ambiente web 12Ambiente web 12
Ambiente web 12
 

More from Mauro Duarte

CSS - Folhas de Estilo em Cascata
CSS - Folhas de Estilo em Cascata CSS - Folhas de Estilo em Cascata
CSS - Folhas de Estilo em Cascata Mauro Duarte
 
01 Desenvolvimento em Redes de Computadores - Comandos Básicos
01   Desenvolvimento em Redes de Computadores - Comandos Básicos01   Desenvolvimento em Redes de Computadores - Comandos Básicos
01 Desenvolvimento em Redes de Computadores - Comandos BásicosMauro Duarte
 
00 apresentação desenvolvimento em redes de computadores
00   apresentação desenvolvimento em redes de computadores00   apresentação desenvolvimento em redes de computadores
00 apresentação desenvolvimento em redes de computadoresMauro Duarte
 
Porque tanta pressa - Caril Borges
Porque tanta pressa - Caril BorgesPorque tanta pressa - Caril Borges
Porque tanta pressa - Caril BorgesMauro Duarte
 
Perdoando como José perdoou - Caril Borges
Perdoando como José perdoou - Caril BorgesPerdoando como José perdoou - Caril Borges
Perdoando como José perdoou - Caril BorgesMauro Duarte
 
Otimistas ou pessimistas - Caril Borges
Otimistas ou pessimistas - Caril BorgesOtimistas ou pessimistas - Caril Borges
Otimistas ou pessimistas - Caril BorgesMauro Duarte
 
Nos importando com o próximo
Nos importando com o próximoNos importando com o próximo
Nos importando com o próximoMauro Duarte
 
Noé não deu desculpas para nao servir a deus
Noé não deu desculpas para nao servir a deusNoé não deu desculpas para nao servir a deus
Noé não deu desculpas para nao servir a deusMauro Duarte
 
Construindo muros ou pontes
Construindo muros ou pontesConstruindo muros ou pontes
Construindo muros ou pontesMauro Duarte
 
A tragédia que virou triunfo
A tragédia que virou triunfoA tragédia que virou triunfo
A tragédia que virou triunfoMauro Duarte
 
Atitudes para os problemas de 2015 - Caril Borges
Atitudes para os problemas de 2015  - Caril BorgesAtitudes para os problemas de 2015  - Caril Borges
Atitudes para os problemas de 2015 - Caril BorgesMauro Duarte
 
As armadilhas de satanás - Caril Borges
As armadilhas de satanás - Caril BorgesAs armadilhas de satanás - Caril Borges
As armadilhas de satanás - Caril BorgesMauro Duarte
 
Otimizando a Produção de WebSites com Joomla
Otimizando a Produção de WebSites com JoomlaOtimizando a Produção de WebSites com Joomla
Otimizando a Produção de WebSites com JoomlaMauro Duarte
 
Ataques de Dicionário com CUPP
Ataques de Dicionário com CUPPAtaques de Dicionário com CUPP
Ataques de Dicionário com CUPPMauro Duarte
 
Automação de Testes Selenium IDE
Automação de Testes Selenium IDEAutomação de Testes Selenium IDE
Automação de Testes Selenium IDEMauro Duarte
 
História Logo Flisol
História Logo Flisol História Logo Flisol
História Logo Flisol Mauro Duarte
 
03 Sistemas Operacionais Linux
03   Sistemas Operacionais Linux03   Sistemas Operacionais Linux
03 Sistemas Operacionais LinuxMauro Duarte
 
Aula 02 - Sistemas Operacionais - Microsoft
Aula 02 - Sistemas Operacionais - MicrosoftAula 02 - Sistemas Operacionais - Microsoft
Aula 02 - Sistemas Operacionais - MicrosoftMauro Duarte
 

More from Mauro Duarte (20)

CSS - Folhas de Estilo em Cascata
CSS - Folhas de Estilo em Cascata CSS - Folhas de Estilo em Cascata
CSS - Folhas de Estilo em Cascata
 
Os pássaros
Os pássarosOs pássaros
Os pássaros
 
01 Desenvolvimento em Redes de Computadores - Comandos Básicos
01   Desenvolvimento em Redes de Computadores - Comandos Básicos01   Desenvolvimento em Redes de Computadores - Comandos Básicos
01 Desenvolvimento em Redes de Computadores - Comandos Básicos
 
00 apresentação desenvolvimento em redes de computadores
00   apresentação desenvolvimento em redes de computadores00   apresentação desenvolvimento em redes de computadores
00 apresentação desenvolvimento em redes de computadores
 
Porque tanta pressa - Caril Borges
Porque tanta pressa - Caril BorgesPorque tanta pressa - Caril Borges
Porque tanta pressa - Caril Borges
 
Perdoando como José perdoou - Caril Borges
Perdoando como José perdoou - Caril BorgesPerdoando como José perdoou - Caril Borges
Perdoando como José perdoou - Caril Borges
 
Otimistas ou pessimistas - Caril Borges
Otimistas ou pessimistas - Caril BorgesOtimistas ou pessimistas - Caril Borges
Otimistas ou pessimistas - Caril Borges
 
Nos importando com o próximo
Nos importando com o próximoNos importando com o próximo
Nos importando com o próximo
 
Noé não deu desculpas para nao servir a deus
Noé não deu desculpas para nao servir a deusNoé não deu desculpas para nao servir a deus
Noé não deu desculpas para nao servir a deus
 
Construindo muros ou pontes
Construindo muros ou pontesConstruindo muros ou pontes
Construindo muros ou pontes
 
A tragédia que virou triunfo
A tragédia que virou triunfoA tragédia que virou triunfo
A tragédia que virou triunfo
 
Atitudes para os problemas de 2015 - Caril Borges
Atitudes para os problemas de 2015  - Caril BorgesAtitudes para os problemas de 2015  - Caril Borges
Atitudes para os problemas de 2015 - Caril Borges
 
As armadilhas de satanás - Caril Borges
As armadilhas de satanás - Caril BorgesAs armadilhas de satanás - Caril Borges
As armadilhas de satanás - Caril Borges
 
Otimizando a Produção de WebSites com Joomla
Otimizando a Produção de WebSites com JoomlaOtimizando a Produção de WebSites com Joomla
Otimizando a Produção de WebSites com Joomla
 
Ataques de Dicionário com CUPP
Ataques de Dicionário com CUPPAtaques de Dicionário com CUPP
Ataques de Dicionário com CUPP
 
Automação de Testes Selenium IDE
Automação de Testes Selenium IDEAutomação de Testes Selenium IDE
Automação de Testes Selenium IDE
 
História Logo Flisol
História Logo Flisol História Logo Flisol
História Logo Flisol
 
Web Design Hacker
Web Design HackerWeb Design Hacker
Web Design Hacker
 
03 Sistemas Operacionais Linux
03   Sistemas Operacionais Linux03   Sistemas Operacionais Linux
03 Sistemas Operacionais Linux
 
Aula 02 - Sistemas Operacionais - Microsoft
Aula 02 - Sistemas Operacionais - MicrosoftAula 02 - Sistemas Operacionais - Microsoft
Aula 02 - Sistemas Operacionais - Microsoft
 

4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

  • 1. HTML A alma da internet Prof. Mauro DuarteProf. Mauro Duarte
  • 2. Formulários  Formulários em HTML tem uma estrutura básica a tag <form> inicia o formulário, <input> recebe informações do usuário, envia ou limpa o formulário de acordo o tipo.  Veja um exemplo
  • 3. Formulários <form> <label>Primeiro nome: </label> <input type="text" name="firstname"> <br> <label>Segundo nome:</label> <input type="text" name="lastname"> </form>
  • 4. Formulários <form action="acao.php" method="POST"> ● A tag <form> recebe no mínimo 2 parâmetros, ● action que define quem tratará o formulário ● method que define como será enviado as informações.
  • 5. Formulários <label>Seu nome</label> <input type="text" name="nome" > ● A tag <input> recebe no mínimo 2 parâmetros, ● type que define o tipo. ● name que define como esta tag será lida.
  • 6. Tipos de input - “text” <label>Seu nome</label> <input type="text" name="nome" > ● Text é um campo de texto, aceita tudo.
  • 7. Tipos de input - “password” <label>Senha</label> <input type="password" name="pwd"> ● Password é um campo de texto, aceita tudo, entretanto esconde a digitação. – html5
  • 8. Tipos de input - “radio” <input type="radio" name="sexo" value="male">Macho<br> <input type="radio" name="sexo" value="female">Fêmea Radio cria botões de opção, o name deve ser o mesmo para todos os seletores iguais. – html5
  • 9. Tipos de input - “checkbox” <input type="checkbox" name="vehicle" value="Bike">Eu tenho uma Bike<br> <input type="checkbox" name="vehicle" value="Car">Eu tenho um carro ● Checkbox cria botões de marcação. – html5
  • 10. Tipos de input - “submit” <input type="submit" value="Enviar"> submit cria um botão para enviar o formulário. Value define o texto do botão.
  • 11. Tipos de input - “reset” <input type="reset" value="Limpar"> Reset cria um botão para limpar o formulário. Value define o texto do botão.
  • 12. Tipos de input - “textarea” <textarea rows="4" cols="50"> </textarea> Textarea cria um campo “grande” para escrever um parágrafo.
  • 13. Tipos de input - “textarea” <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="wv">WV</option> <option value="audi">Audi</option>  </select> select cria um campo “menu” drop-down para escolher uma opção. A tag option recebe value para criar as opções do menu. – html5
  • 14. Tipos de input - “email” E-mail: <input type="email" name="email"> Filtra a entrada para e-mail solicitando “@” e “.”. – Html5
  • 15. Tipos de input - “range” <input type="range" id="a" value="50"> Range cria um seletor numérico. – html5
  • 16. Tipos de input - “color” Escolha sua cor favorita: <input type="color" name="favcolor"> Color cria um seletor de cores. – Html5 – Sem suporte completo
  • 17. Tipos de input - “date” Aniversário: <input type="date" name="niver"> Filtra a entrada para datas – Html5 – Sem suporte completo.
  • 18. Tipos de input - “datetime-local” Data e hora atual: <input type="datetime-local" name="time"> Filtra a entrada para data e hora atual – Html5 – Sem suporte completo.
  • 19. Tipos de input - “range” <input type="range" name="points" min="1" max="10"> Filtra a entrada para número dentro de um limite máximo e mínimo. – Html5 – Sem suporte completo
  • 20. Tipos de input - “button” <button type="button" onclick="alert('Olá Mundo!')">Me clique</button> Button cria um botão clicavel que executa uma tarefa. – html5
  • 21. Tipos de input - “operadores” <form oninput="x.value=parseInt(a.value) +parseInt(b.value)"> <input type="number" id="a" value="50">  +<input type="number" id="b" value="50">  =<output name="x" for="a b"></output>  </form> O HTML5 tem suporte lógico e matemático, sumulando uma linguagem de programação. – html5