Formulário Controles(X)HTML

Professor Jolvani

Aulas 23 e 24

Formulário Controles - (X)HTMLBem vindos a aula de Formulário e controlesNesta aula iremos aprender como

funcionam os formuláriosSão páginas web que permitem ao usuário

inserir informações... Ver exemplo facebook

Criamos nossa próxima aula – Aula18.html

Formulário Controles - (X)HTML Criar tag para formulário <form> Quais são os controles de formulário? São os campos que

permitem a inserção das informações nas páginas.. Atributo importante dos forms – action que informa para onde

devo submeter os dados no servidor (para uma linguagem dinâmica ou para um script dinâmico.) ex:

Outro atributo -> method que indica o método de envio das informações. Temos dois métodos o POST que envia os dados sem que conseguimos visualizar os dados enviados e o GET que encaminha as informações pela url ...

Construindo nosso form....

Formulário Controles - (X)HTML Construindo nosso form....

Temos vários outros controles (componentes).. Adicionando ao nosso form.

Controle para senha (type = “password”) Controle para sexo (type = “radio” – radio button) Controle para + mais de uma seleção (type = “checkbox”) Veja o funcionamento desses componentes...

Formulário Controles - (X)HTML

Formulários

Componentes

Formulário Controles - (X)HTML Veja o resultado.

Formulário Controles - (X)HTML Outros Componentes. Campo para currículo (em pdf ou formato doc) (type=“file”) ou

para adicionar um determinado arquivo....

Controle para enviar os dados... (type=“submit”) (existem outros)

Limpar dados do formulário (type=“reset”) Componente butoon para validar dados do formulário (através d

um script = javascript por exemplo) (type=“button”)

Ver o funcionamento dos componentes...

Formulário Controles - (X)HTML Resultado dos novos Componentes.

O botão enviar irá mandar os dados para onde o atributo action esta especificado..

O botão reset permite limpar os dados do formulário Já o botão “button” é um componente genérico que possibilita a

criação de scripts para validação de dados por exemplo.

Formulário Controles – Parte 2 Aula 24. Temos ainda outros elementos...

Formulário Controles - (X)HTML Elementos de seleção – select

Colocando um valor default para o select.

Formulário Controles - (X)HTML Elementos de seleção – select agrupados...

Formulário Controles - (X)HTML O Elemento – textArea... Permite escrevermos em uma

área de texto.

Outros atributos....

Próxima Aula: Formulários Acessibilidade