54 aula6 formulario

Prévia do material em texto

69 
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> .... </form> 
 
Os tags <form> .... </form> definem um formulário, isto é, um local da página 
utilizado pelo usuário para enviar informações para um local predeterminado 
 
Exemplo: 
<form method="POST" action="http://www.xyz.com.br/cgi-bin/script"> 
<p> 
<input type="text" name="T1" size="20"> 
<input type="submit" value="Submit" name="B1"> 
<input type="reset" value="Reset" name="B2"> 
</p> 
</form> 
 
 
 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. 
 
Exemplo: 
<form method="post" action="http://www.xyz.com.br/cgi-bin/script"> 
 
 
 
 
 70 
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). 
 
 
Exemplo: 
<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”. 
 
Exemplo: 
<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. 
 71 
 
Ex.: 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. 
 
Ex.: 
<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. 
 
Ex.: 
<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. 
 
Ex.: 
<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. 
 
Ex.: 
<input type="hidden" name="origem" value="paulo"> 
 
 
 72 
 
 
♦ “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. 
 
Ex.: Botão cujo texto do botão é “OK” 
<input type="submit" " value="OK"> 
 
♦ “image” 
Mesma finalidade do tipo submit, representado por uma imagem. 
 
Ex.: 
<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. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 73 
• <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. 
 
Ex.: 
<select name="comida" size=”3”> 
 
O atribito multiple = “multiple” permite a seleção de mais de uma opção. 
Ex.: <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. 
 
Ex.: 
<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> 
 
 
 
 
 
 74 
• <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 
 
Exemplo: 
<form method="post" action="_URL_"> 
 <input type="text" name="T1" size="20"> 
<input type="submit" value="Submit" name="B1"> 
<input type="reset" value="Reset" name="B2"> 
</form> 
 
 
 
 
 
 
 
 
 
 
 75 
Textarea 
 
Exemplo: 
<form method="post" action="_URL_"> 
 <textarea rows="2" name="S1" cols="20"></textarea> 
<input type="submit" value="Submit" name="B1"> 
<input type="reset" value="Reset" name="B2"> 
</form> 
 
 
 
 
Checkbox 
 
Exemplo: 
<form method="post" action="_URL_"> 
 <input type="checkbox" name="C1" value="ON">Tópico 1 
<input type="submit" value="Submit" name="B1"> 
<input type="reset" value="Reset" name="B2"> 
</form> 
 
 
 
Exemplo com checked: 
 
<form method="post" action="--URL--"> 
 <input type="checkbox" name="C1" value="ON" checked=”checked”> 
<input type="submit" value="Submit" name="B1"> 
<input type="reset" value="Reset" name="B2"> 
</form> 
 
 
 76 
 
 
Radio Button 
 
Exemplo: 
<form method="post" action="_URL_"> 
<input type="radio" value="V1" checked name="R1">Tópico 1 
<input type="submit" value="Submit" name="B1"> 
<input type="reset" value="Reset" name="B2"> 
</form> 
 
 
 
Drop-Down Menu 
 
Exemplo: 
<form method="post" action="_URL_"> 
<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> 
<input type="submit" value="Submit" name="B1"> 
<input type="reset" value="Reset"name="B2"> 
</form> 
 
 
 
Push Button 
 
Exemplo: 
<form method="POST" action="_URL_"> 
<input type="button" value="Button" name="B1"> 
</form> 
 
 
 77