SlideShare ist ein Scribd-Unternehmen logo
1 von 4
Downloaden Sie, um offline zu lesen
Universidade da Região da Campanha – Curso Técnico em Informática
Desenvolvimento para Web - Professora Denise A. de Lima / 2010


FORMULÁRIOS – PARTE 1
Elemento FORM
É um elemento que marca o início e o fim de um formulário, as tags de abertura e
fechamento são obrigatórias.

ACTION                                      METHOD
Identifica o endereço na web, onde está     Este atributo destina-se a definir o
hospedada a aplicação script que irá        método a ser usado no envio dos dados
processar o formulário. Esse atributo é     do formulário. Pode ser GET ou POST.
obrigatório.

Exemplo
<form action="http://maujor.com/prog/processa-form.php" method="post">
Campos do formulário…
</form>

 INPUT
O elemento input cria vários tipos de       ATRIBUTOS ESPECÍFICOS
campos de formulários para entrada de       Type= “text | password | checkbox |
dados. É um elemento vazio. O tipo de       radio | submit | reset | file”
controle é definido pelo atributo type.

Type= “Text”
Cria um campo para entrada de texto em uma linha




Type= “Password”
Cria um campo para entrada de senha ou dados que devem permanecer ocultos
quando digitados




Type= “Radio”
Cria botões para seleção de apenas uma alternativa.
Type= “Checkbox”
Cria caixas para seleção de mais de uma alternativa




Type= “Submit”
Cria um botão para envio de formulário




Type= “Reset”
Cria um botão que restaura o formulário a seu estado inicial




Type= “File”
Cria um campo para entrada de um arquivo local que deva ser enviado ao
servidor




Outros atributos
Name
Define um nome para o campo do elemento. O nome é usado para que scripts e outros
programas façam referência ao elemento.

Size
Define a largura aparente do campo em número de caracteres.

Maxlength
Para input dos tipos text e password. Define o número máximo de caracteres que podem
ser dados como entrada de campo.

Value
Define o valor inicial para o campo e também é usado nos campos tipos checkbox e
rádio.
Exemplo
<!-- Utilizando Formulários parao envio de dados -->
<html>
<head><title>Formulário</title></head>
<body>
<h2>Ficha cadastral | Preencha o formulário a seguir com seus dados:</h2>
<form action="mailto:denisealima@gmail.com" method="post" >
Nome:<input type= "text" name="nome" size="80" value="nome completo"><br>
<br>
Endereço:<input type="text" name="end" size="50">
<br>
<br>
CEP:<input type="text" name="cep"><br>
<br>
Telefone:<input type="text" name="DDD" size="3" maxlength="3">-<input type="text"
name="fone" size="6" maxlength="6">
<br><br>
Celular:<input type="text" name="DDD" size="3" maxlength="3">-<input type="text"
name="cel" size="6" maxlength="6">
<br><br>
E-mail:<input type="text" name="mail" size="40"><br>
<br>
Sexo:<ol>
<li><input type="radio" name="sexo" value="Masculino">Masculino
<li><input type="radio" name="sexo" value="Feminino">Feminino
</ol>
<br>
Foto
<input type="file" name="foto" value="Foto">
<br>
<br>
Quais áreas você mais se interessa:<br>
<br>
<input type=checkbox name=“opção1”>Esporte
<input type=checkbox name=“opção2”>Decoração
<input type=checkbox name=“opção3”>Notícias
<br><br>
<input type=checkbox name=“opção4”>História
<input type=checkbox name=“opção5”>Política
<input type=checkbox name=“opção6”>Beleza
<input type=checkbox name=“opção7”>Culinária
<br>
<br>
Digite uma senha:
<input type="password" name="senha" size="10" maxlength="6">
<br>
<br>
<input name="apaga" type="reset" value="Limpar Campos">
<input type="submit" value="Enviar Dados">
</form>
</body>
</html>
Resultado




Bibliografia
SILVA, Maurício Samy. Criando Sites com HTML. São Paulo: Novatec Editora, 2008.

Weitere ähnliche Inhalte

Ähnlich wie Aula formularios 1

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ídeoTiago Antônio da Silva
 
Curso de html formularios
Curso de html formulariosCurso de html formularios
Curso de html formulariosErik Cunha
 
Técnicas e processos - HTML / CSS - aula 8
Técnicas e processos - HTML / CSS - aula 8Técnicas e processos - HTML / CSS - aula 8
Técnicas e processos - HTML / CSS - aula 8Ritielle de Souza
 
Criação de formulários e tabelas com HTML
Criação de formulários e tabelas com HTMLCriação de formulários e tabelas com HTML
Criação de formulários e tabelas com HTMLLeonardo Soares
 
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
 
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
 
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
 
Aula dreamweaver criando um formulário;
Aula dreamweaver criando um formulário;Aula dreamweaver criando um formulário;
Aula dreamweaver criando um formulário;Élida Tavares
 

