HTML
A alma da internet
Prof. Mauro DuarteProf. Mauro Duarte
Formulários
 Formulários em HTML tem uma estrutura
básica a tag <form> inicia o formulário,
<input> recebe informações do...
Formulários
<form>
<label>Primeiro nome: </label>
<input type="text" name="firstname">
<br>
<label>Segundo nome:</label>
<...
Formulários
<form action="acao.php" method="POST">
●
A tag <form> recebe no mínimo 2 parâmetros,
●
action que define quem ...
Formulários
<label>Seu nome</label>
<input type="text" name="nome" >
●
A tag <input> recebe no mínimo 2 parâmetros,
●
type...
Tipos de input - “text”
<label>Seu nome</label>
<input type="text" name="nome" >
●
Text é um campo de texto, aceita tudo.
Tipos de input - “password”
<label>Senha</label>
<input type="password" name="pwd">
●
Password é um campo de texto, aceita...
Tipos de input - “radio”
<input type="radio" name="sexo"
value="male">Macho<br>
<input type="radio" name="sexo"
value="fem...
Tipos de input - “checkbox”
<input type="checkbox" name="vehicle"
value="Bike">Eu tenho uma Bike<br>
<input type="checkbox...
Tipos de input - “submit”
<input type="submit" value="Enviar">
submit cria um botão para enviar o formulário.
Value define...
Tipos de input - “reset”
<input type="reset" value="Limpar">
Reset cria um botão para limpar o formulário.
Value define o ...
Tipos de input - “textarea”
<textarea rows="4" cols="50">
</textarea>
Textarea cria um campo “grande” para
escrever um par...
Tipos de input - “textarea”
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value...
Tipos de input - “email”
E-mail: <input type="email" name="email">
Filtra a entrada para e-mail solicitando “@” e
“.”.
– H...
Tipos de input - “range”
<input type="range" id="a" value="50">
Range cria um seletor numérico.
– html5
Tipos de input - “color”
Escolha sua cor favorita: <input type="color"
name="favcolor">
Color cria um seletor de cores.
– ...
Tipos de input - “date”
Aniversário: <input type="date" name="niver">
Filtra a entrada para datas
– Html5
– Sem suporte co...
Tipos de input - “datetime-local”
Data e hora atual: <input type="datetime-local"
name="time">
Filtra a entrada para data ...
Tipos de input - “range”
<input type="range" name="points" min="1" max="10">
Filtra a entrada para número dentro de um
lim...
Tipos de input - “button”
<button type="button" onclick="alert('Olá Mundo!')">Me
clique</button>
Button cria um botão clic...
Tipos de input - “operadores”
<form oninput="x.value=parseInt(a.value)
+parseInt(b.value)">
<input type="number" id="a" va...
Próximos SlideShares
Carregando em…5
×

4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

930 visualizações

Publicada em

4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

Publicada em: Internet
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
930
No SlideShare
0
A partir de incorporações
0
Número de incorporações
393
Ações
Compartilhamentos
0
Downloads
36
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

  1. 1. HTML A alma da internet Prof. Mauro DuarteProf. Mauro Duarte
  2. 2. Formulários  Formulários em HTML tem uma estrutura básica a tag <form> inicia o formulário, <input> recebe informações do usuário, envia ou limpa o formulário de acordo o tipo.  Veja um exemplo
  3. 3. Formulários <form> <label>Primeiro nome: </label> <input type="text" name="firstname"> <br> <label>Segundo nome:</label> <input type="text" name="lastname"> </form>
  4. 4. Formulários <form action="acao.php" method="POST"> ● A tag <form> recebe no mínimo 2 parâmetros, ● action que define quem tratará o formulário ● method que define como será enviado as informações.
  5. 5. Formulários <label>Seu nome</label> <input type="text" name="nome" > ● A tag <input> recebe no mínimo 2 parâmetros, ● type que define o tipo. ● name que define como esta tag será lida.
  6. 6. Tipos de input - “text” <label>Seu nome</label> <input type="text" name="nome" > ● Text é um campo de texto, aceita tudo.
  7. 7. Tipos de input - “password” <label>Senha</label> <input type="password" name="pwd"> ● Password é um campo de texto, aceita tudo, entretanto esconde a digitação. – html5
  8. 8. Tipos de input - “radio” <input type="radio" name="sexo" value="male">Macho<br> <input type="radio" name="sexo" value="female">Fêmea Radio cria botões de opção, o name deve ser o mesmo para todos os seletores iguais. – html5
  9. 9. Tipos de input - “checkbox” <input type="checkbox" name="vehicle" value="Bike">Eu tenho uma Bike<br> <input type="checkbox" name="vehicle" value="Car">Eu tenho um carro ● Checkbox cria botões de marcação. – html5
  10. 10. Tipos de input - “submit” <input type="submit" value="Enviar"> submit cria um botão para enviar o formulário. Value define o texto do botão.
  11. 11. Tipos de input - “reset” <input type="reset" value="Limpar"> Reset cria um botão para limpar o formulário. Value define o texto do botão.
  12. 12. Tipos de input - “textarea” <textarea rows="4" cols="50"> </textarea> Textarea cria um campo “grande” para escrever um parágrafo.
  13. 13. Tipos de input - “textarea” <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="wv">WV</option> <option value="audi">Audi</option>  </select> select cria um campo “menu” drop-down para escolher uma opção. A tag option recebe value para criar as opções do menu. – html5
  14. 14. Tipos de input - “email” E-mail: <input type="email" name="email"> Filtra a entrada para e-mail solicitando “@” e “.”. – Html5
  15. 15. Tipos de input - “range” <input type="range" id="a" value="50"> Range cria um seletor numérico. – html5
  16. 16. Tipos de input - “color” Escolha sua cor favorita: <input type="color" name="favcolor"> Color cria um seletor de cores. – Html5 – Sem suporte completo
  17. 17. Tipos de input - “date” Aniversário: <input type="date" name="niver"> Filtra a entrada para datas – Html5 – Sem suporte completo.
  18. 18. Tipos de input - “datetime-local” Data e hora atual: <input type="datetime-local" name="time"> Filtra a entrada para data e hora atual – Html5 – Sem suporte completo.
  19. 19. Tipos de input - “range” <input type="range" name="points" min="1" max="10"> Filtra a entrada para número dentro de um limite máximo e mínimo. – Html5 – Sem suporte completo
  20. 20. Tipos de input - “button” <button type="button" onclick="alert('Olá Mundo!')">Me clique</button> Button cria um botão clicavel que executa uma tarefa. – html5
  21. 21. Tipos de input - “operadores” <form oninput="x.value=parseInt(a.value) +parseInt(b.value)"> <input type="number" id="a" value="50">  +<input type="number" id="b" value="50">  =<output name="x" for="a b"></output>  </form> O HTML5 tem suporte lógico e matemático, sumulando uma linguagem de programação. – html5

×