SlideShare uma empresa Scribd logo
1 de 12
Baixar para ler offline
• 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

Programação Multiplataforma em Ambiente Web
Programação Multiplataforma em Ambiente WebProgramação Multiplataforma em Ambiente Web
Programação Multiplataforma em Ambiente WebIsrael 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 2Israel 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 1Israel Messias
 
Arquitetura Cliente-Servidor - Modelos
Arquitetura Cliente-Servidor - ModelosArquitetura Cliente-Servidor - Modelos
Arquitetura Cliente-Servidor - ModelosIsrael Messias
 
Arquitetura Cliente-Servidor
Arquitetura Cliente-ServidorArquitetura Cliente-Servidor
Arquitetura Cliente-ServidorIsrael Messias
 
Arquitetura Cliente-Servidor - Banco de dados
Arquitetura Cliente-Servidor - Banco de dadosArquitetura Cliente-Servidor - Banco de dados
Arquitetura Cliente-Servidor - Banco de dadosIsrael 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 - CanvasIsrael 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 - ÁudioIsrael Messias
 
CSS - Cascading Style Sheets - Medidas
CSS - Cascading Style Sheets - MedidasCSS - Cascading Style Sheets - Medidas
CSS - Cascading Style Sheets - MedidasIsrael Messias
 
CSS - Cascading Style Sheets - Revisão
CSS - Cascading Style Sheets - RevisãoCSS - Cascading Style Sheets - Revisão
CSS - Cascading Style Sheets - RevisãoIsrael Messias
 
CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2Israel Messias
 
CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1Israel Messias
 
HTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewHTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewIsrael Messias
 
HTML - HyperText Markup Language - FTP
HTML - HyperText Markup Language - FTPHTML - HyperText Markup Language - FTP
HTML - HyperText Markup Language - FTPIsrael 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 arquivosIsrael 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 - 3Israel Messias
 
HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2Israel 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)