Formulários Formulários permitem que os usuários interajam com um servidor Web passando informações. Assim, através da Web, se pode ler e gravar informações em Banco de Dados, gerando enormes possibilidades de uso, como por exemplo a de um serviço de venda. <form>... Os tags <form>... definem um formulário, isto é, um local da página utilizado pelo usuário para enviar informações para um local predeterminado <form method="post" action="http://www.xyz.com.br/cgi-bin/script"> <p> <input type="text" name="t1" size="20"> </p> O código acima descreve o formulário com uma caixa de texto e dois botões Atributos de form Atributo: action Explicação: Indica a localização (URL) do script que irá receber e interpretar os dados enviados pelo formulário. <form method="post" action="http://www.xyz.com.br/cgi-bin/script"> 69
Atributo: method Explicação: Indica o formato no qual os dados serão enviados. Pode assumir os seguintes valores: "get" (indica como os dados serão passados juntamente com a URL definida por action - tamanho limitado) "post" (envia os dados no corpo da mensagem e não aparecerão na barra de endereços do navegador do usuário). <form method="post" action="http://www.xyz.com.br/cgi-bin/script"> Atributo: name Associa um nome ao elemento form. Esse nome deve ser único no documento inteiro e poderá ser utilizado por scripts e folhas de estilo para referenciar esse formulário. A identificação também pode ser feita pelo atributo id. <form method="post" action= http://www.xyz.com.br/cgi-bin/script name= meuform > Elementos de entrada de dados <input /> Elemento para entrada de dados. Segue o formato <input type="tipo" value= valor name="nome da variável" >, onde name - especifica o nome pelo qual o dado será recuperado no processamento; value atributo que indica o valor associado ao elemento. type - especifica o formato de entrada dos dados. Segue abaixo os tipos existentes. text Indica entrada de texto em uma única linha. Para este tipo de entrada, o atributo value indica o valor inicial do campo. O atributo maxlength define o limite de caracteres tolerado para a entrada e size define uma largura em número de caracteres por campo. 70
Campo de entrada texto, com valor inicial preenchido com usuario@dominio. Tamanho do campo 50 caracteres e limite máximo do valor de entrada de 80 caracteres. <input type="text" name="email" value= usuario@dominio size= 50 maxlength= 80 > password Aparecem caracteres "*" quando digitadas as letras. Funciona igualmente ao tipo text. Permite utilizar os atributos size e maxlength. <input type="password" name="senha" size="8"> checkbox Cria uma caixa de seleção. Se o atributo value contiver valor, esse será passado ao servidor caso o usuário marque a caixa de seleção. O usuário pode optar em mais de uma das opções disponíveis. O atributo checked= checked marca previamente a opção. <input type="checkbox" name="estado_civil"> solteiro <input type="checkbox" name="pagamento" checked> à vista radio Semelhante ao checkbox, entretanto somente uma opção poderá ser escolhida. A opção name deve ser a mesma e a opção value diferente. <input type="radio" name="cor" value="branco"> branco <input type="radio" name="cor" value="preto" checked> preto <input type="radio" name="cor" value="vermelho"> vermelho hidden Envia informações sem a interferência do usuário. <input type="hidden" name="origem" value="paulo"> 71
submit Botão para envio dos dados. Ao acioná-lo os dados são enviados para o servidor e executados no script definido pelo campo action. O atributo value define o texto do botão. Botão cujo texto do botão é OK <input type="submit" " value="ok"> image Mesma finalidade do tipo submit, representado por uma imagem. <input type="image" " name="barra_de_acao" src="barra.gif"> reset Botão que permite apagar todos os campos. Ex. <input type="reset" " value="limpar"> readonly= readonly Indica o campo somente em modo leitura. O usuário não poderá editá-lo. 72
<select>...</select> Elemento que cria menus suspensos. Exige um atributo name. O atributo size define quantas opções da lista poderão ser visualizadas simultaneamente. O padrão é exibir apenas uma opção e quando o usuário clicar sobre a lista, as demais serão exibidas. <select name="comida" size= 3 > O atribito multiple = multiple permite a seleção de mais de uma opção. <select name="comida" size= 3 multiple= multiple > <option value="ital"> Italiana</option> <option value="tex"> Texana</option> <option value="chur"> Churracaria</option> <option value="chin"> Chinesa</option> </select> <option>...</option> Usado juntamente com o elemento select. Insere uma opção na lista de seleção. Exige um atributo value. O atributo selected= selected especifica a opção selecionada previamente. <select name="comida" size= 3 multiple= multiple > <option select= selected value="ital"> Italiana</option> <option value="tex"> Texana</option> <option value="chur"> Churracaria</option> <option value="chin"> Chinesa</option> </select> 73
<textarea>...</textarea> Proporciona ao usuário, espaço para a digitação de múltiplas linhas de texto. Esse tipo de campo permite que o usuário pressione ENTER para trocar de linha. Exige um atributo name. Ex. <textarea rows="3" cols="50">área para texto</textarea> Atributo: rows Explicação: Indica o número de linhas que a área de texto deve possuir. Atributo: cols Explicação: Indica o número de colunas que a área de texto deve possuir. Exemplos de Formulários Text Box <input type="text" name="t1" size="20"> 74
Textarea <textarea rows="2" name="s1" cols="20"></textarea> Checkbox <input type="checkbox" name="c1" value="on">tópico 1 Exemplo com checked: <form method="post" action="--url--"> <input type="checkbox" name="c1" value="on" checked= checked > 75
Radio Button <input type="radio" value="v1" checked name="r1">tópico 1 Drop-Down Menu <select name="d1" size="1"> <option value=http://www.xyz.com.br/topico1 selected= selected >Tópico 1</option> <option value="http://www.xyz.com.br/topico2">tópico 2</option> </select> Push Button <form method="post" action="_url_"> <input type="button" value="button" name="b1"> 76
77