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.
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
4 si introdução ao desenvolvimento web - formulários (pt 1)
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
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