Aula 04
Aula 04
Administração Central
Cetec Capacitações
Semana 4
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.
________________________________________________________________________________________
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
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.
________________________________________________________________________________________
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.
________________________________________________________________________________________
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
________________________________________________________________________________________
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.
________________________________________________________________________________________
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
________________________________________________________________________________________
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
________________________________________________________________________________________
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
________________________________________________________________________________________
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 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.
________________________________________________________________________________________
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
________________________________________________________________________________________
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
________________________________________________________________________________________
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 ...
________________________________________________________________________________________
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
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
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
________________________________________________________________________________________
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:
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.
________________________________________________________________________________________
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
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