4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)
0 gostou1,105 visualizações
O documento descreve os principais elementos de formulários em HTML, incluindo as tags <form> e <input> e seus diferentes tipos como texto, senha, botões de opção, caixas de seleção e menus suspensos. Também explica outros elementos como textareas, campos de email e seletores numéricos.
4 - 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
- 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