Download
1 / 38
380 likes | 519 Views
Programação WEB. Prof. Flávio Izo. Aula 05 Introdução ao Formulários. Objetivos da Aula. 1.0 Tabela; 2.0 Tabela (Dinâmica - PHP); 3.0 Formulários em HTML; 4.0 Formulários em HTML 5.0 Detalhando os campos do formulário (revisão) 6.0 Formulários em HTML – Exemplos 7.0 Exercício.
E N D
Programação WEB Prof. Flávio Izo Aula 05 Introdução ao Formulários
Objetivos da Aula • 1.0 Tabela; • 2.0 Tabela (Dinâmica - PHP); • 3.0 Formulários em HTML; • 4.0 Formulários em HTML • 5.0 Detalhando os campos do formulário (revisão) • 6.0 Formulários em HTML – Exemplos • 7.0 Exercício
1.0 Estrutura de uma Página • Uma página HTML tem a seguinte estrutura básica: <html> <head> <title>Título da página</title> </head> <body> <p>Este é o primeiro parágrafo do texto.</p> <p>Este é o segundo parágrafo.</p> </body> </html>
2.0 Tabela simples <table border="1"> <tr> <td>linha 1, célula 1</td> <td>linha 1, célula 2</td> </tr> <tr> <td>linha 2, célula 1</td> <td>linha 2, célula 2</td> </tr> </table>
3.0 Tabela (Dinâmica - PHP) <table border="1"> <tr> <td><?php echo “Izo”; ?></td> <td>linha 1, célula 2</td> </tr> <tr> <td>linha 2, célula 1</td> <td>linha 2, célula 2</td> </tr> </table>
3.0 Tabela (Dinâmica - JSP) <table border="1"> <tr> <td><% System.out.println (“Izo”)%></td> <td>linha 1, célula 2</td> </tr> <tr> <td>linha 2, célula 1</td> <td>linha 2, célula 2</td> </tr> </table>
4.0 Formulários em HTML • O formulário é o meio que permite criar mais interatividade entre a programação e o usuário. • É por meio dele que recebemos os valores inseridos pelos usuários e podemos armazenar em um banco de dados, testar com estruturas condicionais etc.
4.0 Formulários em HTML • Uma estrutura de formulário possui vários campos que permitem a entrada de dados. Abaixo, no quadro, colocamos algumas tags utilizadas nos formulários.
4.0 Formulários em HTML – Tag <Form> • Os forms fazem parte do código html, portanto devem ser definidos como as tags desta linguagem. Sempre com uma tag de abertura e outra de fechamento, inserindo o conteúdo do formulário entre estas duas.
4.0 Formulários em HTML – Tag <Form> • Name: Nome do formulário. Não pode existir mais de um formulário com o mesmo valor para o “name” na mesma página. • Action: Todo formulário deve ser enviado para algum local. Sendo assim, o action é o script ou página para onde os dados serão submetidos. Neste script que normalmente os dados são tratados.
4.0 Formulários em HTML – Tag <Form> • Method: É o método de envio dos dados. Pode ter dois valores: • GET = Passa os valores pela URL, ou seja, podemos ver as variáveis e os seus respectivos valores na URL da página destino, definida no campo action. Tem limitação de 256 bytes. Não é muito aconselhável o uso do método GET, pois ele expõe o nome e valor das variáveis, o que pode ser utilizado por pessoas com intenções maléficas. • POST = Passa as variáveis de maneira transparente para o usuário. É o método mais aconselhável, pois não fica visível aos olhos do usuário.
4.0 Formulários em HTML – Tag <Form> • Enctype: é o tipo de empacotamento de envio dos dados do formulário. O valor padrão é o “application/x-www-form-urlencoded”, no entanto quando desejarmos fazer envio de arquivo pelo formulário (campo input “file”) nós devemos definir o enctype como “multipart/form-data”, pois este irá converter o arquivo para binário e enviá-lo.
4.0 Formulários em HTML – Tag<label> • Essa tag define um rótulo para o campo. Exemplo: • Observe que o no exemplo acima, eu combinei o rótulo com o evento de javascript “onmouseover()”. Assim, ao passar o mouse por cima do rótulo, será exibido um alert() com a mensagem “teste”;
4.0 Formulários em HTML – Tag<input> • A tag input serve para efetuar a entrada de dados. Ela possui vários tipos (type) e por isso é muito utilizada. • Os types existentes são: • text, password, file, hidden, checkbox, radio, button, reset, submit e image.
4.0 Formulários em HTML – Tag<input> • Vamos destacar alguns atributos da tag input: • Size: define o tamanho do campo em caracteres • Maxlength: Define a quantidade máxima de caracteres do campo • Accesskey: define a tecla de acesso rápido (sem uso do mouse) para o campo. Lembre-se que você deve utilizar a seguinte combinação: SHIFT + ALT + accesskey
4.0 Formulários em HTML – Tag<input> • Vamos destacar alguns atributos da tag input: • Tabindex: Define a sequência para que o campo receba o foco do cursor. Ex.: Ao apertar a tecla TAB o primeiro campo será o que tiver o tabindex igual a 1. Ao apertar novamente ele irá para o tabindex 2 e assim sucessivamente.
4.0 Formulários em HTML – Tag<input> • Vamos destacar alguns atributos da tag input: • Disabled: Utilizado em todos os campos, esse atributo desabilita o campo. Não é possível nem enviar o valor dele quando o formulário é submetido. • Readonly: Torna o campo como somente leitura. Não é possível alterar o valor para do campo.
4.0 Formulários em HTML – Input • Um parâmetro que pode ser utilizado para informar ao usuário o que deve ser digitado e automaticamente apagar ao ser “clicado”: • onClick=“javascript:campo.value=‘’;” • placeholder = “Digite seu nome...”
4.0 Formulários em HTML – Tag<input> • Saída do código:
4.0 Formulários em HTML – Tag<textarea> • O textarea (ou área de texto) é o campo que exibe um campo de texto maior, que permite ao usuário inserir um texto com várias linhas.
4.0 Formulários em HTML – Tag<textarea> • Vamos destacar alguns atributos: • Rows: Define o número de linhas do campo. Esse atributo somente limita o tamanho do campo e não a quantidade de valores inseridos nele. • Cols: Define o número de colunas do campo (largura).
4.0 Formulários em HTML – Tag<select> • Essa opção de conteúdo é muito utilizada e importante quando necessitamos exibir informações em forma de lista. Essa lista pode ser exibida em forma de listagem ou através de um combo. • Veja os dois exemplos:
4.0 Formulários em HTML – Tag<select> • Tipo Combo (você clica na seta e aparecem as opções):
4.0 Formulários em HTML – Tag<select> • Tipo Listagem (as opções já aparecem listadas de acordo com o número de linhas estabelecidas):
4.0 Formulários em HTML – Tag<select> • Multiple: Permite ao usuário escolher mais de uma opção. Para que essa opção funcione, você deve estabelecer o “size” com um valor maior que 1 (um). • Selected: Esse atributo deve ser colocado na tag <option> e faz com o item da lista já apareça selecionado. • OBS.: Para selecionar mais de uma opção, utilize o CTRL ou SHIFT.
4.0 Formulários em HTML – Botão Submit • Quando utilizamos um botão do tipo “submit”, isso indica que todos os valores digitados no formulário serão enviados para a página identificada no atributo “action”. • Já o botão do tipo “reset”, apaga todos os dados inseridos no formulário.
5.0 Detalhandooscampos Campo Texto • Campo para entrada de texto comum. • Parâmetros • Size – O tamanho do elemento em caracteres na página Html (que será exibido na tela). • Maxlength – É o tamanho máximo do texto que pode ser inserido no elemento. • Value – É utilizado quando há necessidade de se pré-definir um valor para o elemento. Este valor pode ser normalmente alterado pelo usuário.
5.0 Detalhandooscampos Botão Rádio (Radio button) • Parâmetros: • Checked – Se for declarado o elemento terá seu estado inicial como selecionado. • Value – É o valor que será passado à página destino quando o formulário é submetido se este elemento estiver selecionado.
5.0 Detalhandooscampos Botão de Checagem (CheckBox) • Parâmetros: • Checked – Se for declarado o elemento terá seu estado inicial como marcado. • Value – É o valor que será passado à página destino quando o formulário é submetido se este elemento estiver marcado.
5.0 Detalhandooscampos Botão Submeter (Submit) • Parâmetros: • Value – O texto que aparecerá no Botão.
5.0 Detalhandooscampos Botão Reset: • Parâmetros: • Value – O texto que aparecerá no Botão.
5.0 Detalhandooscampos Select: • Parâmetros: • Multiple – Se existir, permite que sejam selecionadas múltiplas opções através das teclas Ctrl ou Shift. • Size – Número de opções exibidas por vez na tela. Se o size estiver setado para “1” que é o default e não existir o parâmetro multiple, o elemento é exibido como um Combo Box. Caso contrário é exibido como um SelectList. • Option – cada subtagoption adiciona uma opção ao elemento. • Value – O value de cada option é o valor passado caso aquela opção seja selecionada. • Obs.: O texto da opção deve ser especificado entre as tags <option> e </option>
5.0 Detalhandooscampos Área de Texto (textarea): • Parâmetros: • Cols – Número e caracteres por linha. • Rows – Número de linhas do campo. • Obs.: não existe o parâmetro value, o texto inicial deve ser definido entre as tags <textarea> e </textarea>.
6.0 Formulários em HTML - Exemplos Formulário - Método GET <form name=“formulario1" action="RespostaFormulario.html" method="get"> Usuário: <input type="text" name="usuario"> <input type="submit" value="Enviar"> </form> Formulário - Método POST <form name=“formulario2" action="RespostaFormulario.html" method="post"> Usuário: <input type="text" name="usuario"> <input type="submit" value="Enviar"> </form> • SUBMIT apresenta o botão que causa o envio dos dados de entrada para o servidor • _ArquivosAula05\PedidoFormulario.html
7.0 Exercício • Faça a lista03.pdf
Dúvidas! FLÁVIO IZO (28) 9986-5273 flavio@flavioizo.com
