aula_07

•

ESTÁCIO

0

Vinicius Carvalho

31.10.2012

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 3, do total de 27 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 6, do total de 27 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 9, do total de 27 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Tecnologias Web

5.974 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

Jorge Ferreira
Criando formulários em HTML
Os formulários em HTML não possuem uma 
utilidade imediata quando estamos trabalhando 
apenas com HTML, mas será muito importante 
para aquele aluno que vai continuar seus estudos 
e aprenderá uma linguagem que rode no servidor, 
como: JSP, PHP ou ASP.
Criando formulários em HTML
Tag <form>
<form>
</form>
Todos os controle para formulários 
HTML devem estar entre as tags
<form> e </form>
Criando formulários em HTML
caixas de texto
Telefone:
<input type = “text” name = “txt_telefone”/>
A tag <input> serve para criar 
vários objetos, configurados no 
parâmetro type. Todos os 
objetos de um formulário deverá
ter um nome(name).
Veja o código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Formulários</title>
</head>
<body>
<form>
Telefone:<br />
<input type="text" name="txt_telefone"/><br />
</form>
</body>
</html>
Veja como ficou!
Criando formulários em HTML
As caixas de senha apresentam os 
mesmos parâmetros das caixas de 
texto, mas apresentam a entrada 
do usuário em forma de simbolos. 
Para criar uma campo para 
senha,basta utilizar o parâmetro 
type=“password”.
Senha:<br />
<input type=“password" name="txt_senha“ size = “5” maxlength = “5”
title = “Digite sua senha”/><br />
O parâmetro maxlength é usado 
para limitar a entrada de dados 
e o parâmetro title é usado para 
apresentar uma mensagem, 
quando o usuário passar o 
mouse sobre o objeto. 
Veja o código!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<form>
Senha:<br />
<input type=“password" name="txt_senha“ size = “5” maxlength = “5 title = 
“Digite sua senha”/><br />
</form>
</body>
</html>
Veja como ficou!
Criando formulários em HTML
Resenha<br />
<textarea name="txtresenha" rows="5" 
cols="40">
</textarea>
<br /><br />
Formulários Html
Botões de rádio
Sexo:<br />
<input type = “radio” name = “radsex” value = 
“M”/>Masculino <br />
Um agrupamento de botões de rádio possuem a características de 
permitir a seleção de apenas um item. O parâmetro VALUE 
configura o valor que será enviado caso o botão seja selecionado.
Veja como ficou?
Formulários Html - Botões de rádio
<body>
<form>
Sexo:<br />
<input type = "radio" name = "radsex" value = "M" 
checked="checked"/>Masculino
<br />
<input type = "radio" name = "radsex" value = "F"/>Feminino
</form>
</body>
Veja esse código mais implementado. O parâmetro checked é
usado para determinar qual botão ficará marcado ao abrir a página.
Notem que o parâmetro radsex contém o nome igual. É usado para 
criar um grupo de botões. Com isso, ao clicar em um botão o outro é
desmarcado.
Criando Formulários – Caixas de Seleção
Cada item da caixa de 
seleção deve ser um 
elemento <OPTION>. O 
parâmetro VALUE, assim 
como em botões de rádio, 
configura o valor que será
enviado caso o item seja 
selecionado.
<body>
<form>
Estado......:
<select name = "estado" size="1">
<option value="ac"> AC </option>
<option value="al"> Al </option>
<option value="am"> AM </option>
<option value="ap"> AP </option>
<option value="ba"> BA </option>
<option value="ce"> CE </option>
<option value="df"> DF </option>
<option value="es"> ES </option>
</select>
</form>
</body>
Repare que não usamos 
todos os estados, isso fica 
como exercício para vocês.
Veja como ficou!
Criando Formulários – Caixas de Seleção
<body>
Estado.......:
<select name = "estado" size="1">
<option value="ac"> AC </option>
<option value="al"> Al </option>
<option value="am"> AM </option>
<option value="ap"> AP </option>
<option value="ba"> BA </option>
<option value="ce"> CE </option>
<option value="df"> DF </option>
<option value="es"> ES </option>
<option value="rj" selected="selected"> RJ 
</option>
</select>
</body>
Formatamos a caixa de 
seleção para uma lista de 
seleção, para isso 
acrescentamos o parâmetro 
SIZE = “3” à tag SELECT. 
Se o número de itens for 
maior que a lista, será
exibida uma barra de 
rolagem.
O parâmetro SELECTED 
que usamos neste 
exemplo serve para 
apresentar o item 
desejado quando 
carregamos a página.
<body>
<h3>Caixa de Checagem</h3>
<form>
Diversão:<br /><br />
<input type="checkbox" 
name="chkdiversao" 
value="cinema"/>Cinema <br />
<input type="checkbox" 
name="chkdiversao" 
value="Teatro"/>Teatro <br />
<input type="checkbox" 
name="chkdiversao" 
value="futebol"/>Futebol <br />
</form>
</body>
Podemos marcar mais de 
uma opção neste tipo de 
objeto.
As caixas de checagem são 
muito úteis para o caso de 
vocês precisarem deixar o 
usuário ter várias escolhas e 
poder marcar mais de uma ao 
mesmo tempo.
Veja como ficou!
Criando Formulários – Botões
<body>
<form>
<input type = "submit" value = "cadastro" />
<input type = "reset" value = "Limpar" />
</form>
</body>
Temos alguns tipos de 
botões. Os mais usados 
são: Botão SUBMIT e 
Botão RESET.
O primeiro é utilizado 
para enviar os dados de 
um formulário para outra 
página, banco e etc.
O segundo é utilizado 
para limpar o formulário 
caso o usuário tenha 
cometido algum erro.
Veja como ficou!
Exemplo de um Formulário
Exemplo de um Formulário - código
<html>
<head
<title></title>
</head>
<body>
<form>
Nome:<br />
<input type = "text" name = "txtnome" size = "40" /><br />
Endereço:<br />
<input type = "text" name = "txtend" size = "50" /><br />
Telefone:<br />
<input type = "text" name = "txttel" size = "10" /><br />
Senha:<br />
<input type="password" size = "5" maxlength = "5"
name = "txtsenha"/>
<br />
Exemplo de um Formulário - código
Resenha<br />
<textarea name="txtresenha" rows="5" cols="40">
</textarea><br /><br />
Sexo:<br />
<input type = "radio" 
name = "optsexo" value="M" checked/>
Masculino
<br />
<input type = "radio" name = "optsexo" value="F"/>
Feminino
<br /><br />
Exemplo de um Formulário - código
Estado.......:
<select name = "estado" size="1">
<option value="ac"> AC </option>
<option value="al"> Al </option>
<option value="am"> AM </option>
<option value="ap"> AP </option>
<option value="ba"> BA </option>
<option value="ce"> CE </option>
<option value="df"> DF </option>
<option value="es"> ES </option>
<option value="go"> GO </option>
<option value="ma"> MA </option>
<option value="mg"> MG </option>
<option value="ms"> MS </option>
<option value="pa"> PA </option>
<option value="pb"> PB </option>
Exemplo de um Formulário - código
<option value="pe"> PE </option>
<option value="pi"> PI </option>
<option value="pr"> PR </option>
<option value="rj"> RJ </option>
<option value="rn"> RN </option>
<option value="ro"> RO </option>
<option value="rr"> RR </option>
<option value="rs"> RS </option>
<option value="sc"> SC </option>
<option value="se"> SE </option>
<option value="sp"> SP </option>
<option value="to"> TO </option>
</select><br /><br />
Exemplo de um Formulário - código
<input type = "submit" value = "cadastro" />
<input type = "reset" value = "Limpar" />
</form>
</body>
</html>
Os formulários são usados para cadastrar, enviar dados para um email e 
muitas outras coisas.
Geralmente em SITES, os formulários são usados para criar a página 
FALE CONOSCO.
This document was created with Win2PDF available at http://www.win2pdf.com.
The unregistered version of Win2PDF is for evaluation or non-commercial use only.
This page will not be added after purchasing Win2PDF.