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.
Direitos autorais
© © All Rights Reserved
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.
Direitos autorais
© © All Rights Reserved
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

________________________________________________________________________________________
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

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

________________________________________________________________________________________
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

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.

________________________________________________________________________________________
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.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.

________________________________________________________________________________________
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

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.

________________________________________________________________________________________
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.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.

________________________________________________________________________________________
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

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.

________________________________________________________________________________________
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

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.

________________________________________________________________________________________
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.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.

________________________________________________________________________________________
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.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:

________________________________________________________________________________________
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

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.

________________________________________________________________________________________
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

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.

________________________________________________________________________________________
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

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.

________________________________________________________________________________________
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

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.

________________________________________________________________________________________
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

Ajustando o tamanho da janela do fieldset via CSS.

Inserindo título para a janela fieldset.

________________________________________________________________________________________
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

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.

________________________________________________________________________________________
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

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.

________________________________________________________________________________________
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

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.

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

Você também pode gostar