SlideShare uma empresa Scribd logo
• Os elementos de formulário são elementos que permitem o usuário entrar informação
(como campos de texto, campos de área de texto, menus drop-down, botões de seleção
única, botões de seleção múltipla, caixas de seleção, etc.) em um formulário.
<form></form>
<form>
Atributos
• method – método HTTP de envio das informações (POST / GET)
• action – endereço a serem enviados os dados - #
• enctype - multipart/form-data – para envio de arquivos
<form method="#" action="POST">
<input>
Atributos
• type – tipo de campo ( text / radio / checkbox / file / hidden / password ) (color / date / datetime /
month / email / number / range / search / tel / time / url / week - HTML5*)
• name – nome do campo a ser enviado
• value – valor do campo
<input type="text" name="nome" value="">
<input>
Tipo de dado Tipo de campo
text Texto
radio Opção, seleção única
checkbox Opção, seleção múltipla
file Arquivo
hidden Oculto
password Senha
Tipo de dado Tipo de campo
color Seleção de cor
date Data
datetime Data e Hora
month Mês
email E-mail
number Número
range Intervalo numérico
search Busca
tel Telefone
time Hora
url URL
week Semana
<textarea>
Atributos
• rows – quantidade de linhas (em tamanho)
• cols – quantidade de colunas (em tamanho)
• name – nome do campo a ser enviado
• value – valor do campo
<textarea name="texto">Conteúdo</textarea>
<select>
Atributos
• name – nome do campo a ser enviado
• multiple – quando for utilizado para seleção de múltiplos itens
• Para cada opção é utilizada a tag <option>
<select name="nome">
<option value="1">Opção 1</option>
<option value="2">Opção 2</option>
</select>
<button>
Atributos
• type – tipo de botão (button | submit | reset )
<button type="submit">Enviar</button>
<label>
Atributos
• for – destino quando clicado (igual ao atributo id do campo)
<label for="nome">
<input type="text" name="nome" id="nome">
</label>
Validação
Obrigatoriedade de preenchimento – em HTML5
• Para tornar um campo obrigatório, em HTML5, deve-se adicionar o atributo required.
<input type="text" value="Campo" required>
<form></form>
<input></input>
<textarea></ textarea>
<button></button>
<select></select>
<label></label>
• Tutorial de HTML Formulários - (http://www.hugoribeiro.com.br/Curso_HTML/html/c11.htm)
• Os formulários HTML - (http://br.ccm.net/contents/238-os-formularios-html)
• HTML button type Attribute - (http://www.w3schools.com/tags/att_button_type.asp)

Mais conteúdo relacionado

Mais de Israel Messias

CMS
CMSCMS
Programação Multiplataforma em Ambiente Web
Programação Multiplataforma em Ambiente WebProgramação Multiplataforma em Ambiente Web
Programação Multiplataforma em Ambiente Web
Israel Messias
 
Programação Orientada a Objetos (POO) com PHP - Parte 2
Programação Orientada a Objetos (POO) com PHP - Parte 2Programação Orientada a Objetos (POO) com PHP - Parte 2
Programação Orientada a Objetos (POO) com PHP - Parte 2
Israel Messias
 
Programação Orientada a Objetos (POO) com PHP - Parte 1
Programação Orientada a Objetos (POO) com PHP - Parte 1Programação Orientada a Objetos (POO) com PHP - Parte 1
Programação Orientada a Objetos (POO) com PHP - Parte 1
Israel Messias
 
Websockets
WebsocketsWebsockets
Websockets
Israel Messias
 
Arquitetura Cliente-Servidor - Modelos
Arquitetura Cliente-Servidor - ModelosArquitetura Cliente-Servidor - Modelos
Arquitetura Cliente-Servidor - Modelos
Israel Messias
 
Arquitetura Cliente-Servidor
Arquitetura Cliente-ServidorArquitetura Cliente-Servidor
Arquitetura Cliente-Servidor
Israel Messias
 
Arquitetura Cliente-Servidor - Banco de dados
Arquitetura Cliente-Servidor - Banco de dadosArquitetura Cliente-Servidor - Banco de dados
Arquitetura Cliente-Servidor - Banco de dados
Israel Messias
 
Ferramentas para Animações de Sites - Canvas
Ferramentas para Animações de Sites - CanvasFerramentas para Animações de Sites - Canvas
Ferramentas para Animações de Sites - Canvas
Israel Messias
 
Ferramentas para Animações de Sites - Áudio
Ferramentas para Animações de Sites - ÁudioFerramentas para Animações de Sites - Áudio
Ferramentas para Animações de Sites - Áudio
Israel Messias
 
CSS - Cascading Style Sheets - Medidas
CSS - Cascading Style Sheets - MedidasCSS - Cascading Style Sheets - Medidas
CSS - Cascading Style Sheets - Medidas
Israel Messias
 
CSS - Cascading Style Sheets - Revisão
CSS - Cascading Style Sheets - RevisãoCSS - Cascading Style Sheets - Revisão
CSS - Cascading Style Sheets - Revisão
Israel Messias
 
CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2
Israel Messias
 
CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1
Israel Messias
 
HTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewHTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - Review
Israel Messias
 
HTML - HyperText Markup Language - FTP
HTML - HyperText Markup Language - FTPHTML - HyperText Markup Language - FTP
HTML - HyperText Markup Language - FTP
Israel Messias
 
HTML - HyperText Markup Language - Organização de arquivos
HTML - HyperText Markup Language - Organização de arquivosHTML - HyperText Markup Language - Organização de arquivos
HTML - HyperText Markup Language - Organização de arquivos
Israel Messias
 
HTML - HyperText Markup Language - 4 - Review
HTML - HyperText Markup Language - 4 - Review HTML - HyperText Markup Language - 4 - Review
HTML - HyperText Markup Language - 4 - Review
Israel Messias
 
HTML - HyperText Markup Language - 3
HTML - HyperText Markup Language - 3HTML - HyperText Markup Language - 3
HTML - HyperText Markup Language - 3
Israel Messias
 
HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2
Israel Messias
 

Mais de Israel Messias (20)

CMS
CMSCMS
CMS
 
Programação Multiplataforma em Ambiente Web
Programação Multiplataforma em Ambiente WebProgramação Multiplataforma em Ambiente Web
Programação Multiplataforma em Ambiente Web
 
Programação Orientada a Objetos (POO) com PHP - Parte 2
Programação Orientada a Objetos (POO) com PHP - Parte 2Programação Orientada a Objetos (POO) com PHP - Parte 2
Programação Orientada a Objetos (POO) com PHP - Parte 2
 
Programação Orientada a Objetos (POO) com PHP - Parte 1
Programação Orientada a Objetos (POO) com PHP - Parte 1Programação Orientada a Objetos (POO) com PHP - Parte 1
Programação Orientada a Objetos (POO) com PHP - Parte 1
 
Websockets
WebsocketsWebsockets
Websockets
 
Arquitetura Cliente-Servidor - Modelos
Arquitetura Cliente-Servidor - ModelosArquitetura Cliente-Servidor - Modelos
Arquitetura Cliente-Servidor - Modelos
 
Arquitetura Cliente-Servidor
Arquitetura Cliente-ServidorArquitetura Cliente-Servidor
Arquitetura Cliente-Servidor
 
Arquitetura Cliente-Servidor - Banco de dados
Arquitetura Cliente-Servidor - Banco de dadosArquitetura Cliente-Servidor - Banco de dados
Arquitetura Cliente-Servidor - Banco de dados
 
Ferramentas para Animações de Sites - Canvas
Ferramentas para Animações de Sites - CanvasFerramentas para Animações de Sites - Canvas
Ferramentas para Animações de Sites - Canvas
 
Ferramentas para Animações de Sites - Áudio
Ferramentas para Animações de Sites - ÁudioFerramentas para Animações de Sites - Áudio
Ferramentas para Animações de Sites - Áudio
 
CSS - Cascading Style Sheets - Medidas
CSS - Cascading Style Sheets - MedidasCSS - Cascading Style Sheets - Medidas
CSS - Cascading Style Sheets - Medidas
 
CSS - Cascading Style Sheets - Revisão
CSS - Cascading Style Sheets - RevisãoCSS - Cascading Style Sheets - Revisão
CSS - Cascading Style Sheets - Revisão
 
CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2
 
CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1
 
HTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewHTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - Review
 
HTML - HyperText Markup Language - FTP
HTML - HyperText Markup Language - FTPHTML - HyperText Markup Language - FTP
HTML - HyperText Markup Language - FTP
 
HTML - HyperText Markup Language - Organização de arquivos
HTML - HyperText Markup Language - Organização de arquivosHTML - HyperText Markup Language - Organização de arquivos
HTML - HyperText Markup Language - Organização de arquivos
 
HTML - HyperText Markup Language - 4 - Review
HTML - HyperText Markup Language - 4 - Review HTML - HyperText Markup Language - 4 - Review
HTML - HyperText Markup Language - 4 - Review
 
HTML - HyperText Markup Language - 3
HTML - HyperText Markup Language - 3HTML - HyperText Markup Language - 3
HTML - HyperText Markup Language - 3
 
HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2
 

HTML - HyperText Markup Language - Formulário

  • 1.
  • 2. • Os elementos de formulário são elementos que permitem o usuário entrar informação (como campos de texto, campos de área de texto, menus drop-down, botões de seleção única, botões de seleção múltipla, caixas de seleção, etc.) em um formulário. <form></form>
  • 3. <form> Atributos • method – método HTTP de envio das informações (POST / GET) • action – endereço a serem enviados os dados - # • enctype - multipart/form-data – para envio de arquivos <form method="#" action="POST">
  • 4. <input> Atributos • type – tipo de campo ( text / radio / checkbox / file / hidden / password ) (color / date / datetime / month / email / number / range / search / tel / time / url / week - HTML5*) • name – nome do campo a ser enviado • value – valor do campo <input type="text" name="nome" value="">
  • 5. <input> Tipo de dado Tipo de campo text Texto radio Opção, seleção única checkbox Opção, seleção múltipla file Arquivo hidden Oculto password Senha Tipo de dado Tipo de campo color Seleção de cor date Data datetime Data e Hora month Mês email E-mail number Número range Intervalo numérico search Busca tel Telefone time Hora url URL week Semana
  • 6. <textarea> Atributos • rows – quantidade de linhas (em tamanho) • cols – quantidade de colunas (em tamanho) • name – nome do campo a ser enviado • value – valor do campo <textarea name="texto">Conteúdo</textarea>
  • 7. <select> Atributos • name – nome do campo a ser enviado • multiple – quando for utilizado para seleção de múltiplos itens • Para cada opção é utilizada a tag <option> <select name="nome"> <option value="1">Opção 1</option> <option value="2">Opção 2</option> </select>
  • 8. <button> Atributos • type – tipo de botão (button | submit | reset ) <button type="submit">Enviar</button>
  • 9. <label> Atributos • for – destino quando clicado (igual ao atributo id do campo) <label for="nome"> <input type="text" name="nome" id="nome"> </label>
  • 10. Validação Obrigatoriedade de preenchimento – em HTML5 • Para tornar um campo obrigatório, em HTML5, deve-se adicionar o atributo required. <input type="text" value="Campo" required>
  • 12. • Tutorial de HTML Formulários - (http://www.hugoribeiro.com.br/Curso_HTML/html/c11.htm) • Os formulários HTML - (http://br.ccm.net/contents/238-os-formularios-html) • HTML button type Attribute - (http://www.w3schools.com/tags/att_button_type.asp)