Download - Web12 ambiente web (extra iii)
Aula: Pág: Data:10 10 a 17 18-jan-122503-BTurma:
Instrutor: Ricardo Paladini Matos
xxxxxx Extra 2/1/2014
Anderson H.
Aula: Pág: Data:10 10 a 17 18-jan-122503-BTurma:
Instrutor: Ricardo Paladini Matos
xxxxxx Extra 2/1/2014
Anderson H.
• Tags de Formulário
Vamos supor que você queira limitar conteúdo a um
determinado grupo de usuários. Por exemplo, só
poderão baixar músicas aqueles usuários que forem
cadastrados no seu site, ou então, só poderão
acessar uma página se for cadastrado no site.
Para isso, devemos criar um formulário, onde o
nosso usuário deverá preenche-lo e enviá-lo para
que o cadastro seja efetivado.
Aula: Pág: Data:10 10 a 17 18-jan-122503-BTurma:
Instrutor: Ricardo Paladini Matos
xxxxxx Extra 2/1/2014
Anderson H.
text - campo de texto simples
password - campo de texto para digitação de senha. Os valores são
mostrados com *******
radio - criar botões de seleção de escolha única.
checkbox - cria botões de seleção de múltipla escolha
submit - criar botões que irão postar os dados do form quando clicado
reset - cria botões que vão apagar os dados do form quando clicado
button - cria botões sem ação nenhuma, usado para eventos de javascript.
Aula: Pág: Data:10 10 a 17 18-jan-122503-BTurma:
Instrutor: Ricardo Paladini Matos
xxxxxx Extra 2/1/2014
Anderson H.
Vamos criar uma caixa onde o usuário poderá digitar um
pequeno texto.
Para iniciar a criação do formulário utilizaremos a tag <FORM>
<form name="form1" method="post" action="">
<input type="text" name="textfield">
Nesse caso nós criamos uma caixa de texto em uma linha.
Exemplo
Aula: Pág: Data:10 10 a 17 18-jan-122503-BTurma:
Instrutor: Ricardo Paladini Matos
xxxxxx Extra 2/1/2014
Anderson H.
Agora, vamos mudar apenas a última linha desse código para
criar uma caixa de texto com várias linhas.
<form name="form1" method="post" action="">
<textarea name="textfield"></textarea>
Exemplo
Aula: Pág: Data:10 10 a 17 18-jan-122503-BTurma:
Instrutor: Ricardo Paladini Matos
xxxxxx Extra 2/1/2014
Anderson H.
Para criarmos um campo para inserir
senhas:
<form name="form1" method="post" action="">
<input name="textfield" type="password"
value="">
Exemplo
Aula: Pág: Data:10 10 a 17 18-jan-122503-BTurma:
Instrutor: Ricardo Paladini Matos
xxxxxx Extra 2/1/2014
Anderson H.
Para criarmos um campo para seleção de um ou vários itens:
<input type="checkbox" name="checkbox" value="checkbox">
Exemplo
Aula: Pág: Data:10 10 a 17 18-jan-122503-BTurma:
Instrutor: Ricardo Paladini Matos
xxxxxx Extra 2/1/2014
Anderson H.
Exemplo
Aula: Pág: Data:10 10 a 17 18-jan-122503-BTurma:
Instrutor: Ricardo Paladini Matos
xxxxxx Extra 2/1/2014
Anderson H.
Agora, nós vamos criar um botão onde podemos marcar apenas uma
opção.
<input type="radio" name="radiobutton" value="radiobutton">
Exemplo
Aula: Pág: Data:10 10 a 17 18-jan-122503-BTurma:
Instrutor: Ricardo Paladini Matos
xxxxxx Extra 2/1/2014
Anderson H.
Exemplo
Aula: Pág: Data:10 10 a 17 18-jan-122503-BTurma:
Instrutor: Ricardo Paladini Matos
xxxxxx Extra 2/1/2014
Anderson H.
• Criaremos um botão para seleção de uma opção apenas.
• <select name="select">
• <option>Masculino</option>
• <option>Feminino</option>
• </select>
Exemplo
Aula: Pág: Data:10 10 a 17 18-jan-122503-BTurma:
Instrutor: Ricardo Paladini Matos
xxxxxx Extra 2/1/2014
Anderson H.
• Botões de salto ou menus Pou-Up.
• <select name="menu1" onChange="MM_jumpMenu('parent',this,0)">
• <option selected>Animais</option>
• <option>Tigres</option>
• <option>Leões</option>
• <option>Ursos</option>
• <option>Onças</option>
• </select>
Exemplo
Aula: Pág: Data:10 10 a 17 18-jan-122503-BTurma:
Instrutor: Ricardo Paladini Matos
xxxxxx Extra 2/1/2014
Anderson H.
• Criando um botão para procurar um arquivo:
• <input type="file" name="file">
Exemplo
Aula: Pág: Data:10 10 a 17 18-jan-122503-BTurma:
Instrutor: Ricardo Paladini Matos
xxxxxx Extra 2/1/2014
Anderson H.
• Criando um botão para enviar os dados do formulário:
• <input type="submit" name="Submit" value="Enviar">
Exemplo
Aula: Pág: Data:10 10 a 17 18-jan-122503-BTurma:
Instrutor: Ricardo Paladini Matos
xxxxxx Extra 2/1/2014
Anderson H.
• Tag Marquee
• Essa tag serve para dar movimento em objetos em nossa página.
Exemplo