Formulários são áreas onde se inserem campos que permitem uma troca de informações maior entre usuários e desenvolvedores de sites HTML Até o momento,

Transcrição

1 HTML

2 Formulários são áreas onde se inserem campos que permitem uma troca de informações maior entre usuários e desenvolvedores de sites HTML Até o momento, HTML mostrou-se uma linguagem bastante adequada para estruturar documentos (com títulos, parágrafos, tabelas, imagens)

3 Links podem ser usados para enviar s, porém talvez seja necessário que os visitantes da página forneçam informações de maneira mais formatada

4 Os formulários são áreas nas quais inserimos objetos para o usuário inserir dados ou preencher campos Os valores inseridos são então enviados para um ou tratados por algum script

5 Um formulário é definido pelas tags O par de tags que delimita os campos de um formulário é <form> </form> Alguns atributos dessa tag são: Action Method EncType

6 Action Formulários Define o tipo de ação a realizar com o formulário. Existem duas possibilidades: O formulário é enviado a um endereço de correio eletrônico O formulário é enviado a um programa ou script que processa seu conteúdo.

7 No primeiro caso, o conteúdo do formulário é enviado ao endereço de correio eletrônico especificada por meio de uma sintaxe deste tipo: <form action="mailto:endereço@correio.com" >

8 Se queremos que o formulário seja processado por um programa (script), temos de especificar o endereço do arquivo que contém esse programa, da mesma forma que se a utilizada para expressar links. A etiqueta ficaria neste caso da seguinte forma: <form action="endereço do arquivo"...>

9 Method Este atributo se encarrega de especificar a forma na qual o formulário é enviado. Os dois valores possíveis que este atributo pode tomar são post e get. Geralmente, o método usado é o post.

10 Enctype Utiliza-se para indicar a forma na qual será enviada a informação que for mandada pelo formulário. No caso mais corrente, enviar o formulário por correio eletrônico, o valor deste atributo deve ser "text/plain".

11 Assim, conseguimos que o conteúdo do formulário seja enviado como texto plano dentro do . Se quisermos que o formulário se processe automaticamente por um programa, geralmente não utilizaremos este atributo, de forma que tome seu valor padrão, ou seja, não incluiremos enctype dentro da etiqueta <form>.

12 Input Formulários A tag mais utilizada em um formulário é <input>. O tipo de entrada (input) é especificado com o atributo type. Os tipos de entrada mais comuns sao explicados a seguir

13 Caixas de Texto Formulários Usadas quando se deseja que o usuário digite letras, números ou qualquer outra informação. Além do atributo type = text, temos de especificar o valor do atributo name A etiqueta é da seguinte forma: <input type="text" name="nome">

14 Exemplo: Nome: <input type="text" name= Nome" /> <br /> Sobrenome: <input type="text" name= Sobrenome" /> </form>

15 O atributo name é usado para que o código que vai manipular o formulário consiga identificar o campo do formulário Outros atributos opcionais para o text são: Size (tamanho do campo na tela) Maxlenght (tamanho máximo da informação) Value (valor default )

16 Texto oculto Formulários Podemos esconder o texto escrito por meio de asteriscos de forma a fornecer uma certa confiabilidade. Este tipos de campos são análogos aos de texto com somente uma diferença: o atributo type="text" é substituído por type="password": <input type="password" name= senha">

17 Neste caso, pode ser comprovado que ao escrever dentro do campo no lugar de texto serão vistos asteriscos.

18 Texto longo Formulários Se desejarmos colocar à disposição do usuário um campo de texto composto de várias linhas, temos de usar a tag <textarea> e seu fechamento </textarea> correspondente.

19 Estes tipos de campos são práticos quando o conteúdo a enviar não é um nome, telefone ou qualquer outro dado breve, e sim, um comentário, opinião, etc.

20 Dentro da tag textarea devemos indicar, da mesma maneira como na caixa de texto, o atributo name para associar o conteúdo a um nome. Além disso, podemos definir as dimensões do campo utilizando os atributos rows e cols.

21 rows Define o número de linhas do campo de texto. cols Define o número de colunas do campo de texto. A tag fica portanto, desta forma: <textarea name="comentário" rows="10" cols="40"></textarea>

22 Se quisermos colocar um valor default na área de texto, basta colocar o texto padrão ENTRE as tags <textarea> e </textarea> Exemplo: <textarea name="comentário" rows="10" cols="40">escreva seu comentário...</textarea>

23 Listas de opções Formulários As listas de opções nos permitem escolher uma (ou várias) das múltiplas opções que nos propõem. Para construí-las utilizaremos uma etiqueta com seu respectivo fechamento: <select> e </select>

24 Como para os casos já vistos, dentro desta etiqueta definiremos seu nome por meio do atributo name. Cada opção será incluída em uma linha precedida da etiqueta <option>.

25 Um exemplo desse tipo de lista é: <select name="estação"> <option>primavera</option> <option>verão</option> <option>outono</option> <option>inverno</option> </select>

26 Esta estrutura pode ser vista modificada principalmente a partir de outros dois atributos: size Indica o número de valores mostrados da lista. O resto pode ser visto por meio da barra lateral de deslocamento.