Ähnlich wie Aula formularios 1 (20)

Aula 5 php
Aula 5 phpAula 5 php
Aula 5 php
 
Formularios
FormulariosFormularios
Formularios
 
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
 
Ambiente web 12
Ambiente web 12Ambiente web 12
Ambiente web 12
 
Curso de html formularios
Curso de html formulariosCurso de html formularios
Curso de html formularios
 
07 html formulários
07 html   formulários07 html   formulários
07 html formulários
 
Aula3 xhtml
Aula3 xhtmlAula3 xhtml
Aula3 xhtml
 
Técnicas e processos - HTML / CSS - aula 8
Técnicas e processos - HTML / CSS - aula 8Técnicas e processos - HTML / CSS - aula 8
Técnicas e processos - HTML / CSS - aula 8
 
Criação de formulários e tabelas com HTML
Criação de formulários e tabelas com HTMLCriação de formulários e tabelas com HTML
Criação de formulários e tabelas com HTML
 
Formulários em html
Formulários em htmlFormulários em html
Formulários em html
 
Aplicativo aula05
Aplicativo aula05Aplicativo aula05
Aplicativo aula05
 
Html5 Aula 4
Html5 Aula 4Html5 Aula 4
Html5 Aula 4
 
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)
 
Php05
Php05Php05
Php05
 
HTML - Guia 3
HTML - Guia 3HTML - Guia 3
HTML - Guia 3
 
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)
 
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
 
Php Básico - Parte 2
Php Básico - Parte 2Php Básico - Parte 2
Php Básico - Parte 2
 
Aula dreamweaver criando um formulário;
Aula dreamweaver criando um formulário;Aula dreamweaver criando um formulário;
Aula dreamweaver criando um formulário;
 

Mehr von Denise Lima

Alfabetismo visual elementos_sintaticos2
Alfabetismo visual elementos_sintaticos2Alfabetismo visual elementos_sintaticos2
Alfabetismo visual elementos_sintaticos2Denise Lima
 
Movimentos artísticos início século XX
Movimentos artísticos início século XXMovimentos artísticos início século XX
Movimentos artísticos início século XXDenise Lima
 
Bauhaus & Estilo Internacional
Bauhaus & Estilo InternacionalBauhaus & Estilo Internacional
Bauhaus & Estilo InternacionalDenise Lima
 
Artigo cientifico
Artigo cientificoArtigo cientifico
Artigo cientificoDenise Lima
 
Orientação para o projeto de pesquisa
Orientação para o projeto de pesquisaOrientação para o projeto de pesquisa
Orientação para o projeto de pesquisaDenise Lima
 
Tecnicas para composição.
Tecnicas para composição.Tecnicas para composição.
Tecnicas para composição.Denise Lima
 
Classificacao tipografia
Classificacao tipografiaClassificacao tipografia
Classificacao tipografiaDenise Lima
 
Dicas assombrosas
Dicas assombrosasDicas assombrosas
Dicas assombrosasDenise Lima
 
Alternativas ao estilo internacional
Alternativas ao estilo internacionalAlternativas ao estilo internacional
Alternativas ao estilo internacionalDenise Lima
 
Design antes do design
Design antes do designDesign antes do design
Design antes do designDenise Lima
 
Dreamweaver - configurando o servidor remoto
Dreamweaver - configurando o servidor remotoDreamweaver - configurando o servidor remoto
Dreamweaver - configurando o servidor remotoDenise Lima
 
Trabalho layout elastico
Trabalho layout elasticoTrabalho layout elastico
Trabalho layout elasticoDenise Lima
 
CSS parte II pdf...
CSS parte II pdf...CSS parte II pdf...
CSS parte II pdf...Denise Lima
 

Mehr von Denise Lima (20)

Alfabetismo visual elementos_sintaticos2
Alfabetismo visual elementos_sintaticos2Alfabetismo visual elementos_sintaticos2
Alfabetismo visual elementos_sintaticos2
 
Movimentos artísticos início século XX
Movimentos artísticos início século XXMovimentos artísticos início século XX
Movimentos artísticos início século XX
 
Pós modernismo
Pós modernismoPós modernismo
Pós modernismo
 
Pop art
Pop artPop art
Pop art
 
Pop art
Pop artPop art
Pop art
 
Bauhaus & Estilo Internacional
Bauhaus & Estilo InternacionalBauhaus & Estilo Internacional
Bauhaus & Estilo Internacional
 
Artigo cientifico
Artigo cientificoArtigo cientifico
Artigo cientifico
 
Orientação para o projeto de pesquisa
Orientação para o projeto de pesquisaOrientação para o projeto de pesquisa
Orientação para o projeto de pesquisa
 
Tecnicas para composição.
Tecnicas para composição.Tecnicas para composição.
Tecnicas para composição.
 
