HTML Formulário O elemento FORM, da HTML, é o responsável por prover documentos interativos no ambiente WWW de forma que uma pagina web exibida a um usuário possa submeter um conjunto de dados, informados pelo usuário, um programa, no Servidor web, que processará estes dados. Um FORM coleta dados, mas não os processa. São os programas no servidor web descritos por meio de script's que entendem os dados. Uma interface CGI permite que o servidor se comunique com o script que vai atuar sobre essas informações, retornando os resultados para o navegador. Os scripts podem ser gerados em CGI, Perl, PHP, Java etc Elementos de um formulário Os componentes de um formulário são: Form, Input, Select e AreaText 1. Etiqueta Form Define um formulário. Notação: Seus atributos são: action - Responsável por determinar o exato local para onde as informações coletadas no formulário deverão ser enviadas. method - Método de empacotamento dos dados do formulário: get e post name - Nome do formulário Descrição dos métodos: GET é o método default e faz com que o conteúdo do formulário seja anexado ao final da URL especificada no atributo ACTION, com a seguinte forma: action?name=value&name=value&name=value POST faz com que o conteúdo do formulário seja codificado exatamente como no método GET, mas ao invés de anexá-lo à URL, ele é enviado ao servidor em um bloco de dados endereçado à URL especificada no atributo ACTION. Este é o método mais recomendado. <form method="post" action = "http://www.sidneyvieira.co.nr/cdastraraluno.php">... Prof. Sidney Vieira 1
2. Etiqueta Input Este componente define um elemento de entrada de dados simples dentro de um formulário. Notação <input>. Observe que esta etiqueta não possui tag de finalização Seus atributos são: type - Tipo de dado que pode ser : text, file, radio, checkbox, hidden, password, submit, reset, button, image name - Identificação do campo sendo um atributo obrigatório size - Largura maxlength - Número máximo de caracteres permitidos value - Texto que aparece dentro da caixa ou nome do botão checked value - Valor assumido quando este campo for selecionado exemplo: <INPUT TYPE="text" NAME=teste SIZE=15 MAXLENGHT=15> Os diferentes type para um input são apresentados a seguir. 2.1 Input tipo TEXT Este tipo é usado para entrada de texto normal, sendo a opção default. O atributo Value é opcional e deve ser usado para especificar o conteúdo default do campo. Entre com sua senha: <INPUT TYPE="text" NAME="nome"> Entre com o seu nome: 2.2 Input tipo PASSWORD Este tipo é usado para entrada de informação secreta, onde os caracteres não são exibidos, sendo representados por asteriscos ou caracteres similares. Prof. Sidney Vieira 2
Entre com sua senha: <INPUT TYPE="password" NAME="senha"> Entre com sua senha: Exemplo : Cidade: <INPUT TYPE="text" NAME="cidade" VALUE="Rio de Janeiro"> Cidade: Entre com uma palavra com até 10 caracteres: <INPUT TYPE="text" NAME="palavra" SIZE=10 MAXLENGTH=10> Entre com uma palavra com até 10 caracteres: 2.3 Input tipo CHECKBOX Este tipo é usado para entrada de informação onde os possíveis valores fazem parte de um conjunto pré-definido. É representado por um botão, que é marcado/desmarcado quando clicado. O atributo VALUE é obrigatório que especifica o valor do INPUT quando este botão é selecionado (botões não selecionados são desconsiderados durante a submissão dos dados). O atributo CHECKED especifica que este botão "checkbox" é selecionado por default. Quais dos esportes abaixo você pratica? <INPUT TYPE="checkbox" NAME="OPCAO" VALUE="nat"> natação Prof. Sidney Vieira 3
<INPUT TYPE="checkbox" NAME="OPCAO" VALUE="gin"> ginástica <INPUT TYPE="checkbox" NAME="OPCAO" VALUE="vol"> vôlei <INPUT TYPE="checkbox" NAME="OPCAO" VALUE="fut"> futebol Quais dos esportes abaixo você pratica? natação ginástica vôlei futebol 2.4 Input tipo RADIO Este tipo é usado para entrada de informação similar ao CHECKBOX, mas no RADIO somente uma opção pode ser selecionada. Quando uma opção RADIO é marcada, esta só será desmarcada quando outra opção RADIO com mesmo NAME for selecionada. O atributo VALUE é obrigatório que especifica o valor do INPUT quando este botão é selecionado (botões não selecionados são desconsiderados durante a submissão dos dados). O atributo CHECKED especifica que este botão "radio" é selecionado por default. Se nenhum atributo VALUE for especificado, todos assumirão o mesmo valor default on, e o servidor não será capaz de dizer qual botão está selecionado <INPUT TYPE="RADIO" NAME="sexo" VALUE="M"> Masculino <br> <INPUT TYPE="RADIO" NAME="sexo" VALUE="F"> Feminino Qual o seu sexo? Feminino masculino 2.5 Input tipo SUBMIT Este tipo é representado para o usuário como um botão que, quando apertado, causa a submissão dos dados à URL especificada no identificador FORM. O atributo VALUE pode ser usado para especificar o rótulo do botão. Prof. Sidney Vieira 4
<INPUT TYPE="submit" VALUE="Enviar"> Enviar 2.6 Input tipo RESET Este tipo é representado para o usuário como um botão que, quando apertado, restaura todos os elementos de entrada do formulário aos seus valores defaults. <INPUT TYPE="reset" VALUE="Cancela"> Cancela 2.7 Input tipo HIDDEN Este tipo é usado quando apesar da informação ser importante para o programa que irá processar os dados, esta não necessita ser apresentada ao usuário. O atributo NAME descreve o nome simbólico deste INPUT. O atributo VALUE descreve o valor relacionado a este INPUT. EXEMPLO: <INPUT TYPE="hidden" NAME="email" VALUE="vieira.sidney@gmail.com"> 3 Etiqueta Textarea Define uma area de texto. Notação: <textarea> </textarea> Seus atributos são: rows - Tamanho da linha da caixa de texto Prof. Sidney Vieira 5
cols - Tamanho da coluna da caixa de texto. name - Identificação do campo wrap Descreve como ocorre a quebra de linha da caixa de texto. O atributo wrap pode assumir os seguintes valores: OFF - o texto digitado não sofre nenhum efeito de quebra de linha; VIRTUAL - o texto digitado sofre o efeito na tela de quebra de linha, porém o texto é enviado numa única linha PHYSICAL - o texto digitado sofre o efeito na tela de quebra de linha, e também o texto é enviado <TEXTAREA rows="9" name="comentarios"> descreva o seu comentário </TEXTAREA> Resultado 4 Etiqueta Select Este componente do formulário é utilizado para selecionar uma ou mais opções de uma lista predefinida. Notação: <select> </select>. Cada opção é definida por meio do <option> </option>. O atributo NAME, na tag select, define um nome para o select. É o atributo VALUE e determina um valor para a opção. O atributo MULTIPLE, na tag select, indica que varias opções poderão ser selecionadas. O atributo VALUE, na tag option, indica o valor que será enviado caso a opção seja escolhida. O atributo SELECTED, na tag option, indica que este valor aparece selecionado para o usuário <select name="formacao1"> Prof. Sidney Vieira 6
<option value="eng">engenharia</option> <option value="comp">computacao</option> <option value="mat">matematica</option> <option value="arq">arquitetura</option> <option value="fis">fisica</option> </select> <p> <select name="formacao2"> <option value="med">medicina</option> <option value="enf" selected="selected">enfermagem</option> <option value="nut">nutrição</option> <option value="bio">biologia</option> <option value="far">farmacia</option> </select> </p> <p> <select name="formacao3" multiple="multiple"> <option value="dir">direito</option> <option value="soc" selected="selected">sociologia</option> <option value="sso">serviço Social</option> <option value="adm">administração</option> <option value="con">contabilidade</option> </select> </p> Prof. Sidney Vieira 7