27 multiple Permite a seleção de mais de um elemento da lista. Este atributo só é utilizado quando se deseja que seja possível escolher múltiplos valores da lista

28 A etiqueta <option> pode ter outros atributos: selected indica que a opção está escolhida por padrão. value Define o valor da opção que será enviada ao script ou ao correio eletrônico, caso seja escolhida essa opção.

29 O atributo value pode ser muito útil se o formulário for enviado a um programa, pois cada opção pode ser associada a um número ou letra, por exemplo <option value="1">primavera</option> Assim, se o usuário escolhe primavera, o que chegará ao programa será estação=1

30 Botões de radio Quando o usuário deve selecionar apenas uma opção entre várias, usamos botões do tipo radio button A etiqueta empregada neste caso é <input> na qual teremos a atributo type que temos de tomar o valor radio.

31 Exemplo: <input type="radio" name="estação" value="1">primavera <br> <input type="radio" name="estação" value="2">verão <br> <input type="radio" name="estação" value="3">outono <br> <input type="radio" name="estação" value="4">inverno É possível pré-selecionar por padrão uma das opções. Isto se obtém por meio do atributo checked: <input type="radio" name="estação" value="2" checked>verão

32 Check Box Formulários Estes tipos de elementos podem ser ativados ou desativados pelo visitante com um simples clique sobre a caixa em questão. A sintaxe utilizada é muita parecida com as vistas anteriormente: <input type="checkbox" name= Aluno">Aluno da UTFPR

33 A única diferença fundamental é o valor adotado pelo atributo type. Da mesma forma que para os botões de radio, podemos ativar a caixa por meio do atributo checked. O tipo de informação que chegará ao nosso correio (ou ao programa) será do tipo: Aluno=on (ou off dependendo se tiver sido ativada ou não)

34 Botões Formulários Dentro dos formulários também podemos colocar botões clicáveis. Sua sintaxe é a seguinte: <input type=button value="texto escrito no botão > Utilizando linguagens como Javascript podemos definir ações a tomar quando um visitante clique o botão de uma página web.

35 botão Submit (ou de envio) Para finalizar o processo de preenchimento do formulário e fazê-lo chegar a seu gestor, o usuário tem de validá-lo por meio de um botão previsto para tal efeito.

36 A construção de tal botão utiliza uma tag do tipo input com o atributo submit <input type="submit" value="enviar"> A mensagem do botão (Caption) é especificada através do atributo value.

37 botão Apagar Campos Este botão nos permite apagar o formulário por completo no caso de que o usuário deseje refazê-lo desde o princípio. Sua estrutura sintática é igual a anterior: <input type="reset" value="apagar Campos">

38 A diferença do botão de envio, indispensável em qualquer formulário, o botão de Apagar Campos é meramente optativo e não é utilizado freqüentemente. Há que se ter cuidado de não colocá-lo muito perto do botão de envio e de distinguir claramente um do outro.

39 Dados ocultos Formulários Em alguns casos pode ser prático enviar dados definidos por nós mesmos que ajudem ao programa em seu processamento do formulário. Estes tipos de dados, que não são exibidos na página são mais usados por páginas que empregam tecnologias de servidor.

40 Por exemplo: Formulários <input type=hidden name="site" value=" Esta etiqueta, incluída dentro de nosso formulário, enviará um dado adicional ao correio ou ao script encarregado da gestão do formulário.

41 Poderíamos a partir deste dado, tornar conhecido ao programa a origem do formulário ou algum tipo de ação a realizar (um re-endereçamento, por exemplo).

42 Exemplo: Formulários

43 <HTML> <HEAD> </HEAD> <BODY> <form method="post" enctype="text/plain"> Nome <input type="text" name="nome" size="30" maxlength="100"> <br> <input type="text" name=" " size="25" maxlength="100" <br> Cidade <input type="text" name="cidade" size="20" maxlength="60"> <br> Sexo <br> <input type="radio" name="sexo" value="masculino" checked> Homem <br> <input type="radio" name="sexo" value="feminino"> Mulher <br> <br> Frequência das viagens <br> <select name="utilização"> <option value="1">várias vezes por dia <option value="2">uma vez por dia <option value="3">várias vezes por semana <option value="4">várias vezes por mês </select> <br> <br> Comentários sobre sua satisfação pessoal <br> <textarea cols="30" rows="7" name="comentários"></textarea> <br> <br> <input type="checkbox" name="receber_info" checked> Desejo receber notificação das novidades nas linhas de ônibus. <br> <br> <input type="submit" value="enviar formulário"> <br> <br> <input type="reset" value="apagar tudo"> </form> </BODY> </HTML>

44 Atividade Criar um formulário para Cadastro de Inscritos em um Evento. Os dados informados devem ser: Nome Endereço Estado (deve ser uma selection list) Aluno da UTFPR (check Box)

45 Atividade Sexo (Radio Button) Lista de Interesses (CheckBoxes) Hardware Engenharia de Software Linguagens de Programação Lógica Digital Processamento de Imagens e Sinais Computação Gráfica Algoritmos Outros: Quais (caixa de texto) Um botão para enviar Um botão para limpar os campos