Top Banner
Aula 04 Marcos Devaner Programação Orientada a Objetos II Formulários HTML
15

Aula 04 - Formulários HTML

Jan 09, 2017

Download

Education

Marcos Devaner
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Aula 04 - Formulários HTML

Aula 04

Marcos Devaner

Programação Orientada a Objetos IIFormulários HTML

Page 2: Aula 04 - Formulários HTML

Formulários HTML

Os formulários em HTML são utilizados para a coleta de dados do usuário, que após podem ser manipulados com a utilização de outras linguagens como Java. Um exemplo muito comum de um formulário em HTML é o formulário de cadastro de usuários de e-mail, cujo mesmo possui campos para nome, sobrenome, data de nascimento e etc.

Page 3: Aula 04 - Formulários HTML

Organização de componentes

O fieldset é utilizado para agrupar componentes

Page 4: Aula 04 - Formulários HTML

Campos de texto

Atributos:size : define o tamanho do campomaxlength: define a quantidade de caracteres aceitavalue: atribui um valor padrão para ajudar o usuário a identificar o que deve ser preenchido.

Page 5: Aula 04 - Formulários HTML

Tipos de seleção

Atributos:value:  valor definido quando o botão for selecionado (valor que será cadastrado em um banco de dados)checked: selecionado por padrão value: valor definido quando o botão for selecionado

(valor que será cadastrado em um banco de dados)selected: opção selecionado por default.

Page 6: Aula 04 - Formulários HTML

Botões

Page 7: Aula 04 - Formulários HTML

Envio de arquivos

Atributos:accept : define o tipo de arquivo será aceito.disabled: desabilita o componente

Page 8: Aula 04 - Formulários HTML

Crie um formulário de cadastro seguindo o seguinte o modelo indicado.

Atividade

Page 9: Aula 04 - Formulários HTML

HTML 5

Para indicar que seu conteúdo HTML usa HTML5, simplesmente use: <!DOCTYPE html>

Page 10: Aula 04 - Formulários HTML

Formulários HTML 5

As características dos formulários em HTML5 proporcionam uma melhor experiência para

usuários por tornarem formulários mais consistentes entre diferentes sites e dar um

feedback imediato ao usuário sobre a entrada de dados. Eles também oferecem essa experiência para usuários que possuem scripts desabilitados

em seus navegadores.

Page 11: Aula 04 - Formulários HTML

Elementos  HTML 5 O

progres

datalist

Page 12: Aula 04 - Formulários HTML

Tipos de entrada  HTML 5 O

Você pode usar restrições utilizando os atributos:

Exemplo:• max="1979-12-31“• min="2000-01-02"

Page 13: Aula 04 - Formulários HTML

Tipos de entrada  HTML 5 O

Page 14: Aula 04 - Formulários HTML

Atributos  HTML 5 O

O autofocus atributo especifica que o campo de entrada deve receber automaticamente o foco quando a página é carregada.

Os height e width atributos especificar a altura ea largura de um <input type = "image"> elemento.

Um campo de entrada placeholder

Um campo de entrada necessário:

Tabela de atributos da HTML 5 : http://www.maujor.com/blog/pg_apoio/tabela-atributos-html5.html

Page 15: Aula 04 - Formulários HTML

Crie o formulário mostrado utilizando HTML

Atividade