O documento descreve como criar diferentes tipos de campos em formulários HTML, incluindo caixas de texto, senhas, botões de opção única e múltipla, menus suspensos e botões de envio. Ele também menciona a tag <marquee> para movimentar objetos em uma página.

1. Anderson H.
Turma:
xxxxxx
2503-B
Aula:
10
Pág:
10 a 17
Extra
Instrutor: Ricardo Paladini Matos
Data:
18-jan-12
2/1/2014

2. 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.
Turma:
xxxxxx
2503-B
Aula:
10
Pág:
10 a 17
Extra
Instrutor: Ricardo Paladini Matos
Data:
18-jan-12
2/1/2014

3. 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.
Turma:
xxxxxx
2503-B
Aula:
10
Pág:
10 a 17
Extra
Instrutor: Ricardo Paladini Matos
Data:
18-jan-12
2/1/2014

4. 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
Turma:
xxxxxx
2503-B
Aula:
10
Pág:
10 a 17
Extra
Instrutor: Ricardo Paladini Matos
Data:
18-jan-12
2/1/2014

5. 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
Turma:
xxxxxx
2503-B
Aula:
10
Pág:
10 a 17
Extra
Instrutor: Ricardo Paladini Matos
Data:
18-jan-12
2/1/2014

6. Anderson H.
Para criarmos um campo para inserir
senhas:
<form name="form1" method="post" action="">
<input name="textfield" type="password"
value="">
Exemplo
Turma:
xxxxxx
2503-B
Aula:
10
Pág:
10 a 17
Extra
Instrutor: Ricardo Paladini Matos
Data:
18-jan-12
2/1/2014

7. Anderson H.
Para criarmos um campo para seleção de um ou vários itens:
<input type="checkbox" name="checkbox" value="checkbox">
Exemplo
Turma:
xxxxxx
2503-B
Aula:
10
Pág:
10 a 17
Extra
Instrutor: Ricardo Paladini Matos
Data:
18-jan-12
2/1/2014

8. Anderson H.
Exemplo
Turma:
xxxxxx
2503-B
Aula:
10
Pág:
10 a 17
Extra
Instrutor: Ricardo Paladini Matos
Data:
18-jan-12
2/1/2014

9. 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
Turma:
xxxxxx
2503-B
Aula:
10
Pág:
10 a 17
Extra
Instrutor: Ricardo Paladini Matos
Data:
18-jan-12
2/1/2014

10. Anderson H.
Exemplo
Turma:
xxxxxx
2503-B
Aula:
10
Pág:
10 a 17
Extra
Instrutor: Ricardo Paladini Matos
Data:
18-jan-12
2/1/2014

11. Anderson H.
• Criaremos um botão para seleção de uma opção
apenas.
• <select name="select">
•
<option>Masculino</option>
•
<option>Feminino</option>
• </select>
Turma:
xxxxxx
2503-B
Aula:
10
Pág:
Exemplo
10 a 17
Extra
Instrutor: Ricardo Paladini Matos
Data:
18-jan-12
2/1/2014

12. 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
Turma:
xxxxxx
2503-B
Aula:
10
Pág:
10 a 17
Extra
Instrutor: Ricardo Paladini Matos
Data:
18-jan-12
2/1/2014

13. Anderson H.
•
Criando um botão para procurar um arquivo:
Exemplo
• <input type="file" name="file">
Turma:
xxxxxx
2503-B
Aula:
10
Pág:
10 a 17
Extra
Instrutor: Ricardo Paladini Matos
Data:
18-jan-12
2/1/2014

14. Anderson H.
• Criando um botão para enviar os dados do formulário:
• <input type="submit" name="Submit" value="Enviar">
Exemplo
Turma:
xxxxxx
2503-B
Aula:
10
Pág:
10 a 17
Extra
Instrutor: Ricardo Paladini Matos
Data:
18-jan-12
2/1/2014

15. Anderson H.
• Tag Marquee
• Essa tag serve para dar movimento em objetos em nossa página.
Exemplo
Turma:
xxxxxx
2503-B
Aula:
10
Pág:
10 a 17
Extra
Instrutor: Ricardo Paladini Matos
Data:
18-jan-12
2/1/2014