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