O documento descreve os principais elementos e atributos usados em formulários HTML, incluindo <form>, <input>, <label>, <textarea>, <select>, <option> e tipos de inputs como text, password, radio, checkbox, submit, reset, email, date e button. Explica como esses elementos constróem formulários interativos para coletar dados do usuário.

1. HTML
A alma da internet
Prof. Mauro DuarteProf. Mauro Duarte

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. Formulários
<form>
<label>Primeiro nome: </label>
<input type="text" name="firstname">
<br>
<label>Segundo nome:</label>
<input type="text" name="lastname">
</form>

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. 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. Tipos de input - “text”
<label>Seu nome</label>
<input type="text" name="nome" >
● Text é um campo de texto, aceita tudo.

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. 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. 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. 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. 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. Tipos de input - “textarea”
<textarea rows="4" cols="50">
</textarea>
Textarea cria um campo “grande” para
escrever um parágrafo.

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. Tipos de input - “email”
E-mail: <input type="email" name="email">
Filtra a entrada para e-mail solicitando “@” e
“.”.
– Html5

15. Tipos de input - “range”
<input type="range" id="a" value="50">
Range cria um seletor numérico.
– html5

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. Tipos de input - “date”
Aniversário: <input type="date" name="niver">
Filtra a entrada para datas
– Html5
– Sem suporte completo.

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. 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. 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. 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