0% acharam este documento útil (0 voto)

24 visualizações19 páginas

Aula 04

O documento discute os elementos e propriedades relacionados a formulários HTML, incluindo o elemento form, propriedades como action e method, e elementos de entrada como input, textarea e label.

Enviado por

oliveira1342contato

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

24 visualizações19 páginas

Aula 04

O documento discute os elementos e propriedades relacionados a formulários HTML, incluindo o elemento form, propriedades como action e method, e elementos de entrada como input, textarea e label.

Enviado por

oliveira1342contato

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 19

____________________________________________

Administração Central
Cetec Capacitações

Atualização em Programação para WEB

HTML e CSS

Prof. Adriano Cilhos Doimo

Semana 4

Assuntos que serão abordados:

1 Formulário .............................................................................................................. 2
1.1 Elemento form .................................................................................................. 2
1.2 Propriedade action ............................................................................................. 2
1.3 Propriedade name ............................................................................................. 3
1.4 Propriedade method .......................................................................................... 3
1.5 Elemento input e a propriedade type.................................................................... 4
1.5.1 Caixa de texto (uma linha) .............................................................................. 4
1.5.2 Entradas de senha.......................................................................................... 5
1.5.3 Limitando a entrada de dados .......................................................................... 5
1.5.4 Valores padrão em caixa de texto..................................................................... 6
1.5.5 Os elementos submit e reset ........................................................................... 6
1.5.6 Caixas de seleção........................................................................................... 7
1.5.7 Botões de opção............................................................................................. 8
1.5.8 Campos ocultos.............................................................................................. 9
1.5.9 Substituindo botões submit e reset por imagens .............................................. 10
1.5.10 Personalizando botões ............................................................................... 11
2 Botões fora do formulário........................................................................................ 11
3 Menus suspensos (combo) ...................................................................................... 13
4 Elemento textarea.................................................................................................. 14
5 Agrupando campos................................................................................................. 15
6 Uso de label .......................................................................................................... 17
7 Campos somente para leitura .................................................................................. 18
8 Desabilitar e habilitar controles ................................................................................ 19

________________________________________________________________________________________
www.centropaulasouza.sp.gov.br
Rua dos Andradas, 140 • Santa Ifigênia • 01208-000 • São Paulo • SP • Tel.: (11) 3324.3300
____________________________________________

Administração Central
Cetec Capacitações

1 Formulário
O formulário é a base para páginas que oferecem maior interatividade com o usuário,
servindo como um repositório para vários controles que forma a sua estrutura.

1.1 Elemento form

O elemento <form> identifica os limites de um formulário dentro de uma página. Cada
form representa uma estrutura única. Podemos ter vários forms em uma única página, mas
devidamente agrupados.

Fig. 1 - Elemento form

1.2 Propriedade action

Para que o conteúdo de um formulário seja processado, as informações deverão ser
repassadas para outra página, geralmente esta página é escrita em Java, PHP, ASP entre
outras linguagens. Na chamada do action, deverá ser identificado o nome do arquivo que
receberá estes dados, em tempos de desenvolvimento a propriedade poderá ficar em branco.

Fig. 2 - Propriedade action

Administração Central
Cetec Capacitações

Ao clicarmos no botão “Enviar” teremos um erro de página caso o arquivo

cadastro.php não exista.

1.3 Propriedade name

A propriedade name é bastante útil para validação e controle dos dados, procure deixar
sempre o formulário identificado para que posteriormente o JavaScript e demais linguagens,
tenham acesso aos dados do formulário.

Fig. 3 - Propriedade name

1.4 Propriedade method

Para envio do conteúdo é preciso definir o método http que será utilizado para a
transação dos dados. A propriedade method aceita dois valores:

get: é utilizado quando os dados do formulário não tem a necessidade de ficar oculto
ao usuário, pois as informações são visualizadas na URL quando o submit é acionado. É
bastante utilizado quando o usuário deseja recuperar URL com informações que serão tratadas
por outras páginas, um bom exemplo são os sites de compras, botões de pesquisa, etc.

Fig. 4 - Propriedade method get

Administração Central
Cetec Capacitações

post: usado quando o formulário remete dados que devem ser ocultos e principalmente
enviados para banco de dados, sendo assim, as informações não serão visualizadas na URL.

Fig. 5 - Propriedade method post

1.5 Elemento input e a propriedade type