Classificacao tipografia
Classificacao tipografiaClassificacao tipografia
Classificacao tipografia
 
Dicas assombrosas
Dicas assombrosasDicas assombrosas
Dicas assombrosas
 
Raizes design
Raizes designRaizes design
Raizes design
 
Alternativas ao estilo internacional
Alternativas ao estilo internacionalAlternativas ao estilo internacional
Alternativas ao estilo internacional
 
Design antes do design
Design antes do designDesign antes do design
Design antes do design
 
Dreamweaver - configurando o servidor remoto
Dreamweaver - configurando o servidor remotoDreamweaver - configurando o servidor remoto
Dreamweaver - configurando o servidor remoto
 
Trabalho layout elastico
Trabalho layout elasticoTrabalho layout elastico
Trabalho layout elastico
 
Css parte iii_b
Css parte iii_bCss parte iii_b
Css parte iii_b
 
Css parte iii_a
Css parte iii_aCss parte iii_a
Css parte iii_a
 
CSS parte II pdf...
CSS parte II pdf...CSS parte II pdf...
CSS parte II pdf...
 
Css parte II
Css parte IICss parte II
Css parte II
 

Aula formularios 1

  • 1. Universidade da Região da Campanha – Curso Técnico em Informática Desenvolvimento para Web - Professora Denise A. de Lima / 2010 FORMULÁRIOS – PARTE 1 Elemento FORM É um elemento que marca o início e o fim de um formulário, as tags de abertura e fechamento são obrigatórias. ACTION METHOD Identifica o endereço na web, onde está Este atributo destina-se a definir o hospedada a aplicação script que irá método a ser usado no envio dos dados processar o formulário. Esse atributo é do formulário. Pode ser GET ou POST. obrigatório. Exemplo <form action="http://maujor.com/prog/processa-form.php" method="post"> Campos do formulário… </form> INPUT O elemento input cria vários tipos de ATRIBUTOS ESPECÍFICOS campos de formulários para entrada de Type= “text | password | checkbox | dados. É um elemento vazio. O tipo de radio | submit | reset | file” controle é definido pelo atributo type. Type= “Text” Cria um campo para entrada de texto em uma linha Type= “Password” Cria um campo para entrada de senha ou dados que devem permanecer ocultos quando digitados Type= “Radio” Cria botões para seleção de apenas uma alternativa.
  • 2. Type= “Checkbox” Cria caixas para seleção de mais de uma alternativa Type= “Submit” Cria um botão para envio de formulário Type= “Reset” Cria um botão que restaura o formulário a seu estado inicial Type= “File” Cria um campo para entrada de um arquivo local que deva ser enviado ao servidor Outros atributos Name Define um nome para o campo do elemento. O nome é usado para que scripts e outros programas façam referência ao elemento. Size Define a largura aparente do campo em número de caracteres. Maxlength Para input dos tipos text e password. Define o número máximo de caracteres que podem ser dados como entrada de campo. Value Define o valor inicial para o campo e também é usado nos campos tipos checkbox e rádio.
  • 3. Exemplo <!-- Utilizando Formulários parao envio de dados --> <html> <head><title>Formulário</title></head> <body> <h2>Ficha cadastral | Preencha o formulário a seguir com seus dados:</h2> <form action="mailto:denisealima@gmail.com" method="post" > Nome:<input type= "text" name="nome" size="80" value="nome completo"><br> <br> Endereço:<input type="text" name="end" size="50"> <br> <br> CEP:<input type="text" name="cep"><br> <br> Telefone:<input type="text" name="DDD" size="3" maxlength="3">-<input type="text" name="fone" size="6" maxlength="6"> <br><br> Celular:<input type="text" name="DDD" size="3" maxlength="3">-<input type="text" name="cel" size="6" maxlength="6"> <br><br> E-mail:<input type="text" name="mail" size="40"><br> <br> Sexo:<ol> <li><input type="radio" name="sexo" value="Masculino">Masculino <li><input type="radio" name="sexo" value="Feminino">Feminino </ol> <br> Foto <input type="file" name="foto" value="Foto"> <br> <br> Quais áreas você mais se interessa:<br> <br> <input type=checkbox name=“opção1”>Esporte <input type=checkbox name=“opção2”>Decoração <input type=checkbox name=“opção3”>Notícias <br><br> <input type=checkbox name=“opção4”>História <input type=checkbox name=“opção5”>Política <input type=checkbox name=“opção6”>Beleza <input type=checkbox name=“opção7”>Culinária <br> <br> Digite uma senha: <input type="password" name="senha" size="10" maxlength="6"> <br> <br> <input name="apaga" type="reset" value="Limpar Campos"> <input type="submit" value="Enviar Dados"> </form> </body> </html>
  • 4. Resultado Bibliografia SILVA, Maurício Samy. Criando Sites com HTML. São Paulo: Novatec Editora, 2008.