O elemento input é utilizado para inserir controles no formulário, por meio da
propriedade type definimos qual o tipo de controle será utilizado, são eles: text, password,
checkbox, radio, submit, reset, hidden, image e button.

1.5.1 Caixa de texto (uma linha)

São os controles mais utilizados, permite a entrada de dados em uma única linha.

Fig. 6 - Caixa de texto (uma linha)

Observe o uso da propriedade name, é através deste identificador que teremos os

dados recuperados posteriormente.

Administração Central
Cetec Capacitações

1.5.2 Entradas de senha

Utilize o tipo password, para entradas do tipo senha, ou para qualquer outra entrada
onde os caracteres de entrada deverão permanecer ocultos.

1.5.3 Limitando a entrada de dados

As propriedades size e maxlength geralmente são utilizadas em conjunto, onde size
define o tamanho da janela e maxlength a quantidade de caracteres a serem digitados.

Neste caso a janela de entrada (caixa de texto), possui 50 caracteres de largura e

deverá receber no máximo 45 caracteres.
Caso a sua janela de entrada seja menor que a quantidade de caracteres a serem
digitados, não se preocupe, pois, o rolamento de caracteres deverá ocorrer normalmente.

Administração Central
Cetec Capacitações

Alguns navegadores podem não interpretar corretamente a instrução size, desta forma
temos que utilizar CSS.

Ao utilizarmos a propriedade width, a tamanho deverá estar em pixel.

1.5.4 Valores padrão em caixa de texto

A propriedade value, permite definir um valor padrão para entrada na caixa de texto.

1.5.5 Os elementos submit e reset

O elemento submit é o botão que permite que os dados do formulário sejam enviados
e o elemento reset permite limpar os campos ou retorná-lo ao valor padrão.

Administração Central
Cetec Capacitações

1.5.6 Caixas de seleção

O tipo checkbox, permite criar caixas de seleção.

Não se esqueça de utilizar a propriedade name para posteriormente recuperar os

dados. Para ajudar no processo de recuperação, valores poderão ser indicados nos elementos
checkbox através da propriedade value, assim a recuperação fica mais fácil.
Durante o envio do formulário, somente as caixas selecionadas terão os valores
enviados.

Administração Central
Cetec Capacitações

Neste exemplo será considerado sim, somente para as opções selecionadas.

Para deixar uma caixa já selecionada utilize a propriedade checked.

1.5.7 Botões de opção

Semelhante checkbox em sua estrutura, o radio permite que o usuário selecione uma
opção em uma coleção, mas para que isso ocorra à propriedade name deverá possuir o mesmo
identificador.

Administração Central
Cetec Capacitações

Assim como no checkbox as propriedades value e checked são aceitas.

1.5.8 Campos ocultos

Os campos ocultos permitem a passagem de valores para a página que irá processá-los
sem a necessidade de apresentá-los ao usuário auxiliando no processo de desenvolvimento.
Um bom exemplo é passar o ID de um elemento do banco de dados para recuperá-lo
posteriormente, é importante que a propriedade value e name esteja devidamente preenchida.

Administração Central
Cetec Capacitações

1.5.9 Substituindo botões submit e reset por imagens

O processo é bem simples, substitua o tipo para image, veja o exemplo:

O tipo image reconhece somente a função submit. Mas agora como image para os
botões submit e reset ao mesmo tempo? Vamos contornar a situação fazendo uma simulação
para um dos botões.

Note que no evento onclick, deverá ocorrer à indicação do nome do formulário.

Outra forma para resolver o problema e criar um link sem redirecionamento.

Administração Central
Cetec Capacitações

1.5.10 Personalizando botões

Podemos definir botões do tipo button, o único cuidado com este tipo de elemento é a
responsabilidade em realizar a programação do mesmo.

onclick="window.history.back()", somente terá efeito se o navegador abriu outras

páginas antes desta.

2 Botões fora do formulário

O elemento button, permite diferentes tipos de aplicações fora do formulário, mas não
podemos deixar de programá-los, veja o exemplo:

Bonitos, mas não funcionais. Vamos ao que interessa:

Administração Central
Cetec Capacitações

Programando link no botão.

Programando o botão de atualizar página.

Programado o botão de impressão.

Criatividade com o uso do botão.

Administração Central
Cetec Capacitações

Ou ...

3 Menus suspensos (combo)

O elemento select permite criar uma lista de opção.

Caso seja necessário podemos indicar um elemento pré-selecionado, usando a

propriedade selected.

Administração Central
Cetec Capacitações

O importante é controlar os valores de retorno para as opções (option) indicadas pelo

usuário, para isso fazemos o uso da propriedade value.

4 Elemento textarea
O elemento textarea permite a criação de caixas de texto de mais de uma linha, sua
criação é bem simples.

Administração Central
Cetec Capacitações

Para ajustar o tamanho da janela utilize as propriedades col e rows.

5 Agrupando campos
O elemento fieldset, permite agrupar os campos de um formulário em uma janela,
dando uma aparência mais agradável.

Administração Central
Cetec Capacitações

Ajustando o tamanho da janela do fieldset via CSS.

Inserindo título para a janela fieldset.

Administração Central
Cetec Capacitações

6 Uso de label
Permite criar um título para os elementos de entrada, o qual pode ser usado de duas
formas:

A primeira seria como rótulo de um elemento de entrada.

Na segunda opção com mais recurso. Veja no código e o relacionamento que ocorreu
entre o label e o elemento de entrada, agora com o identificar id.

Administração Central
Cetec Capacitações

Melhorando o código.

Use as teclas ALT+N e ALT+M, para testar o efeito. Cuidado com as teclas de atalho do
navegador.

7 Campos somente para leitura

A propriedade readonly, através dos valores true e false, permite que informações
sejam visualizadas, mas não alteradas.

Administração Central
Cetec Capacitações

8 Desabilitar e habilitar controles

A propriedade disabled, permite habilitar e desabilitar um controle através dos valores
true e false.

IMPORTANTE:
Alguns navegadores não reconhecem o valor false para algumas propriedades, desta
forma omita completamente.

Aula 04

Enviado por

Aula 04

Enviado por

____________________________________________

Atualização em Programação para WEB

Prof. Adriano Cilhos Doimo

Assuntos que serão abordados:

1.1 Elemento form

Fig. 1 - Elemento form

1.2 Propriedade action

Fig. 2 - Propriedade action

Ao clicarmos no botão “Enviar” teremos um erro de página caso o arquivo

1.3 Propriedade name

Fig. 3 - Propriedade name

1.4 Propriedade method

Fig. 4 - Propriedade method get

Fig. 5 - Propriedade method post

1.5 Elemento input e a propriedade type

1.5.1 Caixa de texto (uma linha)

Fig. 6 - Caixa de texto (uma linha)

Observe o uso da propriedade name, é através deste identificador que teremos os

1.5.2 Entradas de senha

1.5.3 Limitando a entrada de dados

Neste caso a janela de entrada (caixa de texto), possui 50 caracteres de largura e

Ao utilizarmos a propriedade width, a tamanho deverá estar em pixel.

1.5.4 Valores padrão em caixa de texto

1.5.5 Os elementos submit e reset

1.5.6 Caixas de seleção

Não se esqueça de utilizar a propriedade name para posteriormente recuperar os

Neste exemplo será considerado sim, somente para as opções selecionadas.

Para deixar uma caixa já selecionada utilize a propriedade checked.

1.5.7 Botões de opção

Assim como no checkbox as propriedades value e checked são aceitas.

1.5.8 Campos ocultos

1.5.9 Substituindo botões submit e reset por imagens

Note que no evento onclick, deverá ocorrer à indicação do nome do formulário.

Outra forma para resolver o problema e criar um link sem redirecionamento.

1.5.10 Personalizando botões

onclick="window.history.back()", somente terá efeito se o navegador abriu outras

2 Botões fora do formulário

Bonitos, mas não funcionais. Vamos ao que interessa:

Programando link no botão.

Programando o botão de atualizar página.

Programado o botão de impressão.

Criatividade com o uso do botão.

3 Menus suspensos (combo)

Caso seja necessário podemos indicar um elemento pré-selecionado, usando a

O importante é controlar os valores de retorno para as opções (option) indicadas pelo

Para ajustar o tamanho da janela utilize as propriedades col e rows.

Ajustando o tamanho da janela do fieldset via CSS.

Inserindo título para a janela fieldset.

A primeira seria como rótulo de um elemento de entrada.

7 Campos somente para leitura

8 Desabilitar e habilitar controles

Você também pode gostar